Create Pop-Up Notes with DHTML

The JavaScript Component

A key concept in DHTML is that every HTML element on the page has a corresponding JavaScript object. And just as each HTML element can have one or more CSS properties, each JavaScript object should likewise have a corresponding object property for each of these CSS properties.

That's the theory, at least. In practice not all browsers will provide a JavaScript object for every HTML element, and even if they do there isn't always a one-to-one correspondence between CSS properties and JavaScript properties. That's especially true with Version 4 browsers.

Fortunately all Version 4 and higher browsers associate a JavaScript object with each DIV element on your page, and they also provide an object property that lets you control whether the DIV element is visible. The hard part is figuring out how to access this JavaScript object and set its properties.

Let's see how to access the appropriate object in Internet Explorer.

First, the JavaScript object corresponding to our DIV element is called simply "n1." Why that name? Because our DIV tag includes an ID attribute that sets ID="n1." By doing this we assigned a unique name to the element, and that becomes the name of its corresponding JavaScript object.

To access the n1 object, insert this script inside the HEAD section of the Web page:

<script language="JavaScript">  
<!--  
 
function showObject() {  
  document.all['n1'].style.visibility = "visible";  
}  
 
//-->  
</script>

This creates a function called showObject() which sets the n1 object so that it's visible.

Our new function accesses the JavaScript object by using the document.all array. This array contains all the JavaScript objects for all the HTML elements on our page. We use the ID of our DIV tag to reference the correct entry in this array.

Once you understand the document.all array, the rest of the showObject() function should be easy to follow. The code closely matches the way we earlier set the STYLE attribute for our DIV tag. So this JavaScript code:

document.all['n1'].style.visibility = "visible";  
 
...is just the equivalent of this HTML code:  
 
<div id="n1" style="visibility:visible;">

To actually call the showObject() function, we'll need to change the NASA link to call the JavaScript function. Do this as shown below.

<p>The space program is run by <a  
href="javascript:showObject();">NASA</a>.

If you're still working along in your HTML editor, make this change to your page and save it. When you view the page in your browser, the pop-up note should initially be hidden, and appear when you click on the NASA link. If your pop-up note is visible when the page first loads, make sure that visibility is set to "hidden" in your style sheet.

Now let's expand our JavaScript by adding a hideObject() function to our script, as shown below. This function simply reverses the work done by showObject().

function hideObject() {  
  document.all['n1'].style.visibility = "hidden";  
}

Since this function makes our pop-up note disappearwe want to tie its execution to the user clicking on the "Close" link. Do this by changing the link as shown below.

<a href="javascript:hideObject();">Close</a>

Now the pop-up works the way we want, at least under Internet Explorer.