PDA

Click to See Complete Forum and Search --> : onresize event firing too many times in IE6

Migrate
12-04-2004, 06:04 AM
Good morning!

I've create a function that listens to onresize events and it works fine in Mozilla, but in IE6 the event in fired three times.
Can anyone tell me how to overcome this problem?

Here is the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>Resize</title>

</head>
<body>
<script>

var myDiv = document.createElement("div");
myDiv.appendChild(document.createTextNode("Blá Blá"));
myDiv.style.border = "1px dashed Black";
document.body.appendChild(myDiv);
window.onresize = resize;

function resize() {

alert("Resize!!");

}

</script>

</body>
</html>


Thanks in advance,
Migrate
Mr J
12-04-2004, 06:38 AM
It looks like mozilla does not call the function untill the resizing is complete whereas IE calls the function for every imcrementation of the resizing, hence multiple calls.

This should not affect your end result but is prominent because you are using an alert
Fang
12-04-2004, 07:36 AM
A little more confusion:
IE6 in strict mode onresize fires 3x, in quirks mode 2x
IE5 onresize fires 2x

It appears that the window and body are firing the event in quirks mode,
but in strict mode the html also fires the event.
The html and body are seperate viewports in strict mode for IE6.
Migrate
12-04-2004, 08:30 AM
Hello all!
Thanks for the answers!

Your anwsers made try to search for a workaround and I think I've found it.
Instead of adding the onresize event to the body tag, I added it to a div that serves as the container for all elements in the page (and most have it's width and height set - saw that in what is now my bible book (-: Dynamic HTML by Danny Goodman). This way the event is fired only once. The only drawback is that I have to test the browser to see if it's IE6.

Here is solution:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
<head>
<title>Resize</title>

<style>
* {
margin: 0px;
padding: 0px;
}

html, body {
width: 100%;
height: 100%;

}

#container {
width: 100%;
height: 100%;
}


</style>

</head>
<body>
<script>

var myDiv = document.createElement("div");
myDiv.id = "container";
myDiv.appendChild(document.createTextNode("Blá Blá"));
myDiv.style.border = "1px dashed Black";
document.body.appendChild(myDiv);

if(document.all) { // for IE
myDiv.onresize = resize;
} else { // for Mozilla
window.onresize = resize;
}

function resize() {

alert("Resize!!");

}

</script>

</body>
</html>


Best Regards,
Migrate
:) :)