DHTMLCentral.com - Dynamic HTML Tutorial - Scripting for 5th Generation Browsers

The release of NS6 has been a hotly debated topic on the net. At the center of this debate have been claims of lack of functionality and usability. To an extent these claims are accurate as the browser does have some usability issues, e.g. non-functional rollovers, as one example. However, approaching Netscape 6 from this negative perspective and focusing on the things that do not work is a limiting viewpoint. It is limiting because ‘we’ as web developers tend to loose sight of the bigger picture and consequently do not focus on what the browser can do in terms of coding practices. This bigger picture entails a web that allows developers to code by a singular standard. Herein lies the beauty of Netscape 6, a standards compliant browser, a factor that often seems to get lost in the usability debate. Consequently, for the first time on the WWW, developers can mostly focus on coding by a singular standard rather than having to work their way through a number of conditional JavaScript statements to cater to different browser requirements. I say mostly, because there are still some specific situations where DOM switches catering for Internet Explorer 5+ and Netscape 6 need to be provided, e.g., detecting a browsers height and width. In the main though a web developer’s focal point can be centered upon coding by a singular standard, which represents a considerable improvement in coding techniques.

While I understand that catering to Netscape 4 for commercial reasons is still essential for many web developers, I think it is equally important to understand that the future (emphasis on future) of the web does not lay in providing backward compatible solutions catering to proprietary technology. Rather the future of web development seems inherently tied to coding by a singular standard as evidenced by browsers beginning to adopt more W3C recommendations than at any other time in the history of the WWW. Consequently, it is imperative to begin to understand how to code for the leading browsers of today.

Which brings us to the purpose of this article. In this article I would like to expose the reader to some coding methods that cater for Internet Explorer 5+ and Netscape 6+. Hopefully, the coding examples provided here will serve the function of wetting the appetites of web developers and make them more eager to embrace the dawn of a new era.

Code Reduction

One of the biggest benefits of coding for IE5+ and Netscape 6 is the code reduction that is obtained by not having to include conditional branches (e.g. If else statements). For example, let us suppose we wanted to dynamically change the background color of a layer in Netscape 4, Internet Explorer 4 and Netscape 6. We would have to create conditional statements to cater for the different Document Object Models as demonstrated in the below example:

What Is A Standard Anyway?

I have already mentioned coding by W3C standards, but what makes more sense to me is that the standard that matters most is what is currently supported by both browsers without having to rely on proprietary methods and consequently conditional branches. That is not to say I am not an advocate of W3C standards, because the reality is I believe in this fundamental concept and support it as much as possible.

However, I am constantly drawn back to the practical as opposed to strictly coding by W3C methods, particularly when both browsers have the same implementation for a method. For example innerHTML which is not a W3C recommendation is supported by both Netscape 6 and Internet Explorer, so to me it makes sense to take advantage of this powerful technique. For example:

Retrieving Elements

The two most common methods of retrieving elements based on the W3C DOM are the document.getElementById() and document.getElementsByTagName() methods. Both of these methods are important to learn as they form the basis of much of what follows. The document.getElementById() method as the name implies retrieves an elements id by passing the id as an argument. For example;

> tag as indicated below:

<>
<>
<>
<>Manipulating a Div Element<>
<>
<>
<>
<> Lets move the div <>
<>
This is a CSS Layer with an id of eddieLayer
<>
<>
<>

View example

We can also refine the moveDiv() function to a single line of script as such:

function moveDiv() { 
	 document.getElementById('eddieLayer').style.left=400;
}

However, it is often more useful to define a variable for later use, because that variable can be used repeatedly. For example,

theDiv.left = 400;
theDiv.top = 500;
theDiv.visibility = hidden;
theDiv.width = 350;

By using the document.getElementById() method and adding the style attributes as in document.getElementById('eddieLayer').style every CSS attribute of that layer becomes exposed to dynamic manipulation. In short, it provides web developers with a range of options when working with Dynamic HTML web pages which goes beyond just manipulating a CSS layer.

For instance, let us suppose we wanted to directly manipulate an image element that is not in an CSS layer, we could use exactly the same methods as above, but with the provision that we assign a unique id to the image and add the style="position:absolute; attribute as the next example shows.

<>
<>
<>
<>Manipulating a Image<>
<>
<>
<>
<><>Lets move the image<><>
<><><>
<>
<>

View example

I can almost see the light switching on in peoples' heads as they begin to realize the inherent potential of this method. The restriction of the document.getElementById() method is that it used to access individual elements that have a unique id attribute.

A way to overcome this limitation is the document.getElementsByTagName() collection. This method takes the tag type as its argument and returns all of the tags of that particular type in an html document. In essence it is a collection method as in returning an array. For example,

theImg= document.getElementsByTagName("img");

returns all the images in a document regardless of whether they have a name or id attribute. The following example returns an alert that displays the number of images in the document as a way of demonstrating how elements are collected by using the document.getElementsByTagName() method.

<>
<>
<>
<>Retrieving How Many Images In a Document<>
<>
<>
<>
<><>How many images in this document?<><>
<><> <>
<><> <>
<><> <
<>
<>

View example

We can also traverse the DOM tree and target specific page elements. For example, let's assume that we wanted to obtain the height of the first CSS layer in a document, then something along these lines could be employed:

getHeight = document.getElementsByTagName('div')[0].offsetHeight;

The [0] in the above line of script is an array index. In JavaScript the 0 value represents the first element in an array. Consequently, the above line of script would target the first CSS layer in the document and return its height value. The distinction to make here is that the document.getElementById() method retrieves elements which have a unique id, where as the document.getElementsByTagName() method could be used to either target individual elements that do not have a unique id assigned to them or a retrieve a collection of the same tag.

Please note that the offsetHeight and offsetWidth properties are supported by IE4+ and NS6 even though they are not a W3C recommendation.

Rollover Fun with setAttribute()

In IE5+ and NS6 there is new way to swap images for rollover effects that is W3C DOM based. The golden rule to follow is out with the name attribute and in with the id attribute. For those of you that are not aware the current W3C recommendation is to use the id attribute, even though browsers still currently will perform rollovers by using the name attribute as we have become accustomed to. But please note, that in future it is unlikely that the name attribute will be supported, hence it is important to understand the concepts presented here.

In the following example we will return to the document.getElementById() method and also introduce the concept of setting attributes via the setAttribute() method. Let's begin by take a look at the script:

<>

The first part of the script is a routine preload method so that the images that are going to be used for rollovers are loaded into the cache. Luckily, both Internet Explorer and Nescape6 pull the images from the cache by default, so this saves us hooking up the preload variables into the script. Apart from that there isn't a lot here that we aren't used to.

It is when we begin to look at the swapImage() function that differences from past methods occur. First we create, a variable theImg which then gets assigned to W3C document.getElementById() method. In this particular instance, we want to collect the id value of test2img by referencing it with the following syntax document.getElementById("test2img").

theImg=document.getElementById("test2img");

Now that the image is collected and referenced we can start having some fun with it by using the W3C setAttribute() command. setAttribute() allows us to define any attribute of an element, for example height or width. In this example we are going to set the src attribute.

theImg.setAttribute("src","button2.jpg");

setAttribute() allows us to define the src of the image and consequently set the new src value of the image. In this particular example, button1.jpg will be replaced with button2.jpg with a mouseOver event. To swap the image back to its original state we use the restoreImage() function. Our event handlers would then look like this:

<>
<>
<>

Note the use of id="test2img" in the image tag. This is how the document.getElementById() method identifies that this is where to apply the script to. But wait it gets better! The same effect can be accomplished with a single line of code by using two arguments.

function swapImage(id, imgsrc) {
 document.getElementById(id).setAttribute('src', imgsrc);
}

Our arguments can be used to identify what the id of the image is and what its new src value will be. To understand this a bit better take a close look at what is occurring at the event handlers in the image tag.

<>
<>
<>

View example

Let's use the onMouseOver event handler to better comprehend what is occurring.

onMouseOver="swapImage('img1', 'on.jpg')"

We identify the id attribute with img1 by using the argument id in our swapImage() function. Next, the new src value of on.jpg is identified by utilizing the imgsrc argument The onMouseOut event handler uses the same logic but just swaps the image to off.jpg. It doesn't get much sweeter than this folks! Or does it ?

Four State DOM Rollovers with a Single Image

Remember, that earlier I stated that the setAttribute() method allows for the setting of any attribute such as width and height? Well lets use these attributes to create a four state rollover with just a few lines of code and a single image. First the image tag:

<>

As noted previously, what is important in the above tag is to set a unique id for the image so that we can later retrieve the image element via the document.getElementById() method. The rollover script we employ to put this into action is as follows:

<>

In this example, we utilize three arguments, id, new_width and new_height. The id argument is used to retrieve the unique id of the image, in this instance image1, and the new_width and new_height arguments will be used from the event handler to set new image dimensions.

<>

View example

Let's consider what is occurring here for a moment. We have made four image dimensions from a single image. Effectively, we have produced a four state disjointed rollover. The four states are:

1. The initial dimensions of 25*25.
2. The onMouseOver dimensions of 26*26.
3. The onMouseOut dimensions of 24*24.
4. The onClick dimensions of 28*28.

Netscape Rollover Fix

Before you all start screaming at me with complaints that rollovers don't work properly in Netscape 6 because of a refresh bug, let me make the point that the thing with web development is to find solutions to these types of problems wherever possible. Sometimes no solution exists and as web developers we have to wear that, but on many occasions solutions do exist, provided we start to think out of the box. Luckily, such a solution exists for the Netscape 6 refresh bug and rollovers.

To fix the rollover problem in Netscape 6 two things need to occur.

Use a timer to force the rollovers, e.g.

function forceIt(){
setTimeout("swapImage()",1);
}

and to fix the refresh bug use onUnload="history.go(0)" in the body tag.

Note that this bug only applies to Netscape 6. In Netscape 6.01 and the newer builds of Mozilla this is no longer an issue.

That's it for this time. In part two of this tutorial we will look at creating elements on the fly, object constructors and a lot more!

Scripting for 5th Generation Browsers - Part 1
Written 07/14/2001 by Eddie Traversa. Last updated 07/14/2001. Print-friendly version. Back to regular version.

Introduction

Code Reduction

What Is A Standard Anyway?

Retrieving Elements

Rollover Fun with setAttribute()

Four State DOM Rollovers with a Single Image

Netscape Rollover Fix

Scripting for 5th Generation Browsers - Part 1 Written 07/14/2001 by Eddie Traversa. Last updated 07/14/2001. Print-friendly version. Back to regular version.

Introduction

Code Reduction

What Is A Standard Anyway?

Retrieving Elements

Rollover Fun with setAttribute()

Four State DOM Rollovers with a Single Image

Netscape Rollover Fix

Scripting for 5th Generation Browsers - Part 1
Written 07/14/2001 by Eddie Traversa. Last updated 07/14/2001. Print-friendly version. Back to regular version.