A complete example of this is available for downloading by clicking here : Download.

Browser compatible Javascript and DHTML ....

DHTML requires the manipulation of layers using Javascript which also means working with cross browser support.

We need to be able to create Javascript code which has to take care of the differences in the implementation of layers for different browsers. For instance, Internet Explorer understands document.all, while Mozilla understands document.getElementById.

Luckily we do not have to know exactly which browser and browser version is been used - we only need to know the capabilities of the browser which is much easier.

We can do this using the following tests in Javascript where we use a variable called 'type' to hold a string representing the browser :

For Opera :

if (navigator.userAgent.indexOf("Opera")!=-1
    && document.getElementById) type="OP";

Internet Explorer e.g. IE4 upwards :

if (document.all) type="IE";

For Netscape version 4 :

if (document.layers) type="NN";

Mozila e.g. Netscape 6 upwards

if (!document.all && document.getElementById) type="MO";

What is a layer

A layer is defined by <div...> content here </div>.

An example of a layer is as follows:

<div id="Layer7" style="position:absolute; left:400px; top:248px; width:200px; height:115px; z-index:7; visibility:hidden"><img src="images/1.jpg"></div>

This layer has an identity or name of Layer7, (note that Javascript is case sensitive), with a visibility of hidden and with a graphic image.

Showing and hiding layers

The Javascript needed to turn on and off layers for each implementation is

for Internet Explorer :

document.all.LayerName.style.visibility="visible";
document.all.LayerName.style.visibility="hidden";

for Netscape Navigator :

document.LayerName.visibility="visible";
document.LayerName.visibility="hidden";

for Mozila :

document.getElementById("LayerName").style.visibility="visible";
document.getElementById("LayerName").style.visibility="hidden";

This seems to work with all modern browsers including Opera and even Netscape version 4.

We can write a Javascript function which can deal with these differences as follows :

function ShowLayer(id, action){
  if (type=="IE") eval("document.all." + id + ".style.visibility='" + action + "'");
  if (type=="NN") eval("document." + id + ".visibility='" + action + "'");
  if (type=="MO" || type=="OP")
    eval("document.getElementById('" + id + "').style.visibility='" + action + "'");
}

The function takes two parameters, one is id which is the name of the layer and the other parameter is action, which is either hidden or visible.

Examples of its use would be :

<a href="javascript:ShowLayer('Layer7','hidden')">Hide picture</a>
<a href="javascript:ShowLayer('Layer7','visible')">Show picture</a>

where the layer is called Layer7.

A complete example of this is available for downloading by clicking here.

Changing layer background colors

The Javascript needed to change the background colour for each implementation is similar to the visibility example.

This appears to work with all modern browsers except Netscape version 4.

for Internet Explorer :

document.all.LayerName.style.backgroundColor="#333333"

for Netscape Navigator :

document.layer["LayerName"].bgColor="#333333"

for Mozila :

document.getElementById("LayerName").style.backgroundColor="#333333"

As with the visibility example we can write a Javascript function which can deal with these differences as follows

function ChangeLayerBgColor(id, color){
  if (type=="IE") document.all[id].style.backgroundColor=color;
  if (type=="NN") document.layer['id'].bgColor=color;
  if (type=="MO" || type=="OP")
    document.getElementById(id).style.backgroundColor=color;
}

The function takes two parameters one is id, which is the name of the layer and the other parameter is color, which is the hex value of the color.

An example of its use would be:

<a href="javascript:ChangeLayerBgColor('Layer7','#ff0000')">Change layer 7 to red</a>

where the layer is called Layer7.

A complete example of this is available for downloading by clicking here.

Changing the content of layers

It is possible to dynamically change the content of a layer using Javascript. I have managed to get this to work in Internet Explorer, Netscape 4, 6 and 7 and in Opera.

The Javascript needed to change the content of the layer for each implementation is as follows, where str is the string to be written to the layer.

for Internet Explorer :

document.all[LayerName].innerHTML = str;

for Netscape Navigator :

document.layers[LayerName].document.open();
document.layers[LayerName].document.write(str);
document.layers[layerName].document.close();

for Mozila :

document.getElementById(LayerName).innerHTML = str;

Our Javascript function which can deal with these differences as follows

function ChangeContent(id, str) {
  if (type=="IE") {
    document.all[id].innerHTML = str;
  }
  if (type=="NN") {
    document.layers[id].document.open();
    document.layers[id].document.write(str);
    document.layers[id].document.close();
  }
  if (type=="MO" || type=="OP") {
    document.getElementById(id).innerHTML = str;
  }
}

This function takes two parameters, the first is id which is the name of the layer, and the second is str which is the string to be displayed.

An example of its use would be :

<a href="javascript:ChangeContent('Layer7','This is new content')">Change content of layer 6</a>

A complete example of this is available for downloading by clicking here.