Why does this JS code bother Chrome so?

**clcrhiggaeeermo** · 11-30-2008, 05:14 AM

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.

**OddesE** · 12-15-2008, 04:42 PM

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.

**OddesE** · 12-16-2008, 05:09 PM

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 :-)

**clcrhiggaeeermo** · 02-11-2009, 04:10 AM

Originally Posted by OddesE

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?

LinkBack

Thread Tools

Display

Why does this JS code bother Chrome so?

Posting Permissions