How to fix this javascript to work in Netscape 7.1 and 4.x (also for IE4 and IE6)

[SabMan]

I understand that document.layers is no longer supported in Netscape
7.1 but I am not sure on how to fix the code so that it will work with
Netscape 7.1.

I understand that document.all is no longer supported in IE6 but I am
not sure on how to fix the code so that it will work with IE6.



<!--
var no = 10; // snow number
var speed = 15; // smaller number moves the snow faster
var snowflake = "snowflake.gif";
var ns4up = is_nav4up;
var ie4up = is_ie4up;
var dx, xp, yp; // coordinate and position variables
var am, stx, sty; // amplitude and step variables
var i, doc_width = 723, doc_height = 480;
if (ns4up)
{
alert("there");
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
else if (ie4up)
{
alert("here");
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx = new Array();
xp = new Array();
yp = new Array();
am = new Array();
stx = new Array();
sty = new Array();
for (i = 0; i < no; ++ i)
{
dx = 0; // set coordinate variables
xp = Math.random()*(doc_width-50); // set position variables
yp = Math.random()*doc_height;
am = Math.random()*40; // set amplitude variables
stx = 0.02 + Math.random()/10; // set step variables
sty = 0.7 + Math.random(); // set step variables
if (ns4up)
{ // set layers
if (i == 0)
{
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
document.write("top=\"15\" visibility=\"show\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></layer>");
} else
{
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
document.write("top=\"15\" visibility=\"show\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></layer>");
}
} else if (ie4up)
{
if (i == 0)
{
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></div>");
} else
{
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></div>");
}
}
}

function snowNS()
{ // Netscape main animation function
for (i = 0; i < no; ++ i)
{ // iterate for every dot
yp += sty;
if (yp > doc_height-50)
{
xp = Math.random()*(doc_width-am-30);
yp = 0;
stx = 0.02 + Math.random()/10;
sty = 0.7 + Math.random();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
dx += stx;
document.layers["dot"+i].top = yp;
document.layers["dot"+i].left = xp + am*Math.sin(dx);
}
setTimeout("snowNS()", speed);
}

function snowIE()
{ // IE main animation function
for (i = 0; i < no; ++ i)
{ // iterate for every dot
yp += sty;
if (yp > doc_height-50)
{
xp = Math.random()*(doc_width-am-30);
yp = 0;
stx = 0.02 + Math.random()/10;
sty = 0.7 + Math.random();
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
dx += stx;
document.all["dot"+i].style.pixelTop = yp;
document.all["dot"+i].style.pixelLeft = xp +
am*Math.sin(dx);
}
setTimeout("snowIE()", speed);
}

if (ns4up) {snowNS();}
else if (ie4up) {snowIE();}

 

[Janwillem Borleffs]

I understand that document.layers is no longer supported in Netscape
7.1 but I am not sure on how to fix the code so that it will work with
Netscape 7.1.

I understand that document.all is no longer supported in IE6 but I am
not sure on how to fix the code so that it will work with IE6.

It's true that document.layers isn't supported in Nescape 7.1 anymore, but
IE6 still supports document.all

Both Netscape version 6 and higher/Mozilla and IE from version 5.5 support
document.getElementById (IE next to document.all and Netscape/Mozilla
instead of document.layers).

Be aware that since document.getElementById is a function, it should be
called with parentheses at the end and the referenced object should also
contain an ID:

// Object
<div id="some_div" name="some_div">....</div>

// Netscape v4
document.layers['some_div']

// IE
document.all['some_div']

// IE >= v5.5 && Netscape >= v6
document.getElementById('some_div')


JW

 

[Lasse Reichstein Nielsen]

I understand that document.layers is no longer supported in Netscape
7.1

Correct. There is no technical connection between Netscape 4 and
Netscape 6+ (based on Mozilla), and the Mozilla people saw no reason
to implement the proprietary layers property in a modern browser.

but I am not sure on how to fix the code so that it will work with
Netscape 7.1.

Rewrite it to use standards.

I understand that document.all is no longer supported in IE6

Incorrect. It works as it always have.
It doesn't work in Mozilla/Netscape 6+.

but I am not sure on how to fix the code so that it will work with
IE6.

Rewrite to use standards. Make sure to put IE 6 into standards mode
using an appropriate DOCTYPE.

I would drop this script completely. It is build specifically to IE4
and Netscape 4, and even that could be done simpler (NS 4 treats
div's with position:fixed as layers, so no need for extra code
to write <layer>).

If you really want to use it, and need it to work in Mozilla/Netscape
6+, use getElementById instead of document.all (if it exists), and
remember to put "px" after the lengths.

if (ns4up)
{ // set layers
if (i == 0)
{
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
document.write("top=\"15\" visibility=\"show\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></layer>");
} else
{
document.write("<layer name=\"dot"+ i +"\" left=\"15\" ");
document.write("top=\"15\" visibility=\"show\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></layer>");
}

The branches are identical. No need for the if(i==0) at all.

} else if (ie4up)
{
if (i == 0)
{
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></div>");
} else
{
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><img src=\"");
document.write(snowflake + "\" border=\"0\"></div>");
}

Same here. Also, Netscape 4 understands the div just like the layer,
so you can use this code for both Netscape 4, IE, and all modern browsers.

doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;

Why is this inside a loop in snowIE? Doing it once should be sufficient.

document.all["dot"+i].style.pixelTop = yp;
document.all["dot"+i].style.pixelLeft = xp +

Example: Use
getElement("dot"+i).style.left = yp+(document.layers?"":"px");
where you define:
---
function getElement(id) {
var elem;
if (document.getElementById) {
elem = document.getElementById(id);
} else if (document.all) {
elem = document.all[id];
} else if (document.layers) {
elem = document.layers[id];
}
if (!elem.style) {elem.style = elem;}
return elem;
}
---
This function returns the correct element, no matter what browser, and
if there is no style object on it, it links it to itself.

Good luck.
/L