En muchos casos cuando tenemos poco espacio y mucho contenido nos puede interesar el poder ocultar ciertas capas que en algún momento no sean necesarias.
Este código ha sido probado con Internet Explorer 7 y Firefox 2 y ha funcionado perfectamente con ellos.
Mediante una función javascript conseguiremos que cualquier capa aparezca y desaparezca a nuestro antojo y para ello tenemos dos maneras posibles de hacerlo.
Con la primera, la haremos desaparecer pero el hueco donde estaba seguirá visible, con el otro conseguiremos que desaparezca y además que la página se reestructure para tapar el hueco donde estaba, es decir, ganaremos espacio en nuestra página.
Mostrar / ocultar una capa sin redimensionar la página
Para ello usaremos la propiedad “style.visibility” de un objeto javascript la cual tiene dos valores, visible o hidden en función de cómo queramos que aparezca.
Este código es usado para mostrar/ocultar en procesos de formularios anidados.
Una función para hacer funcionar esto sería:
function mostrar(capa){
var obj = document.getElementById(capa)
if(obj.style.visibility== "hidden") obj.style.visibility= "visible";
else obj.style.visibility= "hidden";
}De tal manera que para hacerlo funcionar sólo tendríamos que invocar la función mostrar(’nombrecapa’) y ya estaría funcionando, si está visible, la ocultará, sino, la mostrará.
Mostrar / ocultar una capa redimensionando la página
Es muy parecido al anterior caso exceptuando que tendremos que usar las propiedades de los objetos “style.display” que tendrá al igual que antes dos posibles valores block (visible) o none (oculto)
function mostrar(capa){
var obj = document.getElementById(capa)
if(obj.style.display == "block") obj.style.display = "none"
else obj.style.display = "block"
}La invocación sería de la misma manera que el otro caso, mostrar(’nombrecapa’)
Oculta / Mostrar capas con javascript de forma fácil…
Explicación sencilla de cómo implementar una función para ocultar y mostrar de varias formas las diferentes capas de nuestra página web….
[...] utilizado el artículo que escribí hace algunos meses sobre mostrar y ocultar capas con javascript, a partir de él no ha sido difícil crear unas capas, darles estilo y obtener un treemap de lo [...]
[...] tooltip no deja de ser una capa que aparecerá o desaparecerá mostrando cierta información cuando nosotros coloquemos nuestro ratón encima de ciertos elementos [...]
[...] posibilidad podría ser ocultar el elemento, en vez de deshabilitarlo. Tal vez te interese… Web, [...]
Había visto varias formas de ocultar y mostrar capas, pero, definitivamente esta es la mas eficiente y menos compleja de todas.
Gracias.
Me alegro que te guste Felipe
Siempre he leído que en las páginas web era imposible hacer desaparecer algo como se puede hacer en la programación normal. Creo que su script está conectado con capas css que tiene esa propiedad. Su script me parece un gran avance, a ver si puedo utilizarlo. Muchas gracias.
Y es verdad, desaparecer desaparecer… no desaparece, básicamente se oculta
si tienes algún problema no dudes en comentarlo, suerte!
Los valores para los objetos “style.display” pueden ser: block (visible) inline (visible) ó none (oculto); el valor “inline” es útil cuando se quiere alinear textos u objetos en horizontal. Una particularidad de “style.display” es que, el objeto “desaparece” dejando libre el hueco. En “style.visibility” no ocurre eso, el hueco lo ocupa la “Capa” independientemente de su estado.
Una alternativa adaptable a las dos opciones con pequeños cambios.
function showhide(capa)
{
obj=document.getElementById(capa);
obj.style.display=obj.style.display==’none’?'block’:'none’;
}
La función se puede invocar con un evento, p.e.: onClick=”showhide(’nombre-de-la-capa’)”
Espero sea útil.
Buena manera usando el operador ternario para escribir menos código
OK, es una buena idea para ocultar las capas, pero tengo una duda:
cual es la diferencia entre display:none y display:hidden????
display sólo puede tener los valores, none y block y visibility los valores hidden y visible.
La diferencia entre ambos es que con visibility ocupa espacio, es decir, que aunque se oculte, deja un espacio en blanco y que con display no hay espacio en blanco, como si no hubiera nada.
No sé si me he explicado…