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 2004
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    IE Firefox difference

    I found a well behaved game which uses the DOM to paint gifs into a grid.
    Works fine with IE but with Firefox it creates the div area then nothing, no lines or any other viewable gifs.

    Is FireFox compatible with IE DOM code?

    Is there a site where I can check the behavior differences.?


    Code:
    <HTML><HEAD><TITLE>Election Squares - 2004</TITLE>
    <META http-equiv=Content-Type content="text/html; charset=windows-1252">
    <SCRIPT language=Javascript>
    <!--
    
    function set_cookie(name,value){document.cookie=name+"="+escape(value)+"; expires= Wed, 1 May 2030 23:00:00 UTC; path=/"}
    set_cookie("lastgame","Squares");
    set_cookie("lastgameURL","/strategy/squares");
    if(document.images){stat=new Image;stat.src="/cgi-bin/site.pl?command=stat.gif&rand="+(Math.random()*100)}
    
    if (document.images) {
    	var img0000 = new Image (29, 29); img0000.src = "0000.gif";
    	var img0001 = new Image (29, 29); img0001.src = "0001.gif";
    	var img0010 = new Image (29, 29); img0010.src = "0010.gif";
    	var img0011 = new Image (29, 29); img0011.src = "0011.gif";
    	var img0100 = new Image (29, 29); img0100.src = "0100.gif";
    	var img0101 = new Image (29, 29); img0101.src = "0101.gif";
    	var img0110 = new Image (29, 29); img0110.src = "0110.gif";
    	var img0111 = new Image (29, 29); img0111.src = "0111.gif";
    	var img1000 = new Image (29, 29); img1000.src = "1000.gif";
    	var img1001 = new Image (29, 29); img1001.src = "1001.gif";
    	var img1010 = new Image (29, 29); img1010.src = "1010.gif";
    	var img1011 = new Image (29, 29); img1011.src = "1011.gif";
    	var img1100 = new Image (29, 29); img1100.src = "1100.gif";
    	var img1101 = new Image (29, 29); img1101.src = "1101.gif";
    	var img1110 = new Image (29, 29); img1110.src = "1110.gif";
    	var img1111 = new Image (29, 29); img1111.src = "1111.gif";
    
    	var img1111A = new Image (29, 29); img1111A.src = "1111A.jpg";
    	var img1111B = new Image (29, 29); img1111B.src = "1111B.jpg";
    }
    
    var ns4 = (document.layers) ? true : false;
    var ie4 = (document.all) ? true : false;
    
    var size = 29;
    var xStart = 20;
    var yStart = 50;
    var nbRow = 10;
    var nbCol = 15;
    var nbTot = nbRow * nbCol;
    
    var row = 0;
    var col = 0;
    var way = '';
    var isOn = false;
    
    var cases = new Array (nbRow);
    for (var i = 0; i < nbRow; i++) {
    	cases[i] = new Array (nbCol);
    	for (var j = 0; j < nbCol; j ++) {
    		cases[i][j] = "0000";
    	}
    }
    
    var nbCasesA = 0;
    var nbCasesB = 0;
    var player = 'A';
    var colorA = 'white';
    var colorB = 'blue';
    
    var score0 = '<TABLE BORDER=1 WIDTH=250 HEIGHT=20><TR><TD WIDTH=100';
    var score1 = '>&nbsp;Kerry  : <B>';
    var score2 = '</B></TD><TD WIDTH=50 ALIGN="center">vs</TD><TD WIDTH=100';
    var score3 = '>&nbsp;Bush   : <B>';
    var score4 = '</B></TD></TR></TABLE>';
    
    var youToPlay = true;
    
    function init () {
    	document.onmousedown = mouseDown;
    	document.onmousemove = mouseMove;
    	if (ns4) document.captureEvents (Event.MOUSEDOWN | Event.MOUSEMOVE);
    
    	for (var j = 0; j < nbRow; j ++) {
    		addBorder (j, 0, "left");
    		addBorder (j, nbCol - 1, "right");
    	}
    	for (var i = 0; i < nbCol; i ++) {
    		addBorder (0, i, "top");
    		addBorder (nbRow - 1, i, "bottom");
    	}
    
    	var k = 0;
    	while (k < (nbRow + nbCol) * 2) {
    		var j = Math.floor (Math.random () * nbRow);
    		var i = Math.floor (Math.random () * nbCol);
    		if (i >= 0 || i < nbRow || j >= 0 || j < nbCol) {
    			if (getBorders (j, i) < 2) {
    				if (! hasBorder (j, i, "top")) {
    					addBorder (j, i, "top");
    					addBorder (j - 1, i, "bottom");
    				}
    				else if (! hasBorder (j, i, "right")) {
    					addBorder (j, i, "right");
    					addBorder (j, i + 1, "left");
    				}
    				else if (! hasBorder (j, i, "bottom")) {
    					addBorder (j, i, "bottom");
    					addBorder (j + 1, i, "top");
    				}
    				else if (! hasBorder (j, i, "left")) {
    					addBorder (j, i, "left");
    					addBorder (j, i - 1, "right");
    				}
    				k ++;
    			}
    		}
    	}
    }
    
    function changeCase (i, j) {
    	var str = '<IMG SRC=' + cases[i][j] + '.gif>';
    	if (ie4) eval ('document.all.case' + i + 'c' + j + '.innerHTML = "' + str + '";');
    	else if (ns4) {
    		var lyr = document.layers['case' + i + 'c' + j].document;
    		lyr.open ();
    		lyr.write (str);
    		lyr.close ();
    	}
    }
    
    function addBorder (i, j, border) {
    	if (i < 0 || i >= nbRow || j < 0 || j >= nbCol) return;
    	if (cases[i][j] == "1111A" || cases[i][j] == "1111B") return;
    	if (border == "top") cases[i][j] = "1" + cases[i][j].substr (1);
    	else if (border == "right") cases[i][j] = cases[i][j].substr (0, 1) + "1" + cases[i][j].substr (2);
    	else if (border == "bottom") cases[i][j] = cases[i][j].substr (0, 2) + "1" + cases[i][j].substr (3);
    	else if (border == "left") cases[i][j] = cases[i][j].substr (0, 3) + "1";
    	changeCase (i, j);
    }
    
    function hasBorder (i, j, border) {
    	if (border == "top" && cases[i][j].substr (0, 1) == "1") return true;
    	else if (border == "right" && cases[i][j].substr (1, 1) == "1") return true;
    	else if (border == "bottom" && cases[i][j].substr (2, 1) == "1") return true;
    	else if (border == "left" && cases[i][j].substr (3, 1) == "1") return true;
    	return false;
    }
    
    function getBorders (i, j) {
    	if (i < 0 || i >= nbRow || j < 0 || j >= nbCol) return 9;
    	if (cases[i][j] == "1111A" || cases[i][j] == "1111B") return 9;
    	var nb = 0;
    	if (hasBorder (i, j, "top")) nb ++;
    	if (hasBorder (i, j, "right")) nb ++;
    	if (hasBorder (i, j, "bottom")) nb ++;
    	if (hasBorder (i, j, "left")) nb ++;
    	return nb;
    }
    
    function mouseDown (e) {
    	if (isWinner ()) return false;
    
    	var x = (ns4) ? e.pageX : event.x + document.body.scrollLeft;
    	var y = (ns4) ? e.pageY : event.y + document.body.scrollTop;
    
    	if (isOn && youToPlay) {
    		var caseEmpty = true;
    
    		var c = (x - xStart) % size;
    		col = (x - xStart - c) / size;
    		c = col * size + xStart;
    		var r = (y - yStart) % size;
    		row = (y - yStart - r) / size;
    		r = row * size + yStart;
    
    		var lMin = Math.abs (x - c);
    		var rMin = Math.abs (c + size - x);
    		var tMin = Math.abs (y - r);
    		var bMin = Math.abs (r + size - y);
    		var min = Math.min (Math.min (lMin, rMin), Math.min (bMin, tMin));
    		if (min == lMin && col > 0) {					// Left
    			addBorder (row, col, "left");
    			addBorder (row, col - 1, "right");
    			if (getBorders (row, col - 1) == 4) {
    				cases[row][col - 1] = "1111A";
    				changeCase (row, col - 1);
    				nbCasesA ++;
    				caseEmpty = false;
    			}
    		}
    		else if (min == rMin && col < nbCol - 1) {		// Right
    			addBorder (row, col, "right");
    			addBorder (row, col + 1, "left");
    			if (getBorders (row, col + 1) == 4) {
    				cases[row][col + 1] = "1111A";
    				changeCase (row, col + 1);
    				nbCasesA ++;
    				caseEmpty = false;
    			}
    		}
    		else if (min == tMin && row > 0) {				// Top
    			addBorder (row, col, "top");
    			addBorder (row - 1, col, "bottom");
    			if (getBorders (row - 1, col) == 4) {
    				cases[row - 1][col] = "1111A";
    				changeCase (row - 1, col);
    				nbCasesA ++;
    				caseEmpty = false;
    			}
    		}
    		else if (min == bMin && row < nbRow - 1) {		// Bottom
    			addBorder (row, col, "bottom");
    			addBorder (row + 1, col, "top");
    			if (getBorders (row + 1, col) == 4) {
    				cases[row + 1][col] = "1111A";
    				changeCase (row + 1, col);
    				nbCasesA ++;
    				caseEmpty = false;
    			}
    		}
    		if (getBorders (row, col) == 4) {
    			cases[row][col] = "1111A";
    			changeCase (row, col);
    			nbCasesA ++;
    			caseEmpty = false;
    		}
    		moveTo ('h', -100, -100);
    		moveTo ('v', -100, -100);
    
    		if (caseEmpty) {
    			youToPlay = false;
    			player = 'B';
    		}
    		else {
    			youToPlay = true;
    		}
    
    		// au tour de l'ordinateur !
    		if (! youToPlay) {
    			if (ie4) document.all.score.innerHTML = score0 + score1 + nbCasesA + score2 + ' BGCOLOR=' + colorB + score3 + nbCasesB + score4;
    			else if (ns4) {
    				var lyr = document.layers['score'].document;
    				lyr.open ();
    				lyr.write (score0 + score1 + nbCasesA + score2 + ' BGCOLOR=' + colorB + score3 + nbCasesB + score4);
    				lyr.close ();
    			}
    
    			// recherche des carrés à faire
    			var isCarre = true;
    			var tmpNb = nbCasesB;
    			while (isCarre) {
    				isCarre = false;
    				for (var j = 0; j < nbRow; j ++) {
    					for (var i = 0; i < nbCol; i ++) {
    						if (getBorders (j, i) == 3) {
    							cases[j][i] = "1111B";
    							changeCase (j, i);
    							addBorder (j + 1, i, "top");
    							addBorder (j, i - 1, "right");
    							addBorder (j - 1, i, "bottom");
    							addBorder (j, i + 1, "left");
    							nbCasesB ++;
    							isCarre = true;
    							for (var j = 0; j < nbRow; j ++) {
    								for (var i = 0; i < nbCol; i ++) {
    									if (getBorders (j, i) == 4 && cases[j][i] == "1111") {
    										cases[j][i] = "1111B";
    										changeCase (j, i);
    										nbCasesB ++;
    									}
    								}
    							}
    						}
    					}
    				}
    			}
    
    			// après les carrés, il faut faire un trait !
    			if (! isWinner ()) {
    				var jM = -1;
    				var iM = -1;
    				var bM = 50;
    				var wM = "";
    				for (var j = 0; j < nbRow; j ++) {
    					for (var i = 0; i < nbCol; i ++) {
    						var bb = getBorders (j, i) * 10;
    						var bM2 = bb + 4;
    						var wM2 = "";
    						if (! hasBorder (j, i, "top")) {
    							if (bb + getBorders (j - 1, i) < bM2) {
    								bM2 = bb + getBorders (j - 1, i);
    								wM2 = "top";
    							}
    						}
    						if (! hasBorder (j, i, "right")) {
    							if (bb + getBorders (j, i + 1) < bM2) {
    								bM2 = bb + getBorders (j, i + 1);
    								wM2 = "right";
    							}
    						}
    						if (! hasBorder (j, i, "bottom")) {
    							if (bb + getBorders (j + 1, i) < bM2) {
    								bM2 = bb + getBorders (j + 1, i);
    								wM2 = "bottom";
    							}
    						}
    						if (! hasBorder (j, i, "left")) {
    							if (bb + getBorders (j, i - 1) < bM2) {
    								bM2 = bb + getBorders (j, i - 1);
    								wM2 = "left";
    							}
    						}
    						if (bM2 < bM) {
    							bM = bM2;
    							wM = wM2;
    							jM = j;
    							iM = i;
    						}
    					}
    				}
    				if (wM == "top") {
    					addBorder (jM, iM, "top");
    					addBorder (jM - 1, iM, "bottom");
    				}
    				else if (wM == "right") {
    					addBorder (jM, iM, "right");
    					addBorder (jM, iM + 1, "left");
    				}
    				else if (wM == "bottom") {
    					addBorder (jM, iM, "bottom");
    					addBorder (jM + 1, iM, "top");
    				}
    				else if (wM == "left") {
    					addBorder (jM, iM, "left");
    					addBorder (jM, iM - 1, "right");
    				}
    			}
    
    			youToPlay = true;
    			player = 'A';
    		}
    	}
    
    	if (player == 'A') {
    		if (ie4) document.all.score.innerHTML = score0 + ' BGCOLOR=' + colorA + score1 + nbCasesA + score2 + score3 + nbCasesB + score4;
    		else if (ns4) {
    			var lyr = document.layers['score'].document;
    			lyr.open ();
    			lyr.write (score0 + ' BGCOLOR=' + colorA + score1 + nbCasesA + score2 + score3 + nbCasesB + score4);
    			lyr.close ();
    		}
    	}
    	else {
    		if (ie4) document.all.score.innerHTML = score0 + score1 + nbCasesA + score2 + ' BGCOLOR=' + colorB + score3 + nbCasesB + score4;
    		else if (ns4) {
    			var lyr = document.layers['score'].document;
    			lyr.open ();
    			lyr.write (score0 + score1 + nbCasesA + score2 + ' BGCOLOR=' + colorB + score3 + nbCasesB + score4);
    			lyr.close ();
    		}
    	}
    
    	if (isWinner ()) {
    		if (nbCasesA > nbCasesB)
    			alert ('Winner : Kerry , ' + nbCasesA + ' to Bush ' + nbCasesB);
    		else if (nbCasesB > nbCasesA)
    			alert ('Winner : Bush , ' + nbCasesB + ' to Kerry ' + nbCasesA);
    		else
    			alert ('No winner... Send in the Supreme Court !');
    	}
    
    }
    
    function mouseMove (e) {
    	var x = (ns4) ? e.pageX : event.x + document.body.scrollLeft;
    	var y = (ns4) ? e.pageY : event.y + document.body.scrollTop;
    	isOn = false;
    	way = '';
    	if (youToPlay && x > xStart && x < xStart + nbCol * size && y > yStart && y < yStart + nbRow * size) {
    		var c = (x - xStart) % size;
    		col = (x - xStart - c) / size;
    		c = col * size + xStart;
    		var r = (y - yStart) % size;
    		row = (y - yStart - r) / size;
    		r = row * size + yStart;
    
    		var lMin = Math.abs (x - c);
    		var rMin = Math.abs (c + size - x);
    		var tMin = Math.abs (y - r);
    		var bMin = Math.abs (r + size - y);
    		var min = Math.min (Math.min (lMin, rMin), Math.min (bMin, tMin));
    		if (min == lMin && col > 0) {					// Left
    			way = 'v';
    			if (! hasBorder (row, col, "left")) {
    				moveTo ('v', c - 3, r);
    				isOn = true;
    			}
    			else moveTo ('v', -100, -100);
    			moveTo ('h', -100, -100);
    		}
    		else if (min == rMin && col < nbCol - 1) {		// Right
    			way = 'v';
    			if (! hasBorder (row, col, "right")) {
    				moveTo ('v', c + size - 3, r);
    				isOn = true;
    			}
    			else moveTo ('v', -100, -100);
    			moveTo ('h', -100, -100);
    		}
    		else if (min == tMin && row > 0) {				// Top
    			way = 'h';
    			if (! hasBorder (row, col, "top")) {
    				moveTo ('h', c, r - 3);
    				isOn = true;
    			}
    			else moveTo ('h', -100, -100);
    			moveTo ('v', -100, -100);
    		}
    		else if (min == bMin && row < nbRow - 1) {		// Bottom
    			way = 'h';
    			if (! hasBorder (row, col, "bottom")) {
    				moveTo ('h', c, r + size - 3);
    				isOn = true;
    			}
    			else moveTo ('h', -100, -100);
    			moveTo ('v', -100, -100);
    		}
    	}
    	if (! isOn) {
    		moveTo ('h', -100, -100);
    		moveTo ('v', -100, -100);
    	}
    }
    
    function isWinner () {
    	if (nbCasesA + nbCasesB == nbTot) return true;
    	return false;
    }
    
    function moveTo (way, x, y) {
    	if (way == "h" && ie4) obj = playH.style;
    	else if (way == "h" && ns4) obj = document.layers.playH;
    	if (way == "v" && ie4) obj = playV.style;
    	else if (way == "v" && ns4) obj = document.layers.playV;
    	obj.left = x;
    	obj.top = y;
    }
    
    // -->
    </SCRIPT>
    
    <META content="MSHTML 6.00.2600.0" name=GENERATOR></HEAD>
    <BODY onload="init ()">
    <DIV id=score 
    style="LEFT: 20px; WIDTH: 400px; POSITION: absolute; TOP: 15px; HEIGHT: 20px">
    <TABLE height=20 width=250 border=1>
      <TBODY>
      <TR>
        <TD width=100 bgColor=red>&nbsp;player A : <B>0</B></TD>
        <TD align=middle width=50>vs</TD>
        <TD width=100>&nbsp;player B : <B>0</B></TD></TR></TBODY></TABLE></DIV>
    <DIV id=copy 
    style="LEFT: 300px; WIDTH: 350px; POSITION: absolute; TOP: 15px; HEIGHT: 20px"><FONT 
    size=5>Watch the States Go Red or Blue &nbsp;&nbsp;</FONT> </DIV>
    <SCRIPT language=Javascript>
    <!--
    
    for (var i = 0; i < nbRow; i ++) {
    	for (var j = 0; j < nbCol; j ++) {
    		document.writeln ('<DIV ID="case' + i + 'c' + j + '" STYLE="position:absolute; left:' + (j * size + xStart) + '; top:' + (i * size + yStart) + '; width:' + size + '; height:' + size + '"><IMG SRC="' + cases[i][j] + '.gif"></DIV>');
    	}
    }
    
    // -->
    </SCRIPT>
    
    <DIV id=playH 
    style="LEFT: -100px; WIDTH: 29px; POSITION: absolute; TOP: -100px; HEIGHT: 7px; BACKGROUND-COLOR: yellow; layer-background-color: yellow">
    <TABLE height=7 cellSpacing=0 cellPadding=0 width=29 border=1>
      <TBODY>
      <TR>
        <TD></TD></TR></TBODY></TABLE></DIV>
    <DIV id=playV 
    style="LEFT: -100px; WIDTH: 7px; POSITION: absolute; TOP: -100px; HEIGHT: 29px; BACKGROUND-COLOR: yellow; layer-background-color: yellow">
    <TABLE height=29 cellSpacing=0 cellPadding=0 width=7 border=1>
      <TBODY>
      <TR>
        <TD></TD></TR></TBODY></TABLE></DIV></BODY></HTML>
    Last edited by liorean; 01-16-2005 at 03:53 PM. Reason: [code]wrapped[/code]

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    The code is much too worn-out and it uses a completely deprecated browser detector and object references

    var ns4 = (document.layers) ? true : false;
    var ie4 = (document.all) ? true : false;

    The new browsers use all another way to reference objects:

    document,getElementById, document,getElementByName, document,getElementsByTagName....

    To have a code witch works in Moz also, you will have to change it completely, in fact to build a brand new one (or to find one build in modern manner)
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    New to the CF scene
    Join Date
    Jan 2005
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Not using W3C DOM

    The problem with your javascript, is that it's not using the W3C DOM (which would work, for the most part, in both IE and FireFox). You are usings IE's proprietary, outdated DOM, which will only work in IE. It's like trying to run an .exe on a Mac w/o VirtualPC


  •  

    Posting Permissions

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