Styling Considerations

In this lesson we'll be upgrading the pop up code for Internet Explorer to include the needed code to make a <div> pop up in Netscape, Opera, and other browsers as well. Here's the working example. View it in different browsers and you'll see that the effect is the same.

There are a couple of things you'll need to do to get your pop up boxes to work in older Netscape 4.x. You'll need to add a "width:" and "border:" property to your <div>'s CSS styling.

Without these, Netscape has a difficult time rendering the boxes. This isn't a problem because most boxes will be styled with a "width:" property anyway. If you don't want borders, use "border: none", but always code a border property in the CSS styling for Netscape 4.x.

With these simple CSS styling bugaboos out of the way, we can move on to how the "visibility:" property is referenced in all browsers.

Referencing The Visibility Property

In the previous lesson, we accessed a <div>s "visibility:" property by using Internet Explorer's "document.all" object. This will not work in any Netscape even though the newer one's support the "document.all" object. It will only work in Opera if Opera is set to imitate Internet Explorer.

All modern browsers support "document.getElementById". This includes IE 5+, Netscape 6+, and Opera. Only older Netscapes (4.x or less) are still used and do not support "document.getElementById". Here's what a pop up coded with "document.getElementById" looks like:

document.getElementById("div_id").style.visibility = "visible";

This is very close to the syntax of "document.all". Be careful about the capitalization in "getElementById". Note that the <div>'s ID is placed in parentheses, not square brackets when using "getElementById". Also note that the ID is put in quotes.

Older Netscapes refer to a <div>'s "visibility" like this:

document.div_id.visibility = "visible";

Nothing spectacular here. It's very straightforward. I wish the modern browsers were so easy. The values "visible" and "hidden" are used in all browsers to make a box pop up or disappear respectively.

Detecting Support For document.getElementById

As discussed in Browser Detection, different browsers refer to objects differently. This is especially true of CSS objects like "visibility:". The good news is that all modern browsers support the "document.getElementById" object. Only older Netscapes (4.x or less) do not support "document.getElementById".

In short, we only have to check for two types of browsers when making universal pop up menus: The modern ones that support "document.getElementById" and the older Netscapes that don't.

if (document.getElementById)
{Code for modern browsers will go here}

else {Code for older Netscapes}

The Final Code

The final code in our example includes a "width:" and "border:" in our <div>'s CSS styling, and the following JavaScript:

<script language="JavaScript">

function show_it(){

if (document.getElementById)
{document.getElementById("box1").style.visibility = "visible";}

else {document.box1.visibility = "visible"}

}//ends open function

function hide_it(){
if (document.getElementById)
{document.getElementById("box1").style.visibility = "hidden";}

else{document.box1.visibility = "hidden";}

}//ends close function
</script>

All we've really done is to detect whether or not someone is using IE by checking "navigator.appName" with an IF statement. If the viewer is using IE, the "document.all" object reference is used. Otherwise, the Netscape version of the same object reference is used. Now the code will cause the same effect regardless of browser used.

Summary & Exercises

Get in the habit of giving <div>s used as pop up boxes a "width:" and "border:" property, even if you use "border: none".

Use "document.getElementById" to change the "visibility" property in modern browsers that support it. Practice by making a page with at least three links and pop up boxes. Hint: You might want to jump ahead and try using parameters to pare down the number of functions you have to code. If you can't get this working, just code separate functions to open each box and close each box. We'll figure out parameters in the next lesson.

To Next Beginning JavaScript Lesson

Back To Beginning JavaScript Index