Cross-Browse Dynamic HTML Showing and Hiding Elements

Showing and Hiding Elements

Netscape and IE differs the way they show & hide an element.

Netscape

document.divName.visibility = "show"

document.divName.visibility = "hide"

IE

document.divName.visibility = "visible"

document.divName.visibility = "hidden"

The Cross Browser Method

Instead of always rewriting the same code over and over again to show and hide the elements, you can use write the following functions and use them.

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"

}

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"

}

Usage

showObject(objectName)             or  hideObject(objectName)