justinbarneskin
03-02-2010, 09:24 AM
Greetings,
I'm just starting to write a javascript chess game and found trouble with CSS
With the code to demonstrate, click a piece to move it to an empty square, see
in firefox that the TD is disrupted unlike IE. How to fix it?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD><TITLE>MyChess</TITLE>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
<STYLE type=text/CSS>
td{height:50px;width:50px;text-align:center;position:relative;overflow:hidden;font-size:40px;}
.w { background-color: #F8F5DF}
.b { background-color: #C3A480}
</STYLE>
<SCRIPT type="text/javascript">
var p='♜,♞,♝,♛,♚,♝,♞,♜,♟,♟,♟,♟,♟,♟,♟,♟, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,♙,♙,♙,♙,♙,♙,♙,♙,♖,♗,♘,♕,♔,♘,♗,♖';p=p.split(',')
var whites='♔ ♕ ♖ ♗ ♘ ♙'
var dark='♚ ♛ ♜ ♝ ♞ ♟';
var mine=whites;
var cpu=dark;
var tempX = 0; var tempY = 0;
var IE = document.all?true:false; if (!IE) document.captureEvents(Event.MOUSEMOVE);
function getMouseXY(e) { if (IE) { tempX = event.clientX + document.body.scrollLeft; tempY = event.clientY + document.body.scrollTop; } else { tempX = e.pageX; tempY = e.pageY; } document.getElementById('PI').style.top=tempY+'px'; document.getElementById('PI').style.left=tempX+10+'px';PI.style.display='block';return true;}
function switchSides(){p.reverse(); mine==whites?mine=dark:mine=whites; cpu==dark?cpu=whites:cpu=dark; h(); }
function h(){
var bck='b'; var t='<table border=0 bordercolor="silver" cellpadding=0 cellspacing=0 ><tr>'
for(i=0;i<p.length;i++){ bck=='b'?bck='w':bck='b'; if(i!=0 && i%8==0){t+='</tr><tr>';bck=='b'?bck='w':bck='b';}
if(mine.indexOf(p[i])!=-1){
t+='<td class="'+bck+'" style="cursor:pointer;" onclick="pickIt(\''+i+'\',this)">'+p[i]+'</td>';}
else{ t+='<td class="'+bck+'" style="cursor:crosshair;" onclick="moveTo(\''+i+'\')">'+p[i]+'</td>';}
}
document.getElementById('board').innerHTML=t+'</table>';
}
</SCRIPT>
<META content="MSHTML 6.00.2900.2963" name=GENERATOR></HEAD>
<BODY scroll="auto" onload="h()">
♔ ♕ ♖ ♗ ♘ ♙ || ♚ ♛ ♜ ♝ ♞ ♟
<div id="board"></div>
<DIV id="PI" style="position:absolute;left:-400px;font-size:24px">hello</DIV>
<input onclick="switchSides(); return false;" type="button" style="height:46px;width:50px;font-family:arial;font-size:28px;font-weight:bold;background-color:#333399;color:white" value="↱↲">
<SCRIPT type="text/javascript">
var picks; var picked=false;
function pickIt(indx,zt){if(!picked && p[indx]!=picked){picked=indx; PI.innerHTML=p[indx]; picks=zt; zt.innerHTML=' '; document.onmousemove = getMouseXY;}
else{picks.innerHTML=p[picked]; picks=picked=false; PI.innerHTML=''; PI.style.left='-1000px'; document.onmousemove = null}
}
function moveTo(indx){ if(picked && validate(picked,indx)){ var k=p[picked]; p[picked]=' '; p[indx]=k;
picks=picked=false; PI.innerHTML=''; PI.style.left='-1000px'; document.onmousemove = null
h()}
}
function validate(picked,index){
return true
}
var PI=document.getElementById('PI');
</SCRIPT>
</BODY></HTML>
I'm just starting to write a javascript chess game and found trouble with CSS
With the code to demonstrate, click a piece to move it to an empty square, see
in firefox that the TD is disrupted unlike IE. How to fix it?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD><TITLE>MyChess</TITLE>
<META http-equiv=Content-Type content="text/html; charset=UTF-8">
<STYLE type=text/CSS>
td{height:50px;width:50px;text-align:center;position:relative;overflow:hidden;font-size:40px;}
.w { background-color: #F8F5DF}
.b { background-color: #C3A480}
</STYLE>
<SCRIPT type="text/javascript">
var p='♜,♞,♝,♛,♚,♝,♞,♜,♟,♟,♟,♟,♟,♟,♟,♟, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,♙,♙,♙,♙,♙,♙,♙,♙,♖,♗,♘,♕,♔,♘,♗,♖';p=p.split(',')
var whites='♔ ♕ ♖ ♗ ♘ ♙'
var dark='♚ ♛ ♜ ♝ ♞ ♟';
var mine=whites;
var cpu=dark;
var tempX = 0; var tempY = 0;
var IE = document.all?true:false; if (!IE) document.captureEvents(Event.MOUSEMOVE);
function getMouseXY(e) { if (IE) { tempX = event.clientX + document.body.scrollLeft; tempY = event.clientY + document.body.scrollTop; } else { tempX = e.pageX; tempY = e.pageY; } document.getElementById('PI').style.top=tempY+'px'; document.getElementById('PI').style.left=tempX+10+'px';PI.style.display='block';return true;}
function switchSides(){p.reverse(); mine==whites?mine=dark:mine=whites; cpu==dark?cpu=whites:cpu=dark; h(); }
function h(){
var bck='b'; var t='<table border=0 bordercolor="silver" cellpadding=0 cellspacing=0 ><tr>'
for(i=0;i<p.length;i++){ bck=='b'?bck='w':bck='b'; if(i!=0 && i%8==0){t+='</tr><tr>';bck=='b'?bck='w':bck='b';}
if(mine.indexOf(p[i])!=-1){
t+='<td class="'+bck+'" style="cursor:pointer;" onclick="pickIt(\''+i+'\',this)">'+p[i]+'</td>';}
else{ t+='<td class="'+bck+'" style="cursor:crosshair;" onclick="moveTo(\''+i+'\')">'+p[i]+'</td>';}
}
document.getElementById('board').innerHTML=t+'</table>';
}
</SCRIPT>
<META content="MSHTML 6.00.2900.2963" name=GENERATOR></HEAD>
<BODY scroll="auto" onload="h()">
♔ ♕ ♖ ♗ ♘ ♙ || ♚ ♛ ♜ ♝ ♞ ♟
<div id="board"></div>
<DIV id="PI" style="position:absolute;left:-400px;font-size:24px">hello</DIV>
<input onclick="switchSides(); return false;" type="button" style="height:46px;width:50px;font-family:arial;font-size:28px;font-weight:bold;background-color:#333399;color:white" value="↱↲">
<SCRIPT type="text/javascript">
var picks; var picked=false;
function pickIt(indx,zt){if(!picked && p[indx]!=picked){picked=indx; PI.innerHTML=p[indx]; picks=zt; zt.innerHTML=' '; document.onmousemove = getMouseXY;}
else{picks.innerHTML=p[picked]; picks=picked=false; PI.innerHTML=''; PI.style.left='-1000px'; document.onmousemove = null}
}
function moveTo(indx){ if(picked && validate(picked,indx)){ var k=p[picked]; p[picked]=' '; p[indx]=k;
picks=picked=false; PI.innerHTML=''; PI.style.left='-1000px'; document.onmousemove = null
h()}
}
function validate(picked,index){
return true
}
var PI=document.getElementById('PI');
</SCRIPT>
</BODY></HTML>