...

View Full Version : Problem with old Javascript and doctype



Christian.babw
11-28-2012, 11:33 AM
Hello,

I'm not an expert in old javascript code. I found this code to display fireworks on a page and I would like to use it for a page.

It works well, but when I add a doctype to the document, it doesn't work.

Is there anything you can do to help me? Please?

I'll past the code.


if(!window.JSFX) JSFX=new Object();

if(!JSFX.createLayer)
{/*** Include Library Code ***/

var ns4 = document.layers;
var ie4 = document.all;
JSFX.objNo=0;

JSFX.getObjId = function(){return "JSFX_obj" + JSFX.objNo++;};

JSFX.createLayer = function(theHtml)
{
var layerId = JSFX.getObjId();

document.write(ns4 ? "<LAYER NAME='"+layerId+"'>"+theHtml+"</LAYER>" :
"<DIV id='"+layerId+"' style='position:absolute'>"+theHtml+"</DIV>" );

var el = document.getElementById ? document.getElementById(layerId) :
document.all ? document.all[layerId] :
document.layers[layerId];

if(ns4)
el.style=el;

return el;
}
JSFX.fxLayer = function(theHtml)
{
if(theHtml == null) return;
this.el = JSFX.createLayer(theHtml);
}
var proto = JSFX.fxLayer.prototype

proto.moveTo = function(x,y){this.el.style.left = x;this.el.style.top=y;}
proto.setBgColor = function(color) { this.el.style.backgroundColor = color; }
proto.clip = function(x1,y1, x2,y2){ this.el.style.clip="rect("+y1+" "+x2+" "+y2+" "+x1+")"; }
if(ns4){
proto.clip = function(x1,y1, x2,y2){
this.el.style.clip.top =y1;this.el.style.clip.left =x1;
this.el.style.clip.bottom=y2;this.el.style.clip.right =x2;
}
proto.setBgColor=function(color) { this.el.bgColor = color; }
}
if(window.opera)
proto.setBgColor = function(color) { this.el.style.color = color==null?'transparent':color; }

if(window.innerWidth)
{
gX=function(){return innerWidth;};
gY=function(){return innerHeight;};
}
else
{
gX=function(){return document.body.clientWidth;};
gY=function(){return document.body.clientHeight;};
}

/*** Example extend class ***/
JSFX.fxLayer2 = function(theHtml)
{
this.superC = JSFX.fxLayer;
this.superC(theHtml + "C");
}
JSFX.fxLayer2.prototype = new JSFX.fxLayer;
}/*** End Library Code ***/

/*************************************************/

/*** Class Firework extends FxLayer ***/
JSFX.Firework = function(fwImages)
{
window[ this.id = JSFX.getObjId() ] = this;
this.imgId = "i" + this.id;
this.fwImages = fwImages;
this.numImages = fwImages.length;
this.superC = JSFX.fxLayer;
this.superC("<img src='"+fwImages[0].src+"' name='"+this.imgId+"'>");

this.img = document.layers ? this.el.document.images[0] : document.images[this.imgId];
this.step = 0;
this.timerId = -1;
this.x = 0;
this.y = 0;
this.dx = 0;
this.dy = 0;
this.ay = 0.2;
this.state = "OFF";
}
JSFX.Firework.prototype = new JSFX.fxLayer;

JSFX.Firework.prototype.getMaxDy = function()
{
var ydiff = gY() - 130;
var dy = 1;
var dist = 0;
var ay = this.ay;
while(dist<ydiff)
{
dist += dy;
dy+=ay;
}
return -dy;
}
JSFX.Firework.prototype.setFrame = function()
{
// this.img.src=this.fwName+"/"+this.step+".gif";
this.img.src=this.fwImages[ this.step ].src;
}
JSFX.Firework.prototype.animate = function()
{

if(this.state=="OFF")
{

this.step = 0;
this.x = gX()/2-20;
this.y = gY()-100;
this.moveTo(this.x, this.y);
this.setFrame();
if(Math.random() > .95)
{
this.dy = this.getMaxDy();
this.dx = Math.random()*-8 + 4;
this.dy += Math.random()*3;
this.state = "TRAVEL";
}
}
else if(this.state=="TRAVEL")
{
this.x += this.dx;
this.y += this.dy;
this.dy += this.ay;
this.moveTo(this.x,this.y);
if(this.dy > 1)
this.state="EXPLODE"
}
else if(this.state == "EXPLODE")
{
this.step++;
if(this.step < this.numImages)
this.setFrame();
else
this.state="OFF";
}
}
/*** END Class Firework***/

/*** Class FireworkDisplay extends Object ***/
JSFX.FireworkDisplay = function(n, fwImages, numImages)
{
window[ this.id = JSFX.getObjId() ] = this;
this.timerId = -1;
this.fireworks = new Array();
this.imgArray = new Array();
this.loadCount=0;
this.loadImages(fwImages, numImages);

for(var i=0 ; i<n ; i++)
this.fireworks[this.fireworks.length] = new JSFX.Firework(this.imgArray);
}
JSFX.FireworkDisplay.prototype.loadImages = function(fwName, numImages)
{
for(var i=0 ; i<numImages ; i++)
{
this.imgArray[i] = new Image();
this.imgArray[i].obj = this;
this.imgArray[i].onload = window[this.id].imageLoaded;
this.imgArray[i].src = fwName+"/"+i+".gif";
}
}
JSFX.FireworkDisplay.prototype.imageLoaded = function()
{
this.obj.loadCount++;
}

JSFX.FireworkDisplay.prototype.animate = function()
{
status = this.loadCount;
if(this.loadCount < this.imgArray.length)
return;

for(var i=0 ; i<this.fireworks.length ; i++)
this.fireworks[i].animate();
}
JSFX.FireworkDisplay.prototype.start = function()
{
if(this.timerId == -1)
{
this.state = "OFF";
this.timerId = setInterval("window."+this.id+".animate()", 40);
}

}
JSFX.FireworkDisplay.prototype.stop = function()
{
if(this.timerId != -1)
{
clearInterval(this.timerId);
this.timerId = -1;
for(var i=0 ; i<this.fireworks.length ; i++)
{
this.fireworks[i].moveTo(-100, -100);
this.fireworks[i].step = 0;;
this.fireworks[i].state = "OFF";
}
}
}
/*** END Class FireworkDisplay***/

JSFX.FWStart = function()
{
if(JSFX.FWLoad)JSFX.FWLoad();
myFW1.start();
myFW2.start();
myFW3.start();
myFW4.start();
}
myFW1 = new JSFX.FireworkDisplay(5, "fw05", 21);
myFW2 = new JSFX.FireworkDisplay(5, "fw08", 26);
myFW3 = new JSFX.FireworkDisplay(5, "fw11", 30);
myFW4 = new JSFX.FireworkDisplay(5, "fw02", 15);
JSFX.FWLoad=window.onload;
window.onload=JSFX.FWStart;

Philip M
11-28-2012, 11:51 AM
Sorry, NS4 and IE4 went the way of all flesh a long time ago. :)

document.all was a feature if IE4 and it is no longer supported by IE9. document.layers went out with NS4.

Without a doctype IE defaults to quirks mode. (No standard).

You will need to find more up-to-date code if you want the code to validate in modern browsers.

All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

felgall
11-28-2012, 06:48 PM
Ab out half if not more of that code is intended specifically for old browsers and will not function properly in more modern browsers. It doesn't look like that code even uses getElementBy Id() which is the standard replacement for all and layers that was first available ti use in IE5 and has been available in every browser since.

Does http://www.felgall.com/jstip131.htm provide the sort of effect you are after?



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum