Escondiendo y Mostrando

Alguna vez te haz hecho la pregunta: "¿Porque es que Netscape enseña la visibilidad como 'show'?" (aparecer)

Bueno la respuesta es que las propiedades de CSS en Netscape son basadas alrededor de LAYER tag la cual Netscape es el dueño. Como sea el caso Netscape ahora esta poniendo abajo su LAYER tag en preferencia a la recomendada CSS-P de W3C´s. Entonces los valores de las propiedades de visibilidad aparecer "show" y el valor correspondiente desaparecer "hide" son sobras de las Layers de Netscape. Yo pienso que este es el único efecto deslumbrante de como Netscape representa las CSS-P.

Hasta allí hay una norma unificada. Usualmente vas a tener que escribir un código separado para esconder algún elemento particular.

Para Netscape

Para hacer aparecer un elemento en Netscape tienes que usar:

document.divName.visibility = "show"

y para esconderlo es:

document.divName.visibility = "hide"

Para Internet Explorer

Para hacer aparecer un elemento en Internet Explorer tienes que usar:

divName.style.visibility = "visible"

y para esconderlo es:

divName.style.visibility = "hidden"

Funciones genéricas de Aparecer "Show" y Desaparecer "Hide".

En lugar de siempre re-escribir el mismo código repetidas veces para los elementos aparecer y desaparecer, puedes usar las funciones siguientes:

function showObject(obj) {
	if (ns4) obj.visibility = "show"
	else if (ie4) obj.visibility = "visible"
}

function hideObject(obj) {
	if (ns4) obj.visibility = "hide"
	else if (ie4) obj.visibility = "hidden"
}

Estas funciones deberán de ser usadas con un indicador variable - vea el código en el ejemplo siguiente.

No obstante si deseas cambiar la visibilidad de un elemento, solamente tienes que ir:

showObject(objectName)

o

hideObject(objectName)

Donde objectName Es tu indicador variable para un particular DIV tag.

Ejemplo: showhide1.html [ fuente ] - para ver este ejemplo utilizando estas funciones.

Functiones Show/Hide sin indicador variable

He visto que no es siempre necesario y a veces incómodo si hay muchas capas que solamente necesitan estar escondidas "hidden" y enseñadas "shown". He mostrado de primero la técnica del indicador variable porque esa es una idea general que iré construyendo para hacer más potentes JavaScript en las futuras lecciones. Pero en ocasiones cuando no necesites tener mucho mas funcionalidad, las siguientes funciones simplificadas también pueden ser utilizadas:

// Show/Hide functions for non-pointer layer/objects
function show(id) {
	if (ns4) document.layers[id].visibility = "show"
	else if (ie4) document.all[id].style.visibility = "visible"
}

function hide(id) {
	if (ns4) document.layers[id].visibility = "hide"
	else if (ie4) document.all[id].style.visibility = "hidden"
}

Para usar estas es muy similar excepto que desde ahora el nombre exacto de la capa tiene que ser utilizado y también tiene que aparecer entre comillas:

show("divID")

or

hide("divID")

Donde divID es el ID del DIV tag que tienes que show/hide (aparecer/desaparecer).

Ejemplo: showhide2.html [ fuente ] - para ver un ejemplo utilizando estas funciones

Casa Próxima Lección: Moviendo
copyright 1998 Dan Steinman