Webmaster Libre

15 Respuestas a “Divs que aparecen y desaparecen con javascript”

Agrega tu comentario

1. Raspu dice:

   10 Marzo 2007 en 17:24

   Si me lo permites quisiera aportar con un par de mejoras

   Cuando se habla de separación de capas, se busca también no mezclar CSS con Javascript. A modo de ejemplo, cuando en el script quieres ocultar o mostrar el elemento no debes manipular la propiedad display si no manipular el atributo class, y es en la propia hoja de estilos donde dispones de una clase para ocultar y otra clase para mostrar.

   Aquí vienen los cambios:

   1. En la hoja de estilos agrega las siguientes clases:

   
.oculto{
display: none;
}
.visible{
display: block;
}

   2. El JavaScript quedaría así:

   
function tgdiv(){
var di = document.getElementById('div-a');
var tg = document.getElementById('tglink');
di.className = 'oculto';
tg.onclick = function(){
if (di.className == 'oculto'){
di.className = 'visible';
}else{
di.className = 'oculto';
}
}
}
window.onload = tgdiv;


   Si te fijas no se mezcla nada de CSS en el JavaScript (en este caso sólo he considerado para el efecto elementos de bloque).

   Hay otros cambios que también se pueden hacer para trabajar con más de una pareja de elementos, pero dejemos que alguien más aporte su grano de arena.
2. Alma Fernández dice:

   10 Marzo 2007 en 17:52

   Cierto Raspu, la verdad es que el script es básico del todo y a simple vista se puede ver que hay cosas que no están “hechas todo lo bien que se podría” pero, este ejemplo concreto, preferí centrarlo en lo fácil que era sacar los eventos del HTML.

   Eso si, podría ser una gran idea (me lo apunto) hacer una v2 del script usando el mejor código posible y explicar las diferencias. Gracias
3. Javi dice:

   18 Marzo 2007 en 23:37

   Revisando el artículo me ha surgido una duda ¿qué diferencia habría si se utilizase la propiedad visibility en lugar de display? ¿Es menos apropiado? ¿Menos soportado por navegadores? ¿Da igual?
4. Javi dice:

   19 Marzo 2007 en 0:06

   Vale, me respondo yo solito.

   Recordé que en una entrada enlazabas a un artículo sobre propiedades que no se utilizaban mucho. La entrada era esta: http://www.webmasterlibre.com/2007/02/16/links-for-2007-02-16/ y el artículo: 15 propiedades CSS que probablemente no usas y que quizás deberías y en él se habla de la propiedad visibility:

   2. visibility
   visibility: (inherit | visible | hidden)

   From Macromedia
   “For practical purposes, the difference between these two properties [visibility and display] is that when you hide information using the visibility property, the browser creates the appropriate amount of space in the browser window for the information when the page loads. When you use the display property, space for the information is not created until the element becomes visible.”

   Con visibility se reserva el espacio que ocupe el elemento incluso aunque esté oculto, con display no se ocupa ese espacio hasta que se muestra.

   
5. Alma Fernández dice:

   19 Marzo 2007 en 0:18

   Da gusto hijo, tu preguntas tu contestas… Me alegro de que, indirectamente, te haya resuelto la duda jejejeje
6. elQueFaltaba dice:

   26 Abril 2007 en 13:14

   Vale, me está gustando esta página ..

   Otra sugerencia, aunque ahora mismo no tengo tiempo para meterme en el código, pero …

   Y si haces que el javascript lea todos los elementos con una clase determinada, ‘flag’, y crée un array de id de elementos con la clase flag, de manera que luego a tu función le pases qué id quieres mostrar/ocultar?
   Con esto tendríamos la posibilidad de poder manejar diferentes capas, y no tener que identificarlas dentro del script, sino sólo en las llamadas a la función …

   Qué os parece?
7. Alma Fernández dice:

   26 Abril 2007 en 14:20

   Suena bien, muy bien. En cuanto yo tenga un rato también, me pongo a mirar el script. Con tantas sugerencias nos puede quedar algo muy gracioso
8. Juanma dice:

   27 Julio 2008 en 6:36

   Hola, vi lo que hace el link de la web digg.com, y me gustó mucho, después vi esta web en la que se explica como se hace, pero…en digg.com el formulario aparece y desaparece gradualmente, y tal como se ha explicado aquí aparece y desaparece instantaneamente. ¿alguien sabe cómo hacer para producir el mismo efecto que digg.com?, o al menos con que propiedades o atributos se puede hacer???

   Gracias!
9. Alma Fernández dice:

   27 Julio 2008 en 10:38

   Juanma, el efecto que buscas es muy sencillo de realizar con jQuery. Busca por su documentación el efecto toggle y ahí te dan instrucciones para el tiempo de la transición y todo eso.
10. Juanma dice:

    27 Julio 2008 en 17:59

    Pero….es posible conseguir ese efecto solo con JavaScript y CSS????
11. Alma Fernández dice:

    27 Julio 2008 en 18:08

    Si, se puede prueba con este artículo de Harry Maugans (el mismo autor que el de arriba)
12. Juanma dice:

    27 Julio 2008 en 20:20

    Alma Fernández el efecto que se consigue con este artículo es como el que tengo hecho, es decir, aparece y desaparece, lo que busco es la forma de poder hacer aparacer y desaparecer gradualmente, ese efecto como en el de JQuery pero haciéndolo solo con Javascript y CSS. ¿Qué opinas?
13. Alma Fernández dice:

    27 Julio 2008 en 20:55

    Vale, vale. Que había confundido el login de digg con el de technorati. Tendré que mirarlo un poco (a ver si saco un rato mañana) pero tiene pinta de ser algo parecido al artículo de Harry pero jugando con la opacidad del bloque que aparece.
14. Juanma dice:

    27 Julio 2008 en 20:58

    SiSi, eso era, estoy buscando bastante, pero encuentro ese enfecto con la función toggle de JQuery, pero yo lo ando buscando solo en JasvaScript y CSS.
    Ya me cuentas si ves algo, ok?
    Gracias!

Trackbacks/Pingbacks

1. noticias.woxblog.com dice:

   8 Marzo 2007 en 9:39

   Divs que aparecen y desaparecen con javascript…

   Hace unos días llegaba a portada de Digg un artículo escrito por Harry Maugans: How to Create a Collapsible DIV with Javascript and CSS. En principio me sorprendió que un script tan simple lograse tanto eco pero lo que más me sorprendió es que uti…

Feed RSS de los comentarios de este post.