Desaparecer elementos web con jQuery
Mayo 12th, 2008 | Publicado por Francisco en Diseño, Javascript, Tutoriales | 14 Comentarios
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.
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)
- 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> - 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> - 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> - 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).
Mayo 12th, 2008 a las 8:07 pm (#)
¿Por qué sale siempre ese mensaje en latín? Yo no lo entiendo, seguro que son mensajes subliminales…
Mayo 12th, 2008 a las 8:15 pm (#)
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?
Mayo 12th, 2008 a las 8:37 pm (#)
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
Mayo 13th, 2008 a las 9:13 am (#)
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 125×125px para poner el enlace? obviamente que sea una imagen con tu logotipo o similar, agradeceria tu respuesta.
Mayo 13th, 2008 a las 2:20 pm (#)
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!
Mayo 13th, 2008 a las 2:49 pm (#)
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!
Mayo 15th, 2008 a las 1:07 am (#)
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.
Mayo 16th, 2008 a las 3:12 pm (#)
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
Mayo 17th, 2008 a las 6:21 pm (#)
Gracias francisco
Mayo 19th, 2008 a las 3:23 pm (#)
Me parece Genial. Muchas gracias por la información.
Saludos
Mayo 23rd, 2008 a las 2:10 am (#)
Gracias por su visita
Mayo 29th, 2008 a las 3:38 am (#)
Thanks that’s article..
Agosto 7th, 2008 a las 11:10 am (#)
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.