Jump to content

Some final questions about onload and onresize

PapaGeek

By PapaGeek
in JavaScript

Recommended Posts

PapaGeek Newbie

PapaGeek

Posted
Posted

Some final questions about onload and onresizeI'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:

  1. At ??:?? onload calculated a page width of Jave Script did not run yet.
  2. At 49:10.182 onresize calculated a page width of 984.
  3. Sequence: set onResize L10.166x R10.182 R10.182x
  4. 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:

  1. At ??:?? onload calculated a page width of Jave Script did not run yet.
  2. At 49:29.874 onresize calculated a page width of 1006.
  3. Sequence: set onResize L10.166x R10.182 R10.182x R29.874 R29.874x
  4. 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

  1. At 49:48.613 onload calculated a page width of 1006.
  2. At ??:?? onresize calculated a page width of Jave Script did not run yet.
  3. Sequence: set onResize L48.613
  4. 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

  1. At 49:48.613 onload calculated a page width of 1006.
  2. At 50:8.384 onresize calculated a page width of 966.
  3. Sequence: set onResize L48.613 R8.384 R8.384x
  4. 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 advancePapaGeek!

<!-- 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>

Link to comment
Share on other sites
thescientist w3schools Guru

thescientist

Posted
Posted
Trying to find a solution that works on all browsers all the time is a good reason to drink.I love standards, there are so many to choose from!
isn't that kind of the opposite of a standard?
Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...