PDA

View Full Version : want to reload page on browser resize - IE gets into a loop

maxelcat
05-11-2007, 09:12 PM
Dear All

I have been working on a design using javascript, css and html. Its not complex. I have a left and right column of 200px widths. I set a wrapper to 95% and then use some javascript to work out what the width of the middle column should be and set it.

It all works fine. I added a little bit of code into the body tag so that if the user resizes their browser then the page reloads. This works fine in Opera and FF. However, in IE7 it appears to get into some sort of loop.

ANy ideas please.

You can see the offending page at

www.maxelcat.co.uk/tests/test_index.html

I would really appreciate any help with this

thanks

Edward

here's what I have in the html

<body onResize="window.location.href = window.location.href;">


and here's the javascript (stripped down)


window.onload=liveWidth;

function liveWidth() {

var liveWidth = document.body.clientWidth;

var wrapperWidth=document.getElementById("wrapper").offsetWidth;
var centerWidth = wrapperWidth-(200+200+20+3);
document.getElementById("center_col").style.width=centerWidth+"px";

}
mrhoo
05-13-2007, 12:49 PM
firefox and most other browsers fire one resize event, when you mouseup after 'dragging' the window to the size you want.

IE fires repeatedly while you are resizing.
I use a separate handler for resize (and scroll) in IE,
that calls the handler on the next mouseup.

And (for IE) the handler has to remove itself from the mouseup after each use.
maxelcat
05-13-2007, 03:15 PM
than ks for that - a nice clear explanation.

Will see if I can get it to work!

Edward
maxelcat
05-13-2007, 04:39 PM
Hi mrhoo

In case you hadn't gathered I am a bit green (very!) with Javascript. I have had a play at what you suggested but am out to sea. I got as far as getting it all to work in FF and detecting if I was in IE using docuemnt.all

how do I "attach a handler for resize that calls on the next mouseup"?

thanks in advance

Edward
mrhoo
05-14-2007, 12:12 AM
You don't need to reload the page on a resize-just run your liveWidth function again.

document.body.onresize=liveWidth;

in the resize handler (liveWidth), check for IE before adjusting the column size-

function liveWidth(){
if(window.ActiveXObject){
if(event.type=='resize'){
document.body.attachEvent('onmouseup', liveWidth);
return;
}
else document.body.detachEvent('onmouseup', liveWidth);
}
var liveWidth = document.body.clientWidth;
var wrapperWidth=document.getElementById("wrapper").offsetWidth;
var centerWidth = wrapperWidth-(200+200+20+3);
document.getElementById("center_col").style.width=centerWidth+"px";
}
maxelcat
05-14-2007, 02:33 PM
thanks again!

Off to play with the code you provided
maxelcat
05-14-2007, 04:14 PM
OK

Like I said, thanks for teh help. But (adn I know this is beginners frustration - and boy am I getting frustrated...)

you put

document.body.onresize=liveWidth

which I understand to mean that when resize the browser the function is called.

I put this line on is own at the top and kept getting told that document.body had no properties. So i tried

window.onload=setUp;

function setUp() {
document.body.onresize=liveWidth;
}

this works in IE liveWidth is called- but not in FF or NS. Why not?

Where should I put the "document.body.onresize" line?

is this a dom thing - ie and FF refering to the same object diferently?

Thanks

Edward
PS I have spent some time searching before I posted - but just got more confused.
mrhoo
05-14-2007, 05:06 PM
try using window.resize for firefox
window.onload=setUp;

function setUp() {
if(window.ActiveXObject){
document.body.onresize=liveWidth;
}
else window.onresize=liveWidth;
}