Developing a Web application involves many design considerations and decisions. The most important is often response time—a performance consideration. One approach to improving site response time is to preload content and then display it only when the user needs to see it. You can do this by taking advantage of Dynamic HTML (DHTML) and JavaScript.
Each element within an HTML page is accessible via JavaScript. The DHTML style property contains the visibility property, which lets you control whether the element's contents are displayed on the page. To do this, you set the property to either visible or hidden. The following syntax may be used to access the property via JavaScript:
document.element_name.style.visibility = "visible";
or
document.element_name.style.visibility = "hidden";
The actual element is easily located by using its ID attribute and the getElementById JavaScript method:
document.getElementById("element name").style.visibility = "hidden";
Remember, HTML elements are assigned ID attributes to distinguish them within the page. This allows DHTML and JavaScript to locate and work with individual elements. The following HTML sample assigns individual names to HTML header elements and uses JavaScript to show and hide the second header:
<html>
<head>
<title>div test</title>
</head>
<body>
<h1
id="header1"
onMouseOver='document.getElementById("header2").style.visibility="hidden";'
onMouseOut='document.getElementById("header2").style.visibility = "visible";'>
Now you see it!
</h1>
<h2 id="header2">
Now you don't!
</h2>
</body>
</html>
The code uses the onMouseOver and onMouseOut events of the first header element to show and hide the second header element. Notice that the name assigned to the second header via the ID attribute is used to control its visibility in the JavaScript.
This approach to displaying and hiding content is beneficial when only portions of a document are displayed at a time. It may be applicable for menus, expanding/collapsing page regions, and so forth. You can use this technique with any HTML element, but the DIV element stands out as a prime candidate when working with chunks of a page.
What is DIV?
The DIV element is used to give structure and context to block-level content within an HTML document. Everything between the start and ending DIV tags constitute the block, and the characteristics of the contained elements are controlled either by the DIV tag attributes or by applying style sheet formatting to the block. The DIV tag is supported by both Internet Explorer and Netscape browsers.
DIV vs. SPAN
Many developers confuse the DIV element with the SPAN element. Although they have the same characteristics, SPAN is used to define inline content as opposed to block-level content. You would use a DIV tag for a paragraph, but a SPAN tag would be useful for applying special characteristics to one or more words within the paragraph.
The DIV tag allows you to divide a Web page to handle formatting and presentation. You can combine it with the visibility technique to divide page content and show it as you choose. The following code sample uses the DIV tag to divide the page into sections; hyperlinks show and hide the sections:
<html><head>
<title>div test</title>
<script language="JavaScript">
function setAllVisible() {
document.getElementById("section1").style.visibility="hidden";
document.getElementById("section2").style.visibility="hidden";
document.getElementById("section3").style.visibility="hidden";
document.getElementById("section4").style.visibility="hidden";
}
</script></head>
<body onLoad='setAllVisible();'>
<h1>Builder.com Sample</h1>
<ul>
<li><a href="#"
onClick='
document.getElementById("section1").style.visibility="visible";
document.getElementById("section2").style.visibility="hidden";
document.getElementById("section3").style.visibility="hidden";
document.getElementById("section4").style.visibility="hidden";'>Section 1</a></li>
<li><a href="#"
onClick='
document.getElementById("section1").style.visibility="hidden";
document.getElementById("section2").style.visibility="visible";
document.getElementById("section3").style.visibility="hidden";
document.getElementById("section4").style.visibility="hidden";'>Section 2</a></li>
<li><a href="#"
onClick='
document.getElementById("section1").style.visibility="hidden";
document.getElementById("section2").style.visibility="hidden";
document.getElementById("section3").style.visibility="visible";
document.getElementById("section4").style.visibility="hidden";'>Section 3</a></li>
<li><a href="#"
onClick='
document.getElementById("section1").style.visibility="hidden";
document.getElementById("section2").style.visibility="hidden";
document.getElementById("section3").style.visibility="hidden";
document.getElementById("section4").style.visibility="visible";'>Section 4</a></li>
</ul><br>
<div id="section1">Section 1 text.</div>
<div id="section2">Section 2 text.</div>
<div id="section3">Section 3 text.</div>
<div id="section4">Section 4 text.</body>
</html>
The code includes a JavaScript function to hide all DIV elements. The function is called when the document is loaded. Clicking each hyperlink shows the related section and hides the others. The drawback is that these methods are supported only in Internet Explorer 5 and above and Netscape Navigator 6 and above. However, I tested it with Mozilla 1.01 with no problems.
Display information only when necessary
Combining the power of DHTML and JavaScript enables you to preload page content and display portions when appropriate. This increases response time, thus improving performance for the user.
Leave a comment