Some final questions about onload and onresize

PapaGeek · 08-31-2010, 06:17 PM

Some final questions about onload and onresize

I've been working about two weeks on a script that can accurately determine the width of the browser window. I think I have my test page showing everything now (code at end of post).

Line 3 on each test shows the sequence of events as the web page sees them. The first letter indicates the onLoad or onResize event, the numbers tell the second and millisecond when the event occurred, red events were ignored because the page width did not change and green events updated the page display. Line 1 or 2 is updated depending on the event and line 4 is updated whenever the script is actually run.

Save the code to disk and double click it to open a browser window and display the page:

Code:

At ??:?? onload calculated a page width of Jave Script did not run yet.
At 49:10.182 onresize calculated a page width of 984.
Sequence: set onResize L10.166x R10.182 R10.182x 
The last Green event in the sequence calculated the page as 984 pixels wide.

The script initializes "lastWidth" as zero. The red L10.166x above indicates that when the browser window is first created and triggers the onload event it does not know the window size within the DOM. It must still think it is zero, or the script would have run and displayed as green.
A resize event was triggered when the actual width was updated in the DOM. Why did this event trigger twice?

resize the page:

Code:

At ??:?? onload calculated a page width of Jave Script did not run yet.
At 49:29.874 onresize calculated a page width of 1006.
Sequence: set onResize L10.166x R10.182 R10.182x R29.874 R29.874x 
The last Green event in the sequence calculated the page as 1006 pixels wide.

The same page is still in the browser memory and the resize event was triggered twice when the actual width was updated in the DOM.

reload the page with F5

Code:

At 49:48.613 onload calculated a page width of 1006.
At ??:?? onresize calculated a page width of Jave Script did not run yet.
Sequence: set onResize L48.613 
The last Green event in the sequence calculated the page as 1006 pixels wide.

When the page was reloaded with F5, the DOM already knew the size of the window because it already existed.
The onload event recognized the change in width and ran the script.
When the DOM was updated after this page loaded, the size was the same, so the onresize event did not occur.

resize the page again

Code:

At 49:48.613 onload calculated a page width of 1006.
At 50:8.384 onresize calculated a page width of 966.
Sequence: set onResize L48.613 R8.384 R8.384x 
The last Green event in the sequence calculated the page as 966 pixels wide.

The same page is still in the browser memory and the resize event was triggered twice when the actual width was updated in the DOM.

I ran this on IE8, XP pro. Can I get some help from the group? Can you run this on your systems and let me know if the results are the same.

Thanks in advance

PapaGeek!

Code:

<!-- saved from url=(0014)about:internet -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
  <HEAD>
    <TITLE>Display window size</TITLE>
<SCRIPT language="JavaScript">
var runs = "";
var lastWidth = 0;
function showWid2()
{
  //<BODY onload=showWid2() onresize=showWid3()>
  if (window.onresize == null) {
    window.onresize=showWid3;
    runs = runs + " set onResize";
  }
  
  var wid2 = screen.width;
  if (document.layers) {
      wid2= window.innerWidth;
  }
  // Explorer 6 Strict Mode 
  else if (document.documentElement && document.documentElement.clientWidth) {
      wid2 = document.documentElement.clientWidth;
  }
  else if (document.all) {
      wid2 = document.body.clientWidth;
  }
  else {
      wid2 = "Unknown DOM";
  }
  var currentTime = new Date()
  var minutes = currentTime.getMinutes()
  var seconds = currentTime.getSeconds()
  var millis = currentTime.getMilliseconds()
  if (lastWidth == wid2) {
    runs = runs + " <font color=red>L" + seconds + "." + millis + "x<font color=black>";
    document.getElementById("showList").innerHTML = runs;
  }
  else
  {
    runs = runs + " <font color=green>L" + seconds + "." + millis + "<font color=black>";
    lastWidth = wid2;
    document.getElementById("widthOfPage").innerHTML = wid2;
    document.getElementById("showWidthOnLoad").innerHTML = wid2;
    document.getElementById("showOnLoadTime").innerHTML = minutes + ":" + seconds + "." + millis;
    document.getElementById("showList").innerHTML = runs;
  }
}
function showWid3()
{
  var wid3 = screen.width;
  if (document.layers) {
      wid3= window.innerWidth;
  }
  // Explorer 6 Strict Mode 
  else if (document.documentElement && document.documentElement.clientWidth) {
      wid3 = document.documentElement.clientWidth;
  }
  else if (document.all) {
      wid3 = document.body.clientWidth;
  }
  else {
      wid3 = "Unknown DOM";
  }
  var currentTime = new Date()
  var minutes = currentTime.getMinutes()
  var seconds = currentTime.getSeconds()
  var millis = currentTime.getMilliseconds()
  if (lastWidth == wid3) {
    runs = runs + " <font color=red>R" + seconds + "." + millis + "x<font color=black>";
    document.getElementById("showList").innerHTML = runs;
  }
  else
  {
    runs = runs + " <font color=green>R" + seconds + "." + millis + "<font color=black>";
    lastWidth = wid3;
    document.getElementById("widthOfPage").innerHTML = wid3;
    document.getElementById("showWidthOnResize").innerHTML = wid3;
    document.getElementById("showOnResizeTime").innerHTML = minutes + ":" + seconds + "." + millis;
    document.getElementById("showList").innerHTML = runs;
  }
}

</SCRIPT>
  </HEAD>
  <BODY onload=showWid2()>
    <ol>
    <li>At <b id=showOnLoadTime>??:??</b> onload calculated a page width of <b id=showWidthOnLoad>Jave Script did not run yet</b>.</li>
    <li>At <b id=showOnResizeTime>??:??</b> onresize calculated a page width of <b id=showWidthOnResize>Jave Script did not run yet</b>.</li>
    <li>Sequence: <b id=showList>??</b></li>
    <li>The last <font color=green><b>Green</b><font color=black> event in the sequence calculated the page as <b id=widthOfPage>00</b> pixels wide.</li>
    </ol>
  </BODY>
</HTML>

Thread Tools
Show Printable Version Email this Page
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode