...
PDA

IE Firefox difference

dumb-dom-guy
11-29-2004, 08:23 PM
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.?


<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>
Kor
12-06-2004, 12:22 PM
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)
mswitzer
01-16-2005, 02:38 PM
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

EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum