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 2 of 2
  1. #1
    Regular Coder
    Join Date
    Aug 2003
    Location
    scotland, edinburgh
    Posts
    176
    Thanks
    5
    Thanked 1 Time in 1 Post

    when page loads it displays hidden area then hides it

    Yeah below I have that script that hides these two things then when the approprate link is clicked it shows 1 of the 2 things depending on the link pressed

    But the problem comes when what I want to hide contains a whole lot of text with pictures for some strange reason as the page loads it displays all the hidden stuff (text pictures and all) then makes them disapear but i dont want this i want it not to show at all till a link has been pressed

    Heres the code I have at the moment

    PHP Code:
    <html>
    <
    script type="text/javascript">
    function 
    hideFileInputs(){
      for (var 
    i=1;i<=2;i++){
        
    document.getElementById("row"+i+"").style.display="none";
      }
    }
    </script>
    <script language=JavaScript>
    function hideRow(obj) {
        for (var x=1;x<=2;x++){
            if (document.getElementById("row"+x+"").style.display == ""){
                   document.getElementById("row"+x+"").style.display = "none";
            }
        }
        if (document.getElementById(obj).style.display != ""){
                   document.getElementById(obj).style.display = "";
        } else {
            document.getElementById(obj).style.display = "none";
        }
    }

    </script>
    <body onload="hideFileInputs()">
    <div align="center">
        <a href="#" onclick="hideRow('row1')">Hide/Show row1</a>
        <a href="#" onclick="hideRow('row2')">Hide/Show row2</a>
      <br>
      <br>
    </div>
    <form name="form1" method="post" action="">
    <div id="row1">
    <table width="10" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td colspan="3"><img src="../images/infobox_03.gif" width="200" height="34"></td>
            </tr>
          <tr>
            <td width="15" background="../images/infobox_05.gif">&nbsp;</td>
            <td width="172" background="../images/infobox_06.gif"><span class="bod">GAME SERVERS CONTROLLED<br>
    Some Big pics and stuff here          <p></p></td>
            <td width="13" background="../images/infobox_07.gif">&nbsp;</td>
          </tr>
          <tr>
            <td colspan="3"><img src="../images/infobox_09.gif" width="200" height="31"></td>
            </tr>
        </table>
    </div>
    <div id="row2">
    <table width="10" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td colspan="3"><img src="../images/infobox_03.gif" width="200" height="34"></td>
            </tr>
          <tr>
            <td width="15" background="../images/infobox_05.gif">&nbsp;</td>
            <td width="172" background="../images/infobox_06.gif"><span class="bod">GAME SERVERS CONTROLLED<br>
              This is the max number of game servers that the version can control.
    pauhdsfpahfadh              -Enter any RCON command and get the results of that command.</p>
              <p></p></td>
            <td width="13" background="../images/infobox_07.gif">&nbsp;</td>
          </tr>
          <tr>
            <td colspan="3"><img src="../images/infobox_09.gif" width="200" height="31"></td>
            </tr>
        </table>
    </div></form>
    <p align="center">This is test text to see what happens </p>
    </body>
    </html> 
    Thanks hope you can help
    Last edited by tsclan; 01-29-2005 at 12:20 PM.

  • #2
    Regular Coder
    Join Date
    Jul 2004
    Location
    mile high city
    Posts
    482
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It likely has to do with the 'body onload'. The browser's not executing the script until the rest of the page is loaded.

    This article explains how to compensate:
    The silent tears of the onload event
    It is a public secret that the window.onload event lies at the core of this problem. It will only execute after the whole document, including all page assets like images and objects, is loaded. So if you work with a lot of content, a series of images or a slow server, you will always experience this negative side-effect.

    When you apply unobtrusive behavior, the window.onload event by itself is a poor tool. What we ideally would like to use is an event handler that executes as soon as a certain element is loaded, or one that fires after the document structure is read and before any assets are loaded, like Peter-Paul Koch suggested. Unfortunately these events do not exist yet. It seems that developers around the world will keep on hitting this same brick wall, until a set of additional load events are added to the JavaScript specifications.

    A band-aid while awaiting the real cure
    To solve this display issue, we could add the IDs or classes of our toggleable elements to our CSS file and give it a default display: none; declaration. However by doing this we would breach the accessibility of our document, because when JavaScript is unsupported or disabled, all toggleable elements will be hidden.

    The solution is very close. If we would put these style declarations in a separate external CSS file and would call this file from our linked JavaScript file, this would solve both our problems. First the styles that hide the toggleable sections will be loaded as soon as our external JavaScript file is included and executed in the head of our document. Second, this CSS file will only be loaded when JavaScript is available.

    So a document.write('<link rel="stylesheet" type="text/css" href="js_hide.css" />'); would do the trick. We should only load this style sheet when there is enough W3C DOM support to add the actual show/hide behavior.
    Computer, kill Flanders... Did I hear my name? My ears are burning...
    Good start. Now finish the job.


  •  

    Posting Permissions

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