CodingForums
Having trouble with scripting? Visit our help forum to get the answers you need.
Jump to...
-Free JavaScripts
-JS tutorials
-JS Reference
-DHTML/CSS
-Free applets
-Web Tutorials
-Link to Us!
- JavaScript Menus
- PHP Resources
- Hotels & Vacations
- Java Online Casinos
- Web hosting Search
Hiding/ showing elements
The ability to hide and show objects cross browser has been significantly changed with the ability to use the W3C DOM in both major browsers. In order to hide and show objects in the 4.x browsers, one had to go through hoops of incompatibility -- you ended up having to resort to hiding and showing only DIVs and LAYERs and having to use the visibility property. The dark times are finally over. You can now change the display of any element you can access through the DOM (which is every element). Watch this:
Did ya see that? We just turned the display of the above text to "none" to hide it, using the DOM. The code used to create the heading is:
<div>Hiding / Showing existing elements:</div>
Notice how it doesn't even have an ID? Its not necessary to give it an ID, since you can access any element through the document tree (remember child and parent from the previous lesson?). To hide it, we first must locate it. You can do this using the ID or the document tree - both will work the same way. Once the object whose display we wish to manipulate has been located, you need to change its display property. You can access this property using object.style.display, like in the example below:
document.childNodes[1].childNodes[1].
childNodes[0].style.display = "none";
In this example, we used the document tree to locate the object we wished to change, and changed its display property value to "none". You will typically use "none" to hide an object, and "" to show an object. Those of you familiar with the Internet Explorer DOM will find this very familiar - IE uses the exact same syntax, except it has different ways to locate objects in the page.
To make it easier to toggle an element's visibility, I usually use the following function:
function HideShow(obj)
{
if (parseInt(navigator.appVersion) >= 5 || navigator.appVersion.indexOf["MSIE 5"] != -1)
{
if (obj.style.display=="none")
obj.style.display="";
else
obj.style.display="none";
}
}
You can call this function with just about any object that is, or can be, visible.
-Tutorial introduction
-What is the DOM?
-The DOM and browser compatibility
-Add elements to the DOM
-Hiding/ showing elements
-Animation
