scottandrew.com

Noteworthy

You're currently viewing a very old version of this website. Follow me to the latest version.

-->

DHTML First Aid For The 6.0 Browsers

Revised January 27, 2002 | Printer-friendly version

A warning to all DHTML fans: the writing is on the wall.

Perhaps you've already seen your painstakingly crafted cross-browser DHTML collapse like a house of cards in the new Netscape 6, Mozilla or Opera browsers. Well stop crying; this is to be expected as the world finally moves towards supporting the World Wide Web Consortium's standards for HTML, Cascading Style Sheets (CSS) and Document Object Model (DOM).

But this is all a Good Thing. As the W3C standards are adopted, the need for complicated workarounds for each browser may very well vanish. Visualize a world where your handcrafted hierarchical pop-up menus and tooltips work beautifully in all browsers, yet utilize the same code. DIVs float freely, people live in harmony with the earth, and everyone gets free, unlimited ice cream.

But for that dream to become reality, you'll have to play your part in the revolution and write your pages in compliance with the standard. What good is having a standards-compliant browser if your pages themselves don't conform to those standards?

It'll be a good while before users begin upgrading en masse to the next generation of browsers. But it will happen. So the best you can do for now is arm yourself with knowledge of how to beat your existing pages into shape for the new 6.0 browsers.

Learning to let go

The first things to fall under the axe of standards implementation are the proprietary code features. Wave goodbye to Netscape's LAYER tag and the document.layers collection. Bid farewell to IE's document.all collection and proprietary features. Learn to love their standards-compliant replacements. Welcome to the fold, here's your nametag.

Let's look at some of the changes you'll have to make in order to script properly for the 6.0 standard.

document.layers[] (NS) and document.all (IE)

If you're an experienced DHTML coder, you probably have come to both love and hate Netscape's document.layers and Internet Explorer's document.all collections. While both models have fairly powerful features for accessing and manipulating document elements, they're incompatible with each other.

Well, wave bye-bye to both of them. These two collections are replaced by the DOM scripting method document.getElementById(). Rather than thumbing through a collection of elements, document.getElementById() allows you to go directly to the desired element. Just pass it the ID of the element you want and it returns a reference to that element.

For example, in the 4.0 browsers, you might have accessed a DIV using the following methods:

In Netscape:
myDiv = document.layers["divID"]

In IE:
myDiv = document.all["divID"]

If we follow the W3C standard, the proper way to do this is:

myDiv = document.getElementById("divID")

This greatly simplifies things on the Netscape side, as you no longer have to use conventions like document.layers["div1"].document.["div2"] to access nested layers. It also allows you to access every element on the page, not just DIV tags.

It's Elemental

The various pieces n' parts which make up the core of DHTML's functionality are being revised, replaced and in some cases, scrapped. Let's look at the big changes.

LAYER and ILAYER

These two tags are not supported by Netscape 6, and have never been supported by IE. Ditch 'em. Replace LAYER with the HTML-compliant DIV.

More bad news: Netscape 4's SRC attribute of DIV is also going bye-bye. If you're loading external content you'll probably want to substitute an IFRAME in place of the DIV.

Visibility and Positioning

The ability to hide and show elements has been greatly simplfied, as the visibility property is now attached to a style property for each element. You accesss it this way:

element.style.visibility = value;

Here's the old way of hiding a DIV:

In Netscape:
document.layers["divID"].visibility = "hide";

In IE:
document.all["divID"].style.visibility = "hidden";

The standards-based way introduces a simpler way, using the document.getElementById() method to access the DIV tag:

document.getElementById("divID").style.visibility = "hidden";

The old Netscape values "hide" and "show" are illegal in NS6. Use "hidden" and "visible" instead.

element.left (NS) and element.style.pixelLeft (IE)

These are no longer valid ways to retrieve the horizontal position of an element. The standards compliant way is:

parseInt(element.style.left)

Replace element with the document.getElementById() method to retrieve the element:

parseInt(document.getElementById("divID").style.left)

Why use parseInt()? The value retrived by element.style.left will actually return a string, like "12px" instead of a numeric value. parseInt() converts the string to an integer.

element.top (NS) and element.style.pixelTop (IE)

The same rules for retrieving the horizontal position of an element also apply to the vertical position. Just replace the left property with top. Again, use parseInt() to convert the value to a number:

parseInt(document.getElementById("divID").style.top)

Animating Elements

In coding for the 4.0 browsers, you might have used the following methods to move an existing element to a new position in the document:

In Netscape:
document.layers["divID"].moveTo(x, y);

Or in IE:
document.all.["divID"].style.pixelLeft = x;
document.all.["divID"].style.pixelTop = y;

These methods have been replaced with statements that assign the new x and y values directly to the left and top properties of the element's style object:

element.style.left = value + "px";
element.style.top = value + "px";

So to move a DIV element to 100 pixels from the left edge of the document and 200 pixels from the top, you might do this:

myObj = document.getElementById("divID");
myObj.style.left = 100 + "px";
myObj.style.top = 200 + "px";

Notice how we're adding "px" to the end of the value so that it conforms with the standard. You should always use pixels for positioning; points and em's are print measurements and can be interprested differently on different screen resolutions and platforms. But a pixel is always a pixel.

To shift an element to a new position 10 pixels from its current one, your code might look like this:

myObj = document.getElementById("divID");
x = parseInt(myObj.style.left);
y = parseInt(myObj.style.top);
x = x + 10;
y = y + 10;
myObj.style.left = x + "px";
myObj.style.top = y + "px";

Remember, you have to use parseInt() to convert the existing x and y values into numbers before you can increment them.

By optimizing the code and enclosing the JavaScript within a function you can create your own custom moveBy() method that takes the ID of the element you want shifed and the horizontal and vertical increments as arguments:

function myMoveBy (myObj,x,y){
thisObj = document.getElementById(myObj);
thisObj.style.left = parseInt(thisObj.style.left) + x + "px";
thisObj.style.top = parseInt(thisObj.style.top) + y + "px";
}

Style Manipulation

In Navigator 4, we had the collections document.tags, document.ids, and document.classes to access CSS properties. These are all being scrapped in favor of the much more understandable CSS-2 interface.

Netscape 6 adopts a style model similar to that used in IE, in which a style object attached to every element can be used to access the CSS properties for that element. You already seen this in action in the previous examples dealing with visibility and positioning. To access an element's style properties, you would you the following syntax:

x = document.getElementById(id).style.styleProperty;

So, to retrive the background color of a specific DIV element:

x = document.getElementById("divID").style.backgroundColor;

You can also turn that around to change or assign new styles to the element:

document.getElementById("divID").style.fontSize = "10pt";

This assumes that your style properties are inline, within the STYLE attribute of the HTML tag. If you're using STYLE tags or calling in external CSS with a LINK tag, you'll have to access the sheets themselves by using the document.styleSheets collection. This collection holds references to each stylesheet object.

Each element in document.styleSheets has a set of properties:

- href, a string containing the url of the stylesheet if imported with LINK
- cssRules, a collection of the style rules within that sheet.

Each element of cssRules represents a style rule, like "P {color: #cc0033}." However, you cannot access the entire rule as a string. Instead, each cssRules element has its own properties:

- selectorText is a string containing the value of the selector. In our above example, selectorText would contain "P". Note: support for selectorText was broken in earlier versions of NS6 and Mozilla. Be sure to download the latest release.
- cssText is the full text of the style rules as they are written in the stylesheet.
- style is the style object for that rule. Like the style object attached to individual elements, the style object can be accessed and manipulated by using the syntax style.property = value.

Let's look at an example stylesheet:

<style type="text/css">
A { color:red }
P { color:blue }
</style>

To change the color of our anchor tags from red to yellow, we can do this:

document.styleSheets[0].cssRules[0].style.color = "yellow"

To add a background color of our paragraph elements, we can do this:

document.styleSheets[0].cssRules[1].style.backgroundColor = "green"

Conclusion

This should be just enough info to get your DHTML pages into shape for Netscape 6 and other standards-compliant browsers. But we've only begun to scratch the surface of the W3C DOM and its scripting model. There are many powerful DOM methods that have heretofore gone unnoticed and unused by the DHTML community at large, primarily because we've been too busy creating acrobatic workarounds for the Big Two browsers.

Happy scripting!

Learn More

- Comment on this tutorial.
- Find out more about Netscape 6 at developer.netscape.com
- Learn about DOM, CSS and standards support at www.w3c.org
- Join the cause at the Web Standards Project www.webstandards.org