Ocultar y mostrar capas con javascript
Nov 06 De todo un poco 
6 Comentarios / 2,071 lecturas 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’)
Noviembre 6th, 2007 a las 10:24 am
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….
Febrero 5th, 2008 a las 8:28 am
[...] 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 [...]
Marzo 24th, 2008 a las 10:46 am
[...] 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 [...]
Abril 12th, 2008 a las 8:56 am
[...] posibilidad podrÃa ser ocultar el elemento, en vez de deshabilitarlo. Tal vez te interese… Web, [...]
Julio 15th, 2008 a las 5:51 pm
HabÃa visto varias formas de ocultar y mostrar capas, pero, definitivamente esta es la mas eficiente y menos compleja de todas.
Gracias.
Julio 16th, 2008 a las 8:56 am
Me alegro que te guste Felipe