Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Problem with old Javascript and doctype

    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.

    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;

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,898
    Thanks
    203
    Thanked 2,530 Times in 2,508 Posts
    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.
    Last edited by Philip M; 11-28-2012 at 11:56 AM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,592
    Thanks
    0
    Thanked 645 Times in 635 Posts
    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?
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •