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 12 of 12
  1. #1
    Regular Coder
    Join Date
    May 2009
    Location
    China
    Posts
    133
    Thanks
    1
    Thanked 1 Time in 1 Post

    Text Fields clearing when switching between <DIV>s

    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!

    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:


    Code:
    //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);
    }

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    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?

  • #3
    Regular Coder
    Join Date
    May 2009
    Location
    China
    Posts
    133
    Thanks
    1
    Thanked 1 Time in 1 Post
    i'm using FireFox.

  • #4
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    That's what I tested with. Must be something else on the page.

  • #5
    Regular Coder
    Join Date
    May 2009
    Location
    China
    Posts
    133
    Thanks
    1
    Thanked 1 Time in 1 Post
    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="javascriptoSignature();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>

  • #6
    Regular Coder
    Join Date
    May 2009
    Location
    China
    Posts
    133
    Thanks
    1
    Thanked 1 Time in 1 Post
    Here are my scripts:

    here is: Menu.js

    Code:
    //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:
    
    
    Code:
    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);
    }

  • #7
    Regular Coder
    Join Date
    May 2009
    Location
    China
    Posts
    133
    Thanks
    1
    Thanked 1 Time in 1 Post
    Here is the Core.js file:

    Code:
    // 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
     
     
    }

  • #8
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    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??

  • #9
    Regular Coder
    Join Date
    May 2009
    Location
    China
    Posts
    133
    Thanks
    1
    Thanked 1 Time in 1 Post
    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.

  • #10
    Regular Coder
    Join Date
    May 2009
    Location
    China
    Posts
    133
    Thanks
    1
    Thanked 1 Time in 1 Post
    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
    Last edited by KevinJohnson; 07-03-2009 at 09:17 AM.

  • #11
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    IGNORE THIS POST...See next one.
    Last edited by Old Pedant; 07-04-2009 at 05:12 AM. Reason: Wrong answer

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,020
    Thanks
    75
    Thanked 4,323 Times in 4,289 Posts
    The problem is that *SOMETHING* is reloading your page!

    You can see that happen if you change your <body> tag to this:
    Code:
    <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!!! ***
    Code:
    <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:
    Code:
    <a href="" onclick="MainMenu();return false;">Menu</a>
    *OR* you could have done
    Code:
    <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.
    Last edited by Old Pedant; 07-04-2009 at 05:15 AM. Reason: typos and addenda


  •  

    Posting Permissions

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