English Português

Para hacer un sitio web o un blog más dinámica es necesario darle control al usuario. Control como el hecho de decidir que quiere elementos quiere ver y cuales no y se lo podemos otorgar gracias jQuery y un sencillo script gracias a Web desginer wall.

desaparecer-elementos

El script y la librería te permitirán hacer desaparecer cualquier elemento de la página al cliquear en un botón. Por ejemplo, podemos colocar una nota en la barra lateral de la página con un aviso y colocar un botón para que desaparezca si le estorba al lector. (Ver demo)

  1. Como siempre, lo primero es descargamos la librería y hacemos el llamado entre las etiquetas <head> y </head>.
    <script type="text/javascript" src="jquery.js"></script>
  2. Enseguida después del llamado, agregamos la función que usa la librería y le dice que al cliquear el elemento con clase “eliminar” (en este caso el botón) desaparezca el elemento con clase “contenedor” (en este caso el div del mensaje).
    <script type="text/javascript">
    $(document).ready(function(){
    						   
    	$(".contenedor .eliminar").click(function(){
    		$(this).parents(".contenedor").animate({ opacity: 'hide' }, "slow");
    	});
    
    });
    </script>
  3. Ahora solo hay que usar las clases del script en la estructura html.
    <div class="contenedor">
    	<h2>Lorem ipsum 1</h2>
    	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>
    	<p><a href="">Regresar al tutorial</a></p>
    	<img src="eliminar.png" alt="cerrar" class="eliminar" />
    </div>
  4. Y darle estilo a cada clase, es decir, al contenedor y al botón con los respectivos atributos generales.
    .contenedor {
    	margin:20px auto;
    	background:#F5E38E;
    	border:2px solid #EBCA4F;
    	padding:10px;
    	width:500px;
    	position:relative;
    }
    .contenedor .eliminar {
    	position: absolute;
    	top: 10px;
    	right: 10px;
    	cursor: pointer;
    }
    h2 { color:#ff0000; font-size:15px; }
    p { font-size:11px; padding: 0 0 11px; color:#333; }
    a { color:#ff8400; }
    body { font-family:verdana, arial; }

Las posibilidades son muchas y de hecho este es en esencia el mismo funcionamiento que tienen los menús de pestañas (tabs).

Demo | Descargar el ejemplo

Escrito por Francisco Oliveros

Soy un gran aficionado del diseño y de todo lo que el código puede comunicar. Ingeniero mecánico por profesión, pero dedicado al desarrollo web a tiempo completo.

Blog / Twitter

Artículos relacionados

Sigue leyendo consejos, tips y tutoriales para tu blog.

    Comentarios

    1. Fire_tony / Hace 9 años /

      ¿Por qué sale siempre ese mensaje en latín? Yo no lo entiendo, seguro que son mensajes subliminales…

      Responder a Fire_tony →
    2. Reivajss / Hace 9 años /

      jajaja el mensaje en latin es un mensaje por defecto que se usa (como el hola mundo).

      mi duda… esto funciona en blogger?

      pregunta aparte, tiempo atrás en el blogger antiguo logré hacer que al dar click a comentarios.. estos aparezcan a lo javascript (sin recargar toda la página).. se puede hacer esto en el nuevo blogger?

      Responder a Reivajss →
    3. alien / Hace 9 años /

      Muy bueno, y buena pregunta, funciona para blogger?
      Y agrego esto: y si quiero que aparezca de nuevo?
      O sea, estaria bueno que se haga como una ventanita chiquita y minimizada, no se algo asi.
      Visito siempre el blog, UN ABRAZO

      Responder a alien →
    4. Bloggerviviente / Hace 9 años /

      Hola, tu blog me ha enseñado muchisimas cosas, y yo he digamos “copiado algunas caracteristicas, espero esto no te moleste, he decidido que en agradecimiento necesito colocar un link a BlogandWeb de casualidad tendras una imagen de 125x125px para poner el enlace? obviamente que sea una imagen con tu logotipo o similar, agradeceria tu respuesta.

      Responder a Bloggerviviente →
    5. k_nelita / Hace 9 años /

      Hola Francisco, mira, he puesto de pruebas una plantilla de Btemplates, no me acuerdo el nombre pero si miras en mi perfil, es el que estoy usando en el blog que anoté antes, le estoy haciendo algunas modificaciones, se que la plantilla no es de las tuyas, pero como está en un blog donde tu trabajas, por eso te pregunto.
      Siguiendo instrucciones del blog de gem@ le he puesto el leer mas en expandible, pero parece (no, no parece) no funciona, no se que será, que es lo que hice mal, como es una plantilla del tipo de las que vos hacés tal vez me puedas dar una mano.
      Desde ya muy agradecida.
      PD: La autora (parece ser una mujer)se apellida Orange si mal no recuerdo.
      Un saludo!

      Responder a k_nelita →
    6. k_nelita / Hace 9 años /

      Yo de nuevo Itadvance se llama la plantilla, no hay explicaciones, el ingles no lo entiendo, la parte de la fecha no sale como en el demo, y el sector donde van las etiquetas, publicado por, y todo eso debajo de los post, en FireFox se ve el, no se como llamarlo, como un recuadro o relieve, que queda muy bonito, pero en Explorer no sale ese “borde”. Porque será?
      Perdona que sea tan pesada, pero me gusta mucho la plantilla y no logro que quede como quiero, si me dieras una manito te agradecería muchisimo.
      Un saludo! 🙂

      Responder a k_nelita →
    7. Francisco / Hace 9 años /

      Reivajss, podrías probar con alguna librería javascript como las de lightbox para embeber html. No he probado, pero podría funcionar.

      alien, si se puede aplicar a Blogger sin problema alguno. Solo que tal vez sea necesario transformar la función a caracteres html con un convertidor.

      Bloggerviviente, la verdad es que no tengo un banner de blogandweb, pero te lo agradecería más si colocaras el banner de serturista ^_^

      k_nelita, en la entrada de esa plantilla de la autora seguro encuentras la respuesta.

      Responder a Francisco →
    8. Javier Martinez / Hace 9 años /

      Saludos francisco, me gusto la manera que destacas los mensajes del autor, generalmente se destaca cambiando el color de fondo del contenido del comentario… 😉 muy bueno el blog

      Responder a Javier Martinez →
    9. alien / Hace 9 años /

      Gracias francisco 😉

      Responder a alien →
    10. www.ventacytotec.com / Hace 9 años /

      Me parece Genial. Muchas gracias por la información.
      Saludos

      Responder a www.ventacytotec.com →
    11. Francisco / Hace 9 años /

      Gracias por su visita 🙂

      Responder a Francisco →
    12. Şarkı Dinle / Hace 9 años /

      Thanks that’s article..

      Responder a Şarkı Dinle →
    13. Diegoogle / Hace 8 años /

      Holas !!..excelente ejemplo !!…lo he implementado y funciona suuuper bien, lo mezcle con una funcion de interface y funciona de pelos, ahora mi pregunta es la siguiente, como puedo saber que paginas quedaron abiertas?, esto para generar en una base de datos las cosas que se abrieron o no, me entienden?, bueno eso ……

      Espero su respuesta, que se que sera buena por lo que he leido mas arriba 😀

      Saludos !!!!
      Diego.

      Responder a Diegoogle →

    Responder

    ¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

    Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

    Términos de uso - Política de privacidad