Welcome guest, is this your first visit? Create Account now to join.
Results 1 to 4 of 4

This is a discussion on Why does this JS code bother Chrome so? within the Chrome Tech section, part of the Chrome Chat category: Hey all, Sorry if this is in the wrong forum; I'm just really frustrated with this new site I've launched. ...


  1. #1
    clcrhiggaeeermo is offline Junior Member
    Join Date
    Nov 2008
    Posts
    2

    Default Why does this JS code bother Chrome so?

    Hey all,

    Sorry if this is in the wrong forum; I'm just really frustrated with this new site I've launched. Everything works fine except my index page: It displays great on Internet Explorer, but when I try to access it in Chrome, it hangs and never stops loading. So I made a dummy version of the site that had the exact same source, but with the JavaScript taken out, and that displayed (albeit not as well, obviously).

    So my question is: Is there something in this JavaScript code (placed inside my <head> element) that would crash Chrome?

    Code:
    <script type="text/javascript">
    function resizeWindow()
    {
    //Fix the marquee so it doesn't cause a linebreak
    var headwidth = document.getElementById("header").offsetWidth;
    document.getElementById("marquee").style.width = (Math.round(headwidth * .9) - 5);
    
    //Using the new marquee, resize everything
    if(window.innerHeight)
      {
      var winheight = window.innerHeight;
      }
    if(document.body.clientHeight)
      {
      var winheight = document.body.clientHeight;
      }
    if(document.documentElement.clientHeight)
      {
      var winheight = document.documentElement.clientHeight;
      }
    if(!winheight)
      {
      var winheight = "NO";
      }
    var footheight = document.getElementById("footer").offsetHeight;
    var headheight = document.getElementById("header").offsetHeight;
    document.getElementById("footer").style.top = (winheight - footheight - 5)+"px";
    var middleheight = (winheight - headheight - footheight - 30)+"px";
    document.getElementById("center").style.height = middleheight;
    document.getElementById("mainframe").style.height = middleheight;
    document.getElementById("left").style.height = middleheight;
    document.getElementById("right").style.height = middleheight;
    
    var topheight = (headheight + 10)+"px";
    document.getElementById("center").style.top = topheight;
    document.getElementById("left").style.top = topheight;
    document.getElementById("right").style.top = topheight;
    
    }
    
    
    function loadFrames()
    {
    while(document.getElementById("mainframe").src != "i-main.php")
      {
      document.getElementById("loading").innerHTML = "<b>Loading...</b></br>";
      document.getElementById("mainframe").src = "i-main.php";
      document.getElementById("loading").innerHTML = "";
      }
    document.getElementById("shoutbox").src = "http://[CODE REMOVED].shoutboxes.com/";
    }
    </script>
    The <body> tag is
    Code:
    <body onload="resizeWindow();loadFrames();" onResize="resizeWindow()">
    Thanks in advance. Again, if this is in the wrong place, I apologize.

  2. #2
    OddesE is offline Junior Member
    Join Date
    Dec 2008
    Posts
    2

    Default

    From just looking at your code, I'd say it's got something to do with the resizeWindow function. Especially this fragment of code attracts my attention:

    if (!winheight)
    {
    var winheight = "NO";
    }
    Why would you ever want to set variable winheight to "NO"? Is it not a lot clearer to just let it remain null? Isn't that exactly what null means? No value available?

    A few lines on the script uses winheight in a calculation:

    document.getElementById("footer").style.top = (winheight - footheight - 5)+"px";
    I don't know what ("NO" - footheight - 5) + "px" yields, but my guess would be some Javascript error. Change the code to this:

    function resizeWindow()
    {
    //Fix the marquee so it doesn't cause a linebreak
    var headwidth = document.getElementById("header").offsetWidth;
    document.getElementById("marquee").style.width = (Math.round(headwidth * .9) - 5);

    //Using the new marquee, resize everything
    var winheight = null;
    if(window.innerHeight)
    winheight = window.innerHeight;
    if(document.body.clientHeight)
    winheight = document.body.clientHeight;
    if(document.documentElement.clientHeight)
    winheight = document.documentElement.clientHeight;

    if (!winheight) {
    // We were not able to determine winheight... give up
    // alert("Unable to determine height. Giving up");
    return;
    }

    var footheight = document.getElementById("footer").offsetHeight;
    var headheight = document.getElementById("header").offsetHeight;
    document.getElementById("footer").style.top = (winheight - footheight - 5)+"px";
    var middleheight = (winheight - headheight - footheight - 30)+"px";
    document.getElementById("center").style.height = middleheight;
    document.getElementById("mainframe").style.height = middleheight;
    document.getElementById("left").style.height = middleheight;
    document.getElementById("right").style.height = middleheight;

    var topheight = (headheight + 10)+"px";
    document.getElementById("center").style.top = topheight;
    document.getElementById("left").style.top = topheight;
    document.getElementById("right").style.top = topheight;
    }
    This way you won't get an incorrect calculation if winheight can't be determined, but instead the window just won't get resized.
    Uncomment the alert inside the if to see wheter the script is able to determine the winheight on Chrome. If the alert fires, that was probably the cause.

  3. #3
    OddesE is offline Junior Member
    Join Date
    Dec 2008
    Posts
    2

    Default

    Having looked at your code again I am now suspecting the function loadFrames to be the culprit; you experience a hanging page and loadFrames contains a while that may never terminate.

    Use an alert to check the value of mainframe's src attribute like so:

    function loadFrames() {
    while(...) {
    // ... existing code ...

    var mainFrame = document.getElementById("mainframe");
    if (! confirm("mainFrame.src=" + mainframe.src +
    "\nPress Cancel to terminate while loop.")) {
    return;
    }
    // ... existing code ...
    }
    }
    Make sure it matches the string you are checking for in the while condition. Happy bug hunting :-)

  4. #4
    clcrhiggaeeermo is offline Junior Member
    Join Date
    Nov 2008
    Posts
    2

    Default

    Quote Originally Posted by OddesE View Post
    Why would you ever want to set variable winheight to "NO"? Is it not a lot clearer to just let it remain null? Isn't that exactly what null means? No value available?
    I'm not gonna lie, I hacked this code together from samples on Javascript-helper websites. Maybe there's some old version of IE or Netscape that preferred "NO", and so the original writer included that just to be sure?

Posting Permissions

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