www.webdeveloper.com
Results 1 to 3 of 3

Thread: Problem with old Javascript and doctype

  1. #1
    Join Date
    Nov 2012
    Posts
    1

    Unhappy 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?

    For example, I have seen that the if() function doesn't have curly brackets after.

    I 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. #2
    Join Date
    Jan 2005
    Posts
    369
    Personally, I wouldn't be introducing code that was written for Netscape 4 and IE4 any more. Bound to be able to find modern code doing similar job.

  3. #3
    Join Date
    Mar 2009
    Posts
    512
    If you don't specify a DOCTYPE you can use bare numbers for co-ordinates. BUT if you specify a DOCTYPE you have to have some unit behind the number, such as '60px'. Bare numbers don't work. That appears to be the case here.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles