...

View Full Version : oresize fires twice



simmm
10-27-2003, 11:27 PM
Hello everybody,
I'm new to javascript so please excuse my ignorance.

Can someone help me understand why onresize event fires twice?
I have the following piece of code:

<script language=" javascript">

function MyResize()
{
alert('MyResize function!');
}

</script>

<body onresize="MyResize();">
<h1> Just a test </h1>
</body>

and every time I resize the window the message in my function appears twice.

Thank you

Kor
10-28-2003, 11:31 AM
Frankly I don't know. maybe because the resize event means both X and Y resize... (Yet that occures even when drag the window on a single axis). Maybe because the alert() fuction is called both by resize and reload events... I don't know.

But, if you want to solve this problem, here's a solution to get rid of this double mess:

insert a condition which changes after the first alert is made, let's say a variable, something like:



<script>
var varResize = 0;
function MyResize()
{
if(varResize ==0) {
varResize = 1;
}
else {
alert('MyResize function!');
varResize = 0;
}
}
</script>

simmm
10-28-2003, 04:24 PM
Thanks for the suggestion.
I have already tried this workaround. But, what if one day the implementation of onresize changes and the event it will fire three times or just once?

The workaround serves the purpose for what I am doing right now, but I would prefer to find out the correct behavior of onresize event (which doesn't seem to be specified in MSDN).

brothercake
10-28-2003, 06:34 PM
I've never seen onresize attached to body before - afaik it's an event of window, so

window.onresize = function() { whatever; }

See if that makes this double-firing problem go away.

adios
10-28-2003, 06:50 PM
brothercake...

<body onresize = window.onresize

Really bizarre. Only in IE, afaik. I got 3 repeats:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>untitled</title>
<script type="text/javascript" language="javascript">
n = 1
function MyResize()
{
window.status += (n++)+' ';
}

onresize = MyResize;

</script>
</head>
<body>
</body>
</html>

googled to no avail. Weird.

simmm
10-28-2003, 07:57 PM
It still fires twice using the code above. The easiest way to see it is by minimizing/maximizing the window.

Choopernickel
10-28-2003, 08:43 PM
Probably the best way I've seen to manage resizes (sometimes, I think depending on rendering mode, the frequency/number of resize events changes) is to create two functions: one for onResize, and one for onFinishResize (of course that's not a real event, but hang with me.) Check it:

<script type="javascript">
window.onresize = function () {
window.clearTimeout('resizeTimer');
resizeTimer = window.setTimeout(finishResize, 1000);
}
function finishResize () {
// do whatever you really need to do here
}
</script>
Your real function should be finishResize. The anonymous window.onresize function really becomes nothing more than a queue manager.

HTH.

simmm
10-28-2003, 09:48 PM
Thank you Choopernickel.
I have tried the code you wrote and unfortunately it doesn't solve the problem.
If the function looks like this

function finishResize () {
// do whatever you really need to do here
alert('MyResize');

}

when minimizing/maximizing the window the message shows twice.

adios
10-29-2003, 08:17 AM
I think this has to do with event bubbling - but otherwise, it's a mystery.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>untitled</title>
<script type="text/javascript" language="javascript">

var n = 1;
function MyResize()
{
window.status += '#' + (n++) + ' ';
}

onresize = MyResize;

</script>
</head>
<body>
</body>
</html>

Remove the doctype - which makes the HTML element the outermost container (IE) - and you get two resize events firing, instead of three. Nothing seems to alter this behavior.

me'
10-29-2003, 11:52 AM
Using IE:rolleyes:? I can sometimes get up to around 7 onresize events firing after one resize. Although this will decrease the effeciency of your program, I've never seen it actually _matter_.

Interestingly, Moz and I think Op get around this problem by firing a single onresize event at the end of the resizing period. This means if you're handling that event, the page may look screwy until the user lets go of the mouse, and the onresize event is fired. I think I prefer the IE way, myself.

glenngv
10-29-2003, 12:14 PM
I agree with 'me.

In IE, onresize is fired as the user resizes the window without releasing the mouse. In NS/Moz, onresize only fires once when the mouse is released.

Test the code I posted in this post:

http://www.codingforums.com/showthread.php?s=&threadid=26444

In that code, I prefer that onresize is fired as the mouse is dragged without releasing it. That way, the resizing of frame is "smooth".
So, multiple invocation of onresize event has advantages and disadvantages depending on how you use it. In the case of the code I posted, it is an advantage.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum