Page resize detection in IE6

@the_maddestmanDec 19.2008

Hi everyone, just wondering if anyone could help me or at least point me in the right direction.

I am designing some pages to load to be displayed as a customer display on a terminal. The pages are displayed using IE6s rendering engine, and I don’t have control over that. There are 3 pages displayed, in a slideshow style using a javascript and the setTimeout function to load them after a delay, before loading the next one and so on. 2 of these pages require different versions depending on the available height.

The problem is that I need to be able to poll document.body.clientHeight and detect when the height changes, and then dynamically load a different page.

I’ll freely admit I am a beginner, and that my skills are lacking, but nobody is born knowing everything, right?

I currently have this:

[CODE]<body> <SCRIPT language=”JavaScript”> <!– if ((document.body.clientHeight>=500)) { window.location=”onehighres.html”; } else { window.location=”onelowres.html”; } //–> </SCRIPT> </body>[/CODE]

The problem is that I need to add detection to onehighres.html that will detect when document.body.clientHeight changes and then almost instantly display the lowres page instead.

Obviously, if I can roll both lowres and highres versions onto one page that would be much easier to maintain too.

So if anyone could help point me in the right direction with regards to detecting and acting upon document.body.clientHeight changes that would be very much appreciated.

Thanks in advance,

Troy.

to post a comment

JavaScript

8 Comments(s) _↴

@SephrDec 19.2008 — #for most browsers including ie6:

window.onresize = function

for standards compliant browsers:

window.addEventListener('resize',function,false)

@mrhooDec 19.2008 — #never mind- I see this is an IE6 thread.

I was going to warn that IE8 doesn't fire resize from the window, like other browsers, but from the document.documentElement.

@SephrDec 19.2008 — #never mind- I see this is an IE6 thread.

I was going to warn that IE8 doesn't fire resize from the window, like other browsers, but from the document.documentElement.[/QUOTE]

What the heck are you talking about? window.onresize is fired from IE8. What makes you think it would use document.documentElement?

@mrhooDec 19.2008 — #I found it by testing.

I perhaps should have qualified it to IE8 in standards mode-

in IE7 mode it behaves as like IE7

Google 'IE8 window.onresize' for a few thousand independent reports-

@the_maddestmanauthorJan 23.2009 — #Thanks for that, I now understand how that works, however am still a tad stuck when it comes to working it into the existing scripting and think I might be better off starting from scratch.

Here's the whole idea, initially it loads the index:

[CODE]<script language="JavaScript"> 
 function SSS()
 {
 setTimeout("Slide1()",3000);
 }
 function Slide1()
 {
 var x = document.frames.MainFrame.location="lib/one.html";
 x = null;
 setTimeout("Slide2()",8000);
 }
 function Slide2()
 {
 var x = document.frames.MainFrame.location="lib/two.html";
 x = null;
 setTimeout("Slide3()",8000);
 }
 function Slide3()
 {
 var x = document.frames.MainFrame.location="lib/three.html";
 x = null;
 setTimeout("Slide1()",8000);
 }
 </script>
 </head>
 <body onLoad="SSS()">
 <iframe  id="MainFrame" Src="lib/one.html" width="100%" height="100%" frameborder="0">
 </iframe>
 </body>[/CODE]

Then the individual pages detect and re-direct to a page setup for the resolutionaws in the first post.

I'm thinking I might be much better off using a counter var and incrementing it, which means it would be much easier if there are say 20 pages rather then just 3, and would make code re-use much more simple.

Also I was thinking, rather then maintaining seperate pages, perhaps it makes more sense to get the elements on the pages resized if the resize is triggered.

But I must admit to being a little stuck as to the best way to go about it, so I thought I might ask for some advice and ideas as to the best way to go about this.

Thanks in advance.

@the_maddestmanauthorFeb 02.2009 — #Nobody got any ideas or suggestions? Any input would be very much appreciated.

@the_maddestmanauthorFeb 23.2009 — #Ok, I tried this, and while it doesn't generate any errors, it doesn't have the desired effect, it doesn't seem to break out of the Timeout as desired.

[CODE]<html>
 <head>
 <meta http-equiv="Page-Enter" content="RevealTrans(duration=2,transition=23)">
 <script language="JavaScript"> 
 function SSS()
 {
 var t;
 t = setTimeout("Slide1()",3000);
 onresize = "clearTimeout(t)";
 }
 function Slide1()
 {
 var x = document.frames.MainFrame.location="lib/one.html";
 x = null;
 t = setTimeout("Slide2()",8000);
 onresize = "clearTimeout(t)";
 }
 function Slide2()
 {
 var x = document.frames.MainFrame.location="lib/two.html";
 x = null;
 t = setTimeout("Slide3()",8000);
 onresize = "clearTimeout(t)";
 }
 function Slide3()
 {
 var x = document.frames.MainFrame.location="lib/three.html";
 x = null;
 t = setTimeout("Slide1()",8000);
 onresize = "clearTimeout(t)";
 }
 </script>
 </head>
 <body onLoad="SSS()">
 <iframe  id="MainFrame" Src="lib/one.html" width="100%" height="100%" frameborder="0">
 </iframe>
 </body>
 </html>[/CODE]

Anybody able to provide any assistance please? Any help would be very much appreciated.

Thanks in advance.

@the_maddestmanauthorApr 20.2009 — #I thought maybe by adding to the body tag the resize function might do the trick, but sadly no, it hasn't.

[CODE]<html>
 <head>
 <meta http-equiv="Page-Enter" content="RevealTrans(duration=2,transition=23)">
 <script language="JavaScript"> 
 function SSS()
 {
 var t;
 t=setTimeout("Slide1()",3000);
 }
 function resize()
 {
 clearTimeout(t);
 }
 function Slide1()
 {
 var x = document.frames.MainFrame.location="lib/one.html";
 x = null;
 t=setTimeout("Slide2()",8000);
 }
 function Slide2()
 {
 var x = document.frames.MainFrame.location="lib/two.html";
 x = null;
 t=setTimeout("Slide3()",8000);
 }
 function Slide3()
 {
 var x = document.frames.MainFrame.location="lib/three.html";
 x = null;
 t=setTimeout("Slide1()",8000);
 }
 </script>
 </head>
 <body onLoad="SSS()" onresize="resize()">
 <iframe  id="MainFrame" Src="lib/one.html" width="100%" height="100%" frameborder="0">
 </iframe>
 </body>
 </html>
 [/CODE]

Anyone have any ideas?

Any help would be very much appreciated.

Also in #JavaScript _↴

fixed/not deletable prefix/value AutoRefresh in Java Script

Success!

Help @the_maddestman spread the word by sharing this article on Twitter...

Tweet This

Page resize detection in IE6

8 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Page resize detection in IE6

8 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

8 Comments(s) _↴

Also in #JavaScript _↴