...

View Full Version : Text Fields clearing when switching between <DIV>s



KevinJohnson
06-28-2009, 04:00 PM
Here's a strange problem..... I have at least 2 divisions in my DHTML app that have text fields. However, the problem that i am finding is that when i switch between them....and come back to it...the text that i just entered is GONE! :o

ok, here's the code...


HTML CODE:


<div id="profile" style="position: absolute; left: 0px; top: 0px;">
<form style="height: 180px; width: 250px;" name="Profile">
<table style="text-align: left; width: 249px; height: 201px;" border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="width: 88px;">Name</td>
<td style="width: 143px;"><input id="Profile_Name" type="text"></td>
</tr>
<tr>
<td style="width: 88px;">Title</td>
<td style="width: 143px;"><input id="Profile_Title" type="text">
</td>
</tr>
<tr>
<td style="width: 88px;">Rating</td>
<td style="width: 143px;"><input id="Profile_Rating" type="text"></td>
</tr>
<tr>
<td style="width: 88px;">Country</td>
<td style="width: 143px;"><input id="Profile_Country" type="text"></td>
</tr>
<tr>
<td style="width: 88px;">Year of Birth</td>
<td style="width: 143px;"><input id="Profile_YOB" type="text"></td>
</tr>
<tr>
<td style="height: 31px;">FIDE ID</td>
<td style="height: 31px;"><input id="Profile_FDIDE_ID" type="text"></td>
</tr>
<tr>
<td>Play As</td>
<td align="center"><img src="White-Pawn.png" height="20" width="20"><input name="WhitePlayer" type="checkbox"><img src="Black-Pawn.png" height="20" width="20"><input name="BlackPlayer" type="checkbox">
</td>
</tr>
</tbody>
</table>
<a href="" onclick="javascript:MainMenu();">Menu</a>
</form>

</div>
<!--
************
Record Section
************
-->

<div id="record" name="record" style="position: absolute; left: 0px; top: 0px;">
<form style="height: 178px; width: 249px;" name="Profile">
<table style="text-align: left; width: 249px; height: 201px;" border="1" cellpadding="2" cellspacing="2">
<tr>
<td style="width: 88px;">Tournament</td>
<td style="width: 143px;"><input id="Tournament" type="text"></td>
</tr>
<tr>
<td style="width: 88px;">Country</td>
<td style="width: 143px;"><input id="Country" type="text">
</td>
</tr>
<tr>
<td style="width: 88px;">Date</td>
<td style="width: 143px;"><input name="Profile_Rating" type="text"></td>
</tr>
<tr>
<td style="width: 88px;">Round</td>
<td style="width: 143px;"><input id="Round" type="text"></td>
</tr>
<tr>
<td style="width: 88px;">Section</td>
<td style="width: 143px;"><input name="Profile_YOB" type="text"></td>
</tr>
<tr>
<td style="height: 31px;">Board</td>
<td style="height: 31px;"><input name="Profile_FDIDE_ID" type="text"></td>
</tr>
<tr>
<td>Opponent</td>
<td><input id="Opponent" type="text"></td>
</tr>
<tr>
<td>Rating</td>
<td><input name="Profile_FDIDE_ID" type="text"></td>
</tr>
<tr>
<td>Play As</td>
<td align="center">
<img src="White-Pawn.png" height="20" width="20"><input id="WhitePlayer" type="checkbox">
&nbsp;
<img src="Black-Pawn.png" height="20" width="20"><input id="BlackPlayer" type="checkbox">
</td>
</tr>

</table>
<a href="" onclick="javascript:MainMenu();">Menu</a>
</form>

</div>


those are the two divisions that have the TextBoxes in them....


here's the Script:




//initialize the Layout

function MainMenu()
{
document.getElementById("menu").style.visibility = "visible";
document.getElementById("chessboard").style.visibility = "hidden";
document.getElementById("record").style.visibility = "hidden";
document.getElementById("profile").style.visibility = "hidden";
document.getElementById("info").style.visibility = "hidden";
document.getElementById("GetSignature").style.visibility = "hidden";
}

//**************
//Menu functions
//**************

function MenuProfile()
{
document.getElementById("profile").style.visibility = "visible";
document.getElementById("menu").style.visibility = "hidden";
document.getElementById("chessboard").style.visibility = "hidden";
document.getElementById("record").style.visibility = "hidden";
}
function MenuDataBank()
{
}

function MenuRecord()
{
document.getElementById("record").style.visibility = "visible";
document.getElementById("menu").style.visibility = "hidden";
}

function MenuPlay()
{
AdjustPieceSize(40);
document.getElementById("chessboard").style.visibility = "visible";
document.getElementById("menu").style.visibility = "hidden";
document.getElementById("PGNArea").style.visibility = "hidden";
}

function MenuSetup()
{
}

function MenuInfo()
{
document.getElementById("menu").style.visibility = "hidden";
document.getElementById("chessboard").style.visibility = "hidden";
document.getElementById("record").style.visibility = "hidden";
document.getElementById("profile").style.visibility = "hidden";
document.getElementById("info").style.visibility = "visible";
}

function DoSignature()
{
ClearCanvas(); // Paint the canvas White
document.getElementById("chessboard").style.visibility = "hidden";
document.getElementById("sig2").style.visibility = "hidden";
document.getElementById("sig3").style.visibility = "hidden";
document.getElementById("GetSignature").style.visibility = "visible";
document.getElementById("sig1").style.visibility = "visible";

//Change the innerHTML of the Player Signature Lable
NewOpponentName = document.getElementById("Profile_Name").value;
document.getElementById("PlayerNameSignatureValue").innerHTML = NewOpponentName;

alert("The New Opponent Name is: " + NewOpponentName);

//Change the innerHTML of the Opponent Signature Lable
NewPlayerName = NewOpponentName = document.getElementById("Opponent").value;
document.getElementById("OpponentNameSignatureValue").innerHTML = document.getElementById("Opponent").value;

alert("The New Player Name is: " + NewPlayerName);
}

Old Pedant
06-29-2009, 03:33 AM
Didn't happen for me, at all. I copied your code verbatim; added links to turn on one or the other. Values persisted no matter what I did.

Maybe something in code you aren't showing us??

What browser are you using?

KevinJohnson
06-30-2009, 07:31 AM
i'm using FireFox.

Old Pedant
06-30-2009, 09:14 PM
That's what I tested with. Must be something else on the page.

KevinJohnson
07-02-2009, 10:30 AM
ok, here's my full HTML code, and the related scripts that i'm using. It will maybe take or 3 posts.


HTML Code:

<html>
<head>
<script src="Menu.js" Language="JavaScript"></script>
<script src="Core.js" Language="JavaScript"></script>
<script src="Signature.js" Language="JavaScript"></script>

</head>

<body bgcolor="green" OnLoad="MainMenu();" oncontextmenu="return false;">

<!--
************
Menu Section
************
-->

<div id="menu" style="position: absolute; left: 0px; top: 0px;">
<table style="text-align: left; width: 224px; height: 238px;" border="0" cellpadding="2" cellspacing="2">

<tr>
<td>
<center>
<img id="ProfileButtonPicture" src="Profile(black).png" onclick="javascript:MenuProfile();" onMouseDown="document.getElementById('ProfileButtonPicture').src='Profile(white).png'" onMouseOut="document.getElementById('ProfileButtonPicture').src='Profile(black).png'">
</center>
</td>
</tr>

<tr>
<td>
<center><img id="DatabankButtonPicture" src="Databank(black).png" onclick="javascript:MenuDataBank();" onMouseDown="document.getElementById('DatabankButtonPicture').src='Databank(white).png'" onMouseOut="document.getElementById('DatabankButtonPicture').src='Databank(black).png'"></center>
</td>
</tr>

<tr>
<td>
<center><img id="RecordButtonPicture" src="Record(black).png" onclick="javascript:MenuRecord();" onMouseDown="document.getElementById('RecordButtonPicture').src='Record(white).png'" onMouseOut="document.getElementById('RecordButtonPicture').src='Record(black).png'"></center>
</td>
</tr>

<tr>
<td>
<center><img id="PlayButtonPicture" src="Play(black).png" onclick="javascript:MenuPlay();" onMouseDown="document.getElementById('PlayButtonPicture').src='Play(white).png'" onMouseOut="document.getElementById('PlayButtonPicture').src='Play(black).png'"></center>
</td>
</tr>

<tr>
<td>
<center><img id="SetupButtonPicture" src="Setup(black).png" onclick="javascript:MenuSetup();" onMouseDown="document.getElementById('SetupButtonPicture').src='Setup(white).png'" onMouseOut="document.getElementById('SetupButtonPicture').src='Setup(black).png'"></center>
</td>
</tr>

<tr>
<td>
<center><img id="InfoButtonPicture" src="Info(black).png" onclick="javascript:MenuInfo();" onMouseDown="document.getElementById('InfoButtonPicture').src='Info(white).png'" onMouseOut="document.getElementById('InfoButtonPicture').src='Info(black).png'"></center>
</td>
</tr>
</table>
</div>

<!--
*****************************************
Player Profile
*****************************************
-->
<div id="profile" style="position: absolute; left: 0px; top: 0px;">
<form style="height: 180px; width: 250px;" name="Profile">
<table style="text-align: left; width: 249px; height: 201px;" border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td style="width: 88px;">Name</td>
<td style="width: 143px;"><input id="Profile_Name" type="text"></td>
</tr>
<tr>
<td style="width: 88px;">Title</td>
<td style="width: 143px;"><input id="Profile_Title" type="text">
</td>
</tr>
<tr>
<td style="width: 88px;">Rating</td>
<td style="width: 143px;"><input id="Profile_Rating" type="text"></td>
</tr>
<tr>
<td style="width: 88px;">Country</td>
<td style="width: 143px;"><input id="Profile_Country" type="text"></td>
</tr>
<tr>
<td style="width: 88px;">Year of Birth</td>
<td style="width: 143px;"><input id="Profile_YOB" type="text"></td>
</tr>
<tr>
<td style="height: 31px;">FIDE ID</td>
<td style="height: 31px;"><input id="Profile_FDIDE_ID" type="text"></td>
</tr>
<tr>
<td>Play As</td>
<td align="center"><img src="White-Pawn.png" height="20" width="20"><input name="WhitePlayer" type="checkbox"><img src="Black-Pawn.png" height="20" width="20"><input name="BlackPlayer" type="checkbox">
</td>
</tr>
</tbody>
</table>
<a href="" onclick="javascript:MainMenu();">Menu</a>
</form>

</div>


<!--
*****************************************
The Chess Board
*****************************************
-->

<div id="chessboard" style="position: absolute; left: 0px; top: 0px;">
<img src="ChessBoard.png">
<a href="" onclick="javascript:DoSignature();return false;" style="position: absolute; left: 0px; top: 400px;">Menu</a>
<textarea id="PGNArea" rows="10" cols="40" sytle"position: absolute; top: 600px; left: 500px; visibility: visible;"></textarea>
<img id="BlackPawn1Image" src="Black-Pawn.png" style="position:absolute; width: 50px; height: 50px; top: 0px; left: 0px;" onmousedown="MoveImage(this, event);">
<img id="BlackPawn2Image" src="Black-Pawn.png" style="position:absolute; width: 50px; height: 50px; top: 0px; left: 0px;" onmousedown="MoveImage(this, event);">
<img id="BlackPawn3Image" src="Black-Pawn.png" style="position:absolute; width: 50px; height: 50px; top: 0px; left: 0px;" onmousedown="MoveImage(this, event);">
<img id="BlackPawn4Image" src="Black-Pawn.png" style="position:absolute; width: 50px; height: 50px; top: 0px; left: 0px;" onmousedown="MoveImage(this, event);">
<img id="BlackPawn5Image" src="Black-Pawn.png" style="position:absolute; width: 50px; height: 50px; top: 0px; left: 0px;" onmousedown="MoveImage(this, event);">
<img id="BlackPawn6Image" src="Black-Pawn.png" style="position:absolute; width: 50px; height: 50px; top: 0px; left: 0px;" onmousedown="MoveImage(this, event);">
<img id="BlackPawn7Image" src="Black-Pawn.png" style="position:absolute; width: 50px; height: 50px; top: 0px; left: 0px;" onmousedown="MoveImage(this, event);">
<img id="BlackPawn8Image" src="Black-Pawn.png" style="position:absolute; width: 50px; height: 50px; top: 0px; left: 0px;" onmousedown="MoveImage(this, event);">
<img id="BlackCastle1Image" src="Black-Castle.png" style="position:absolute; width: 50px; height: 50px; top: 0px; left: 0px;" onmousedown="MoveImage(this, event);">
<img id="BlackKnight1Image" src="Black-Knight.png" style="position:absolute; width: 50px; height: 50px; top: 0px; left: 0px;" onmousedown="MoveImage(this, event);">
<img id="BlackRook1Image" src="Black-Rook.png" style="position:absolute; width: 50px; height: 50px; top: 0px; left: 0px;" onmousedown="MoveImage(this, event);">
<img id="BlackKingImage" src="Black-King.png" style="position:absolute; width: 50px; height: 50px; top: 0px; left: 0px;" onmousedown="MoveImage(this, event);">
<img id="BlackQueenImage" src="Black-Queen.png" style="position:absolute; width: 50px; height: 50px; top: 0px; left: 0px;" onmousedown="MoveImage(this, event);">
<img id="BlackRook2Image" src="Black-Rook.png" style="position:absolute; width: 50px; height: 50px; top: 0px; left: 0px;" onmousedown="MoveImage(this, event);">
<img id="BlackKnight2Image" src="Black-Knight.png" style="position:absolute; width: 50px; height: 50px; top: 0px; left: 0px;" onmousedown="MoveImage(this, event);">
<img id="BlackCastle2Image" src="Black-Castle.png" style="position:absolute; width: 50px; height: 50px; top: 0px; left: 0px;" onmousedown="MoveImage(this, event);">

<img id="WhitePawn1Image" src="White-Pawn.png" style="position:absolute; width: 50px; height: 50px; top: 0px; left: 0px;"onmousedown="MoveImage(this, event);">
<img id="WhitePawn2Image" src="White-Pawn.png" style="position:absolute; width: 50px; height: 50px; top: 0px; left: 0px;" onmousedown="MoveImage(this, event);">
<img id="WhitePawn3Image" src="White-Pawn.png" style="position:absolute; width: 50px; height: 50px; top: 0px; left: 0px;" onmousedown="MoveImage(this, event);">
<img id="WhitePawn4Image" src="White-Pawn.png" style="position:absolute; width: 50px; height: 50px; top: 0px; left: 0px;" onmousedown="MoveImage(this, event);">
<img id="WhitePawn5Image" src="White-Pawn.png" style="position:absolute; width: 50px; height: 50px; top: 0px; left: 0px;" onmousedown="MoveImage(this, event);">
<img id="WhitePawn6Image" src="White-Pawn.png" style="position:absolute; width: 50px; height: 50px; top: 0px; left: 0px;" onmousedown="MoveImage(this, event);">
<img id="WhitePawn7Image" src="White-Pawn.png" style="position:absolute; width: 50px; height: 50px; top: 0px; left: 0px;" onmousedown="MoveImage(this, event);">
<img id="WhitePawn8Image" src="White-Pawn.png" style="position:absolute; width: 50px; height: 50px; top: 0px; left: 0px;" onmousedown="MoveImage(this, event);">
<img id="WhiteCastle1Image" src="White-Castle.png" style="position:absolute; width: 50px; height: 50px; top: 0px; left: 0px;" onmousedown="MoveImage(this, event);">
<img id="WhiteKnight1Image" src="White-Knight.png" style="position:absolute; width: 50px; height: 50px; top: 0px; left: 0px;" onmousedown="MoveImage(this, event);">
<img id="WhiteRook1Image" src="White-Rook.png" style="position:absolute; width: 50px; height: 50px; top: 0px; left: 0px;" onmousedown="MoveImage(this, event);">
<img id="WhiteKingImage" src="White-King.png" style="position:absolute; width: 50px; height: 50px; top: 0px; left: 0px;" onmousedown="MoveImage(this, event);">
<img id="WhiteQueenImage" src="White-Queen.png" style="position:absolute; width: 50px; height: 50px; top: 0px; left: 0px;" onmousedown="MoveImage(this, event);">
<img id="WhiteRook2Image" src="White-Rook.png" style="position:absolute; width: 50px; height: 50px; top: 0px; left: 0px;" onmousedown="MoveImage(this, event);">
<img id="WhiteKnight2Image" src="White-Knight.png" style="position:absolute; width: 50px; height: 50px; top: 0px; left: 0px;" onmousedown="MoveImage(this, event);">
<img id="WhiteCastle2Image" src="White-Castle.png" style="position:absolute; width: 50px; height: 50px; top: 0px; left: 0px;" onmousedown="MoveImage(this, event);">

</div>
<!--
************
Record Section
************
-->

<div id="record" name="record" style="position: absolute; left: 0px; top: 0px;">
<form style="height: 178px; width: 249px;" name="Profile">
<table style="text-align: left; width: 249px; height: 201px;" border="1" cellpadding="2" cellspacing="2">
<tr>
<td style="width: 88px;">Tournament</td>
<td style="width: 143px;"><input id="Tournament" type="text"></td>
</tr>
<tr>
<td style="width: 88px;">Country</td>
<td style="width: 143px;"><input id="Country" type="text">
</td>
</tr>
<tr>
<td style="width: 88px;">Date</td>
<td style="width: 143px;"><input name="Profile_Rating" type="text"></td>
</tr>
<tr>
<td style="width: 88px;">Round</td>
<td style="width: 143px;"><input id="Round" type="text"></td>
</tr>
<tr>
<td style="width: 88px;">Section</td>
<td style="width: 143px;"><input name="Profile_YOB" type="text"></td>
</tr>
<tr>
<td style="height: 31px;">Board</td>
<td style="height: 31px;"><input name="Profile_FDIDE_ID" type="text"></td>
</tr>
<tr>
<td>Opponent</td>
<td><input id="Opponent" type="text"></td>
</tr>
<tr>
<td>Rating</td>
<td><input name="Profile_FDIDE_ID" type="text"></td>
</tr>
<tr>
<td>Play As</td>
<td align="center">
<img src="White-Pawn.png" height="20" width="20"><input id="WhitePlayer" type="checkbox">
&nbsp;
<img src="Black-Pawn.png" height="20" width="20"><input id="BlackPlayer" type="checkbox">
</td>
</tr>

</table>
<a href="" onclick="javascript:MainMenu();">Menu</a>
</form>

</div>

<!--
************
Info Section
************
-->

<div id="info" name="record" style="position: absolute; left: 0px; top: 0px;">
<img src="Logo5.jpg" width="350" height="100"><br>
<br>
ScoreMate Version: 1.0<br>
<br>
For Technical Support please contact:<br>
Kevin Johnson<br>
Celtic_Tigger1@hotmail.com<br>
+86 1-314-345-3649<br>
</div>

<!--
*****************************************
Player Profile
*****************************************
-->

<div id="GetSignature">
<Canvas id="SignatureCanvas" Width="400" Height="100" Style="position:absolute; top:0px; left:0px; border:2px solid #cf1313" onmousedown="WriteSignature(this, event);"></Canvas>

<div id="sig1" Style="position:absolute; top:110px; left:0px">
<b>Tournament Director</b>
<br>
<input type="Button" value="Next" onClick="FirstSignatureDone();">
</div>

<div id="sig2" Style="position:absolute; top:110px; left:100px">
<table>
<b>
<td id="PlayerNameSignatureValue">Your Name</td>
</b>
</table>
<br>
<input type="Button" value="Next" onClick="SecondSignatureDone();">
</div>

<div id="sig3" Style="position:absolute; top:110px; left:200px">
<table>
<b>
<td id="OpponentNameSignatureValue">Your Opponent</td>
</b>
</table>
<br>
<input type="Button" value="Finish" onClick="FinishSignatureDone();">
</div>
</div>
</body>
</html>

KevinJohnson
07-02-2009, 10:33 AM
Here are my scripts:

here is: Menu.js



//initialize the Layout

function MainMenu()
{
document.getElementById("menu").style.visibility = "visible";
document.getElementById("chessboard").style.visibility = "hidden";
document.getElementById("record").style.visibility = "hidden";
document.getElementById("profile").style.visibility = "hidden";
document.getElementById("info").style.visibility = "hidden";
document.getElementById("GetSignature").style.visibility = "hidden";
}

//**************
//Menu functions
//**************

function MenuProfile()
{
document.getElementById("profile").style.visibility = "visible";
document.getElementById("menu").style.visibility = "hidden";
document.getElementById("chessboard").style.visibility = "hidden";
document.getElementById("record").style.visibility = "hidden";
}
function MenuDataBank()
{
}

function MenuRecord()
{
document.getElementById("record").style.visibility = "visible";
document.getElementById("menu").style.visibility = "hidden";
}

function MenuPlay()
{
AdjustPieceSize(40);
document.getElementById("chessboard").style.visibility = "visible";
document.getElementById("menu").style.visibility = "hidden";
//document.getElementById("PGNArea").style.visibility = "hidden";

// Print the PGN Header data to the PGNTextArea
WritePGNHeader();
}

function MenuSetup()
{
}

function MenuInfo()
{
document.getElementById("menu").style.visibility = "hidden";
document.getElementById("chessboard").style.visibility = "hidden";
document.getElementById("record").style.visibility = "hidden";
document.getElementById("profile").style.visibility = "hidden";
document.getElementById("info").style.visibility = "visible";
}

function DoSignature()
{
ClearCanvas(); // Paint the canvas White
document.getElementById("chessboard").style.visibility = "hidden";
document.getElementById("sig2").style.visibility = "hidden";
document.getElementById("sig3").style.visibility = "hidden";
document.getElementById("GetSignature").style.visibility = "visible";
document.getElementById("sig1").style.visibility = "visible";

//Change the innerHTML of the Player Signature Lable
NewOpponentName = document.getElementById("Profile_Name").value;
document.getElementById("PlayerNameSignatureValue").innerHTML = NewOpponentName;

//Change the innerHTML of the Opponent Signature Lable
NewPlayerName = NewOpponentName = document.getElementById("Opponent").value;
document.getElementById("OpponentNameSignatureValue").innerHTML = document.getElementById("Opponent").value;

}

Here is the Signature.js file:



function FirstSignatureDone()
{
document.getElementById("sig1").style.visibility = "hidden";
document.getElementById("sig2").style.visibility = "visible";

// Save the First signature to the file system
var FileName = SavePath + FullDate + "Referee_Signature" + FileExtention

// Convert the Canvas into a Base64 Encoded PNG data string
var SignaturePNG = document.getElementById("SignatureCanvas").toDataURL();

SaveToDisk(FileName, SignaturePNG)

// Erease the canvas to prepare for the next signature
ClearCanvas();
}

function SecondSignatureDone()
{
document.getElementById("sig2").style.visibility = "hidden";
document.getElementById("sig3").style.visibility = "visible";
// Save the Second signature to the file system
var FileName = SavePath + FullDate + "Player_Signature" + FileExtention
// Convert the Canvas into a Base64 Encoded PNG data string

var SignaturePNG = document.getElementById("SignatureCanvas").toDataURL();
SaveToDisk(FileName, SignaturePNG)

// Erease the canvas to prepare for the next signature
ClearCanvas();
}

function FinishSignatureDone()
{
// Save the Final signature to the file system
var FileName = SavePath + FullDate + "Opponent_Signature" + FileExtention

// Convert the Canvas into a Base64 Encoded PNG data string
var SignaturePNG = document.getElementById("SignatureCanvas").toDataURL();
SaveToDisk(FileName, SignaturePNG)

// Hide the <DIV> named "Sig3" so that when you go back to the main menu it can not be seen
document.getElementById("sig3").style.visibility = "hidden";
//Return back to the Main Menu
MainMenu();
}


function WriteSignature(element, event)
{
document.addEventListener("mousemove", PenHandler, true);
document.addEventListener("mouseup", upHandler, true);

event.stopPropagation();
event.preventDefault();

function PenHandler(event)
{
var x = event.clientX;
var y = event.clientY;

// mouse event goes here
var canvas = document.getElementById("SignatureCanvas");
var ctx = canvas.getContext("2d");

var PenSize = 1;

// This draws a circle
ctx.fillStyle = "Black";
ctx.beginPath();
ctx.arc(x, y, PenSize, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();

event.stopPropagation();
}

function upHandler(event)
{
document.removeEventListener("mouseup", upHandler, true);
document.removeEventListener("mousemove", PenHandler, true);
event.stopPropagation();
}

}

function ClearCanvas()
{
// Clear the contents of the Canvas

//Draw a rectangle that covers the canvas
var canvas = document.getElementById("SignatureCanvas");
var ctx = canvas.getContext("2d");

ctx.fillStyle = "white";
ctx.fillRect (0, 0, 400, 100);
}

KevinJohnson
07-02-2009, 10:34 AM
Here is the Core.js file:



// Global Variables
var BlockSize = 50;
var d = new Date();
var day = d.getDate();
var month = d.getMonth() + 1;
var year = d.getFullYear();
var FullDate = day + "-" + month + "-" + year
var SavePath = "c:" + String.fromCharCode(92)
var FileExtention = ".png"
var Champion = "";

// Create an Array for storing the Positions of the ChessPieces
var PieceLocationName = [32];
var PieceLocationXcoord = [32];
var PieceLocationYcoord = [32];

function AdjustPieceSize(NewSize)
{
// Adjust the size of the Chess pieces

var ColorPiece = ["White", "Black"];
var PieceName = ["Pawn1", "Pawn2", "Pawn3", "Pawn4", "Pawn5", "Pawn6", "Pawn7", "Pawn8", "Castle1", "Castle2", "Knight1", "Knight2", "Rook1", "Rook2", "King", "Queen"];


for (var ColorIndex = 0; ColorIndex < ColorPiece.length; ColorIndex++)
{
for (var PieceIndex = 0; PieceIndex < PieceName.length; PieceIndex++)
{
var String = ColorPiece[ColorIndex] + PieceName[PieceIndex] + "Image";

document.getElementById( String ).style.width = NewSize;
document.getElementById( String ).style.height = NewSize;
}
}

// Set the chess pieces in the correct place on the chess board
SetPieces();
}

function SetPieces()
{
var LocationArrayIndex = 0;
var Pieces = ["Castle1", "Knight1", "Rook1", "King", "Queen", "Rook2", "Knight2", "Castle2"];

// Put down the Black Pieces On the Top

var PieceIndex = 0;
var PawnIndex = 1;
for (var x = 0; x < BlockSize * 8; x=x+BlockSize)
{
var y = 0;
SetPieceID = "Black" + Pieces[PieceIndex] + "Image";
document.getElementById(SetPieceID).style.left = x + "px"; // Set the Chess Piece in the correct place
document.getElementById(SetPieceID).style.top = y + "px";

// Load the Piece Name and Location into the PieceLocation Array
PieceLocationName[LocationArrayIndex] = SetPieceID;
PieceLocationXcoord[LocationArrayIndex] = x;
PieceLocationYcoord[LocationArrayIndex] = y;

LocationArrayIndex++

document.getElementById("BlackPawn" + PawnIndex + "Image").style.left = x + "px"; // Also set down the pawns
document.getElementById("BlackPawn" + PawnIndex + "Image").style.top = y + BlockSize + "px";

// Load the Pawn Name and Location into the PieceLocation Array
PieceLocationName[LocationArrayIndex] = SetPieceID;
PieceLocationXcoord[LocationArrayIndex] = x;
PieceLocationYcoord[LocationArrayIndex] = y;

PieceIndex++;
PawnIndex++;
LocationArrayIndex++
}

// now put down the white pieces
PieceIndex = 0;
PawnIndex = 1;
for (var x = 0; x < BlockSize * 8; x=x+BlockSize)
{
var y = BlockSize * 7;
SetPieceID = "White" + Pieces[PieceIndex] + "Image";
document.getElementById(SetPieceID).style.left = x + "px"; // Set the Chess Piece in the correct place
document.getElementById(SetPieceID).style.top = y + "px";

// Load the Piece Name and Location into the PieceLocation Array
PieceLocationName[LocationArrayIndex] = SetPieceID;
PieceLocationXcoord[LocationArrayIndex] = x;
PieceLocationYcoord[LocationArrayIndex] = y;

LocationArrayIndex++

document.getElementById("WhitePawn" + PawnIndex + "Image").style.left = x + "px"; // Also set down the pawns
document.getElementById("WhitePawn" + PawnIndex + "Image").style.top = y - BlockSize + "px";

// Load the Pawn Name and Location into the PieceLocation Array
PieceLocationName[LocationArrayIndex] = SetPieceID;
PieceLocationXcoord[LocationArrayIndex] = x;
PieceLocationYcoord[LocationArrayIndex] = y;

PieceIndex++;
PawnIndex++;
LocationArrayIndex++
}
}

function MoveImage(element, event)
{
document.addEventListener("mousemove", moveHandler, true);
document.addEventListener("mouseup", upHandler, true);

event.stopPropagation();
event.preventDefault();

function moveHandler(event)
{
var xOffset = element.width / 2;
var yOffset = element.height /2;

element.style.left = event.clientX - xOffset + "px";
element.style.top = event.clientY - yOffset + "px";
event.stopPropagation();
}

function upHandler(event)
{
document.removeEventListener("mouseup", upHandler, true);
document.removeEventListener("mousemove", moveHandler, true);
event.stopPropagation();
SnapToGrid(event, element);

}

}

function SnapToGrid(e, element)
{
// Get the original positions first

// Get the ID name of the piece that was just moved
ElementToSnap = element.id

// Find the Array Index of the Element that is being moved
for (var x = 0; x < 32; x++)
{
if (PieceLocationName[x] = ElementToSnap)
{
var ArrayIndexOfElement = x;
//return;
}
}

// Get the original piece x and y coordinates
oldXposition = document.getElementById(ElementToSnap).style.left
oldYposition = document.getElementById(ElementToSnap).style.top

// Calculate the new x and y positions
newXposition = (Math.floor(parseInt(e.target.style.left) / BlockSize) * BlockSize) + "px";
newYposition = (Math.floor(parseInt(e.target.style.top) / BlockSize) * BlockSize) + "px";

// is there a piece already located at the newXposotion and newYposition ?

for (var PieceIndex = 0; PieceIndex < 32; PieceIndex++)
{

if (PieceLocationXcoord[PieceIndex] == newXposition)
{
if (PieceLocationYcoord[PieceIndex] == newYposition)
{
// If you got this far, then there is already a piece there

// set that already existing piece's status to hidden
document.getElementById(PieceLocationName[PieceIndex]).style.visibility = "hidden";

// set that piece's data in the PieceLocation[ ] array to null
PieceLocationName[PieceIndex] = "";
PieceLocationXcoord[PieceIndex] = "";
PieceLocationYcoord[PieceIndex] = "";

// add that piece that was set to hidden, and assigned to Null to the TakenPieces[ ] array ******************************* This is Left to do for Later*******************************

// Now that the origional piece has been taken off the board (visually) we can place the correct piece on that square

e.target.style.left = newXposition;
e.target.style.top = newYposition;

// Update it's associated data in the PieceLocation[ ] arrays

PieceLocationXcoord[ArrayIndexOfElement] = newXposition;
PieceLocationYcoord[ArrayIndexOfElement] = newYposition;
}
}
}

// If you got this far, that means there wasn't any other peice in that square, so it's ok to just update the xPosition, yPosition, and the values in array elements

// Move the piece to the new position on the board
e.target.style.left = newXposition;
e.target.style.top = newYposition;

// Update it's associated data in the PieceLocation[ ] arrays

PieceLocationXcoord[ArrayIndexOfElement] = newXposition;
PieceLocationYcoord[ArrayIndexOfElement] = newYposition;

// Update the PGNTextArea data

OldPGNData = document.getElementById("PGNArea").value;
NewPGNData = oldXposition + oldYposition + "-" + newXposition + newYposition + " ";

// Finally update the Data
document.getElementById("PGNArea").value = OldPGNData + NewPGNData;

}

function TestChessRules (e, element, OriginalPosition, NewPosition)
{
// Test to see if the piece that was moved according to international chess rules
}

function SaveToDisk(FileName, Content) {
try {
netscape.security.PrivilegeManager.enablePrivilege("UniversalXPConnect");
} catch (e) {
alert("Permission to save file was denied.");
}
var file = Components.classes["@mozilla.org/file/local;1"]
.createInstance(Components.interfaces.nsILocalFile);
file.initWithPath( FileName );
if ( file.exists() == false ) {
file.create( Components.interfaces.nsIFile.NORMAL_FILE_TYPE, 420 );
}
var outputStream = Components.classes["@mozilla.org/network/file-output-stream;1"]
.createInstance( Components.interfaces.nsIFileOutputStream );

outputStream.init( file, 0x04 | 0x08 | 0x20, 420, 0 );
var output = Content;
var result = outputStream.write( output, output.length );
outputStream.close();
}

function WritePGNHeader()
{
// Write the header information to the PGN TextArea
// Figure out who is the white player
if(document.getElementById("WhitePlayer").value = "true")
{
var WhitePlayer = document.getElementById("Profile_Name").value;
var BlackPlayer = document.getElementById("Opponent").value;
}
else
{
var WhitePlayer = document.getElementById("Opponent").value;
var BlackPlayer = document.getElementById("Profile_Name").value;
}

var PGNEvent = "[Event " + document.getElementById("Tournament").value + "] \n";
var PGNSite = "[Site " + document.getElementById("Country").value + "]\n";
var PGNDate = "[Date " + FullDate + "]\n";
var PGNRound = "[Round " + document.getElementById("Opponent").value + "]\n";
var PGNWhite = "[White " + WhitePlayer + "]\n";
var PGNBlack = "[Black " + BlackPlayer + "]\n";
var PGNResult = "[Result " + Champion + "]\n";

var HeaderString = PGNEvent + PGNSite + PGNDate + PGNRound + PGNWhite + PGNBlack + PGNResult;

// Write the header information to the TEXTAREA
document.getElementById("PGNArea").value = HeaderString;

}

function Debug()
{
// Show the status of all array values


}

Old Pedant
07-02-2009, 09:12 PM
No way I can duplicate all the on my own machine meaningfully. Not with all the images, etc.

And it could take hours to strip it down to something usable only to find that something in the stripping is negating your problem.

I don't suppose you could just show it live someplace, could you??

KevinJohnson
07-03-2009, 12:56 AM
yes, actually i can :)

it has turned out to be a rather large project, but it's pretty much finished right now, just need some debugging.

you can see it live here:

http://daomingjin.googlepages.com/ChessManager.html

i'll need to modify the code a bit though on the HTML, because google pages doesn't allow filenames with a parenthesis in it, but that just breaks the images that are used as buttons on the main menu screen.

KevinJohnson
07-03-2009, 09:13 AM
i changed the HTML code so that it's completable with googlepages. So you can view it live now.

I know i've done DIVs before and the text remained persistent between the different DIVs. I never encountered this problem before.

so anyways...it is now live at the following link:

http://daomingjin.googlepages.com/ChessManager.html


sometimes JavaScript is a royal pain in the ***!

lol

Old Pedant
07-03-2009, 11:44 PM
IGNORE THIS POST...See next one.

Old Pedant
07-04-2009, 05:09 AM
The problem is that *SOMETHING* is reloading your page!

You can see that happen if you change your <body> tag to this:

<body bgcolor="green"
OnLoad="alert('body onload invoked'); MainMenu();"
oncontextmenu="return false;">

You will see that after clicking on the MENU link from the Profile display, you get that alert again. (I also put an alert into MainMenu() which is how I found this out.)


*** I FOUND IT!!! ***


<a href="" onclick="MainMenu();">Menu</a>

So obvious, when you think about it!

WHAT does href="" *really* mean?

Answer: "The current page"!!!

After all, if you use href="./foo.html" it means "current directory, file foo.html, right?

So what is happening is that *FIRST* you invoke MainMenu() from the onclick and *THEN* you go ahead and REFRESH THE PAGE!!!

And MSIE holds onto the form field values when you do that, but FF doesn't.

The answer is dirt simple, and is what you should have been doing all along:


<a href="" onclick="MainMenu();return false;">Menu</a>

*OR* you could have done


<a href="javascript:MainMenu();">Menu</a>

But as coded, it was guaranteed to act as it did.

Incidentally, you have another problem that may eventually come back to bite you (or maybe not, but still...).

You have two <FORM>s with the same name ("Profile"). Worse, those names match the ID of your "Profile" div. This could cause problems, especially with MSIE, down the road. I'd suggest either *NOT* naming the <FORM>s (since you don't give names to your form fields, the forms would have no content at all if submitted to, say, PHP or JSP or ASP) or ensuring that the have unique names. I renamed them "ProfileForm" and "RecordForm" in my copy.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum