onresize ?

[PapaGeek]

On Edit, the next day: I added a good example of what I'm asking about 5 or 6 posts down. You can copy the code and run it on your own PC! Should have done this in the first place, Sorry 'bout that!I'm writing a script that wants to know the width of the display window. "Sometimes" when I call the script it sees the window as zero pixels wide. I think this is due to the page not being completely loaded at the "onload" event -- sometimes, on some browsers, a timing issue. If I test for zero and also set the "window.onresize" event to call the script again, it all works fine.This is why I'm confused! I've read in a few places that onresize is not actually supported as part of the body tag even though most browsers do allow it. On this site, the DOM Body page only shows onload as a legal body event, but it also states that "The body object also supports the standard properties, methods, and events." One of which is onresize.The window object does not even mention onresize.When working with Komodo, TopStyle, and others, onresize does not appear as a legal attribute of body.So, why does onresize work as a window attribute when it isn't even mentioned?If it truly supported by the body tag, then why doesn't an editor like Komodo reference it?I'm looking for a method of calling this script that will work on all browsers. I want the script to be able to find out the width of the page when it is called.I love standards. There are so many to choose from!

[dsonesuk]

this script will give available width within the body, and actual user screen size.window.onload=function(){alert(document.body.offsetWidth)alert(screen.availWidth)

[PapaGeek]

this script will give available width within the body, and actual user screen size.window.onload=function(){alert(document.body.offsetWidth)alert(screen.availWidth)

I ran a similiar script off the body onload event and found that on "some" browsers, when the page was complex, the offset Width came back as zero at onload. If I kicked off the script with a timer offset of 1/2 second or ran it at the onresize event it alwasy gave teh correct value.It has somethign to do with when the DOM is updated. If the page is still being rendered when the onload event triggers, sometimes the dom does not know the sizes yet.For example, if large graphics are being loaded and the page is taking a long time to load.

[dsonesuk]

strange as this script, should run when page is fully rendered.

[PapaGeek]

strange as this script, should run when page is fully rendered.

I should have given an example from the start. The code at the end of this post displays 3 lines, each of which is supposed to display the inner width of the browser window.The top line, show width 1, is filled in by an inline script inserted in the body after the 3 display lines.The middle line, show width 2, is a function defined in the head section and kicked off by the onload event of the body tag.The last line, show width 3, is a function that is also defined in the head section and kicked off as window.onresize by the show width 2 script. This works the same when you remove the window.resize line and add the onresize event to the body tag.I'm running XP professional 64-bit and Explorer 8. I saved the code to my hard drive and here is the results and what I think is happening.Double click the file, window maximized:This page is 0 pixels wide.This page is 0 pixels wide.This page is 1897 pixels wide.During the load and at load the DOM does not know the width of the window yet. When the page is complete the DOM is updated and the change in the window size triggers the onresize event and the third width is updated correctly.Double click the title bar to unmaximize the window and the display changes to:This page is 0 pixels wide.This page is 0 pixels wide.This page is 929 pixels wide.The page was not reloaded, so the first two lines remain the same, it was resized so the third line changes.Hit F5 to refresh the screen:This page is 929 pixels wide.This page is 929 pixels wide.This page is No Jave Script pixels wide.The page was refreshed with the DOM already knowing the width of the page so lines one and two displayed the proper width. It was not resized, so line 3 was not refreshed and the original text remained.Resize the window:This page is 929 pixels wide.This page is 929 pixels wide.This page is 808 pixels wide.The dom initially knew the old size when it was refreshed, so lines one and two did not change. Line three was updated after the window size was updated in the DOM.I hope everyone followed the logic of what might have been happening. Can anyone tell me where I'm going wrong on this? And back to my original question, how can I reliably determine the width of a page?Here is the actual page 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">function showWid2(){  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";	  }  document.getElementById("showWidth2").innerHTML = wid2;  window.onresize=showWid3}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";	  }  document.getElementById("showWidth3").innerHTML = wid3;}</SCRIPT>  </HEAD>  <BODY onload=showWid2()>	<p>This page is <b id=showWidth1>No Jave Script</b> pixels wide.</p>	<p>This page is <b id=showWidth2>No Jave Script</b> pixels wide.</p>	<p>This page is <b id=showWidth3>No Jave Script</b> pixels wide.</p><script language="JavaScript"><!--  var width = screen.width;	  if (document.layers) {	  width= window.innerWidth;	  }	  // Explorer 6 Strict Mode 	  else if (document.documentElement && document.documentElement.clientWidth) {	  width = document.documentElement.clientWidth;	  }	  else if (document.all) {	  width = document.body.clientWidth;	  }	  else {		  width = "Unknown DOM";	  }  document.getElementById("showWidth1").innerHTML = width;//--></SCRIPT>  </BODY></HTML>

[dsonesuk]

OK! I see you problem, iIE seems to loop through the onresize twice, and over writing the value for previous with current value...good ole IEthe only solution i can come up with is to use conditional comments to separate crap IE from good browsers, this works in IE8/7 Compatible, FF and Opera.<script type="text/javascript">var count=0;window.onload=function(){document.getElementById("startwidth").innerHTML=document.body.offsetWidth;document.getElementById("previouswidth").innerHTML=document.body.offsetWidth;document.getElementById("currentwidth").innerHTML=document.body.offsetWidth;}</script><!--[if IE]><script type="text/javascript">window.onresize = function(){count++;if(count %2 != 0){document.getElementById("previouswidth").innerHTML=document.getElementById("currentwidth").innerHTML;document.getElementById("currentwidth").innerHTML=document.body.offsetWidth;}}</script><![endif]--><![if !IE]><script type="text/javascript">window.onresize = function(){document.getElementById("previouswidth").innerHTML=document.getElementById("currentwidth").innerHTML;document.getElementById("currentwidth").innerHTML=document.body.offsetWidth;}</script><![endif]><div>Start Body Width of Page: <span id="startwidth"></span>px</div><div>Previous Body Width of Page: <span id="previouswidth"></span>px</div><div>Start Body Width of Page: <span id="currentwidth"></span>px</div>

[PapaGeek]

Thank you for the reply. I may not have been specific enough with my problem.I'm looking for a way to write a reliable script that will always be executed once when a page is displayed and always know the correct page size. I know of only 3 ways to run a script. Write it inside the body tag so it runs in line.Run it at the on load event.Run it at the on resize event.There are other ways, but they require manual intervention.If you look at the results in my previous post, the in line and on load scripts do not know the size of the page when they run. I'm fairly certain that at least IE, maybe other browsers also, run these scripts before the DOM is updated. They accidently know the correct size when the page is refreshed, but that is just because the DOM still has the old values and those values didn't change.The on resize always knows the correct value, it seems that the on resize event occurs when the DOM is updated. The problem is that on resize does not run when the page is merely refreshed because the DOM values are not changed, they are the same!It is a catch-22 situation. On resize seems to have the correct value, but it does not get triggered during a refresh. Is there an on refresh event that I don't know about?I want to write a script that will be run only one time each time a page is displayed, and I want that script to know the size of the inner window that the page is displayed in.Was that clearer?I speak to computers better than I speak to humans!!!

[dsonesuk]

what i get with your script isafter allowing blocked contentThis page is 1419 pixels wide.This page is 1419 pixels wide.This page is 1419 pixels wide.------------------------------This page is 1419 pixels wide.This page is 1419 pixels wide.This page is 859 pixels wide.---------------------------This page is 859 pixels wide.This page is 859 pixels wide.This page is No Jave Script pixels wide.----------------------------This page is 859 pixels wide.This page is 859 pixels wide.This page is 476 pixels wide.The values for 'showWidth1' and 'showWidth2', are gained basically from the same method, one waits for the page to finish loading completely, before getting the width, an being able to add this to 'showWidth2' element, the other waits until the element 'showWidth1' element is rendered before getting width an adding the value. That is why they produce the same values throughout.the window.onload is used to do the latter to avoid adding javascript within body.the No 'javascript' in the third test, and in first for IE6, can easily be avoided by using the window onload to get the width, exactly like 'showWidth2' element, and is used only once when the page loaded/refreshed. The rest of the time the 'showWidth3' element will be updated when the page is resized.

[PapaGeek]

Thanks dsonesuk,Can I assume that "allowing blocked content" is something that you had to set in your browser preferences, something I would not have control over from my web pages?Your run also shows my dilemma. In run 3, hitting F5, the on load script ran and did know the correct width at load time. The on resize did not run because the size of the window did not change.In runs 2 and 4 the size of the page did change in both cases. The on load ran when it the page loaded, but did not know the correct width of the page, then, on resize ran and did know the correct width.The point I'm making, the thing I'm trying to figure out, is how to write a single script that is executed only one time each and every time the page is displayed and knows the correct page width.On load is run every time, but doesn't always report the correct page width.On resize always knows the correct page width, but doesn't run every time.The only solution I see is to run both and have the on load perform the desired actions based on the size it sees except when that size is zero, then if the on resize also fires, have it perform the same actions again. If the sizes are the same, no harm done. If they are different, the page might blink the wrong result for a split second.Is there a better way?

[PapaGeek]

This gets better all the time: I modified my script to indicate when each function is run. The code is at the end of this post. I added a global counter var at the beginning of the script in the head section.I added 1 to the global var before I displayed the in line value, 10 before I displayed the on load value, and 100 before I displayed the on resize value. Here are the new results:Save the script to disk and double click it:This page is 0 at 1 pixels wide, in line code.This page is 0 at 11 pixels wide, on load.This page is 1897 at 211 pixels wide, on resize.Note that the resize ran twice!Double click the title bar to unmaximize!This page is 0 at 1 pixels wide, in line code.This page is 0 at 11 pixels wide, on load.This page is 718 at 411 pixels wide, on resize.Looks like only the resize script ran, not the on load scripts!Double click twice more to maximize and unmaximize again:This page is 0 at 1 pixels wide, in line code.This page is 0 at 11 pixels wide, on load.This page is 718 at 811 pixels wide, on resize.Yup, only the resize ran!Hit F5This page is 718 at 1 pixels wide, in line code.This page is 718 at 11 pixels wide, on load.This page is No Jave Script pixels wide, on resize.Must have done a reload because the widths on line 1 and 2 changed, but resize did not run!Resized the window:This page is 718 at 1 pixels wide, in line code.This page is 718 at 11 pixels wide, on load.This page is 733 at 211 pixels wide, on resize.and resized again:This page is 718 at 1 pixels wide, in line code.This page is 718 at 11 pixels wide, on load.This page is 744 at 411 pixels wide, on resize.It looks like the on load does not run every time and the on resize runs twice every time the size is changed!Looks like web development is a great excuse to drink!Here's the new script:

<!-- 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 cntr = 0;function showWid2(){  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";	  }  cntr += 10;  document.getElementById("showWidth2").innerHTML = wid2 + " at " + cntr;  window.onresize=showWid3}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";	  }  cntr += 100;  document.getElementById("showWidth3").innerHTML = wid3 + " at " + cntr;}</SCRIPT>  </HEAD>  <BODY onload=showWid2()>	<p>This page is <b id=showWidth1>No Jave Script</b> pixels wide, in line code.</p>	<p>This page is <b id=showWidth2>No Jave Script</b> pixels wide, on load.</p>	<p>This page is <b id=showWidth3>No Jave Script</b> pixels wide, on resize.</p><script language="JavaScript"><!--  var width = screen.width;	  if (document.layers) {	  width= window.innerWidth;	  }	  // Explorer 6 Strict Mode 	  else if (document.documentElement && document.documentElement.clientWidth) {	  width = document.documentElement.clientWidth;	  }	  else if (document.all) {	  width = document.body.clientWidth;	  }	  else {		  width = "Unknown DOM";	  }  cntr += 1;  document.getElementById("showWidth1").innerHTML = width  + " at " + cntr;//--></SCRIPT>  </BODY></HTML>

[ShadowMage]

I can't say why the onload isn't firing when you first load the page, but from my understanding it's not supposed to run when the window is resized. When you resize a window the document is not reloaded, it is simply re-rendered, meaning that all the content is already loaded it just needs to be restyled. So this means that any inline code (since it's supposed to run as the page is loading, which might also explain why this doesn't return a width when you load the page) and any code in the onload event will not run when you resize.

[PapaGeek]

Sounds like what I'm seeing with the latest revision to my test script.Here is a new question, why does the on-resize code run twice?I added a global variable to my script that I concatenate the run time milliseconds to, prefixed with which routine ran each time. I also added the time to the display. The actual code will follow this post as usual.Saved the code to disk and double clicked to open browser with it:This page is 0 at 1 33:49.476 pixels wide, in line code.This page is 0 at 11 33:49.491 pixels wide, on load.This page is 1897 at 211 33:49.491 millis I476 L491 R491 R491 pixels wide, on resize.The "I"nline code ran first at 476ms but did not know the page width.The on"L"oad code ran next at 491ms and again did not know the page width.The on"R"esize code was started at the same 491ms "TWICE" and did know the page width.I double clicked the title bar to un-maximize the windowThis page is 0 at 1 33:49.476 pixels wide, in line code.This page is 0 at 11 33:49.491 pixels wide, on load.This page is 1214 at 411 34:30.127 millis I476 L491 R491 R491 R127 R127 pixels wide, on resize.The in line and on load code did not run again. The times did not change on the screen!The on resize did run "TWICE" again and did know the new page width.Hit F5 to refresh the screen.This page is 1214 at 1 35:19.748 pixels wide, in line code.This page is 1214 at 11 35:19.748 pixels wide, on load.This page is Jave Script did not run pixels wide, on resize.I only display the millis on the resize line, so Can't tell at this point the order of running, but the first two lines did change with the proper page width.I resized the screen manuallyThis page is 1214 at 1 35:19.748 pixels wide, in line code.This page is 1214 at 11 35:19.748 pixels wide, on load.This page is 1223 at 211 35:28.357 millis I748 L748 R357 R357 pixels wide, on resize.I can tell by the millis that the in line and on load code did indeed run when I hit F5, but not when I resized the screen. Again, the on resize code ran twice and did know the new page size.Why does on-resize run twice?How can I write a reliable script that will run once every time the page is displayed, and know the proper page width.Looks like I have to run the script twice, at on load and again at on resize. I can then abort the script if it thinks the size is zero. Should I create a global variable to remember to last width, initialize it to zero and abort the script if the width doesn't change?

<!-- 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 cntr = 0;var runs = " millis";function showWid2(){  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()  runs = runs + " L" + millis  cntr += 10;  document.getElementById("showWidth2").innerHTML = wid2 + " at " + cntr + " " + minutes + ":" + seconds + "." + millis;  //window.onresize=showWid3}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()  runs = runs + " R" + millis  cntr += 100;  document.getElementById("showWidth3").innerHTML = wid3 + " at " + cntr + " " + minutes + ":" + seconds + "." + millis+runs;}</SCRIPT>  </HEAD>  <BODY onload=showWid2() onresize=showWid3()>	<p>This page is <b id=showWidth1>Jave Script did not run</b> pixels wide, in line code.</p>	<p>This page is <b id=showWidth2>Jave Script did not run</b> pixels wide, on load.</p>	<p>This page is <b id=showWidth3>Jave Script did not run</b> pixels wide, on resize.</p><script language="JavaScript"><!--  var width = screen.width;	  if (document.layers) {	  width= window.innerWidth;	  }	  // Explorer 6 Strict Mode 	  else if (document.documentElement && document.documentElement.clientWidth) {	  width = document.documentElement.clientWidth;	  }	  else if (document.all) {	  width = document.body.clientWidth;	  }	  else {		  width = "Unknown DOM";	  }  var currentTime = new Date()  var minutes = currentTime.getMinutes()  var seconds = currentTime.getSeconds()  var millis = currentTime.getMilliseconds()  runs = runs + " I" + millis  cntr += 1;  document.getElementById("showWidth1").innerHTML = width  + " at " + cntr + " " + minutes + ":" + seconds + "." + millis;//--></SCRIPT>  </BODY></HTML>

[dsonesuk]

I know onresize runs twice in ie, i pointed that out in post 6, with solution. I don't know why your onload and inline script, does not run first time, to produce the width values required, they do on mine, and they don't change until the page is refreshed, they should produce exactly the same duplicate values each time.

[PapaGeek]

I know onresize runs twice in ie, i pointed that out in post 6, with solution. I don't know why your onload and inline script, does not run first time, to produce the width values required, they do on mine, and they don't change until the page is refreshed, they should produce exactly the same duplicate values each time.

It may have to do with allowing blocked content, but at least it consistently comes back with a zero width when it does that, and then it always does a resize with the correct value.I fee pretty safe running the script at both onload and onresize and just ignoring zero width results if they occur.The main purpose of the script is to activate one css file from a series of alternate css files based on page width. I think this will solve my sporadic failures.I think I mentioned this before, I will publish my script once it is complete, freeware!Many thanks to all who responded to this thread!

[ShadowMage]

I know onresize runs twice in ie, i pointed that out in post 6, with solution. I don't know why your onload and inline script, does not run first time, to produce the width values required, they do on mine, and they don't change until the page is refreshed, they should produce exactly the same duplicate values each time.

You actually wouldn't have to do the conditional comments though. In browsers that only run it once the count will never reach 2, so it won't matter. No need to clutter the script with unnecessary code.BTW, I'd use this:if (count > 1) {as the conditional instead of:if (count%2 != 0) { Just to be safe. (Plus it's shorter. )

[dsonesuk]

problem is opera will run it twice, if available, that's why i had to separate them;

[ShadowMage]

problem is opera will run it twice, if available, that's why i had to separate them;

Ok, now I'm confused. Why does Opera run it twice if you don't separate them? It shouldn't. If count reaches 2 then it should fail the conditional and not execute.

[dsonesuk]

you know what, you a absolutly right! you don't need !IE conditioner, but if you use if(count>1){you have to reset it again to reuse onresize, else you only can use it once to retrieve screen size.

[PapaGeek]

Why not put in a test for changed width.Initialize the var to zeroTest if the new width is different. If it is the same, abort the code, if it changes, remember the new width and run the code.If you just run off of count, when onload runs with the zero value will block the later call to onresize with the correct value.

[ShadowMage]

...but if you use if(count>1){you have to reset it again to reuse onresize, else you only can use it once to retrieve screen size.

Yeah, I guess that's true...