onResize is called many times

[Bas]

Hello all,

I'm trying to create a little script which will save the width of a
certain frame into a database, so that every user still has his/her
"own" frame width when logging back on. Now, this works ok, though
there's one little problem left: when i click the frameborder and drag
it around in IE (it's not working in NN, but that's not my goal since
it's a very specific CMS) the onResize handler is called literally
hundreds of times.

I've only found some pages on the web describing that IE calls
onResize twice. Has anyone come across this problem, or does anyone
might have a workaround for this?

Thanks in advance,
Bas

 

[Dom Leonard]

Bas wrote:
....

when i click the frameborder and drag
it around in IE (it's not working in NN, but that's not my goal since
it's a very specific CMS) the onResize handler is called literally
hundreds of times.

I've only found some pages on the web describing that IE calls
onResize twice. Has anyone come across this problem, or does anyone
might have a workaround for this?

I think IE generates resize events when the mouse moves, even though the
mouse button is down and the operation hasn't finished yet. Since the
event object's button property reports zero during resize, it doesn't
appear to be of much help in the matter.

One possibility would be to record the window size, and use a timer to
determine if resizing has stopped, for a second say, before doing
anything about it. For the following code example, set
oResize.onafterresize to a function you want to call after resize has
stopped:


// existing function to find window dimensions and scroll amount:

function dfxWinXY(w) // w = window object
{
var b,d,x,y,sx,sy,v;
x=y=sx=sy=0;
if(w.innerWidth && w.innerHeight)
{ x=w.innerWidth;
v=w.document.body.offsetWidth;
if(v && (1<v)&&!(x<v)) // scrollbar width problem
x=v-1;
y=w.innerHeight;
sx=w.pageXOffset||0;
sy=w.pageYOffset||0;
}
else
{ d=w.document;
if(d.body)
{ b=d.documentElement.clientWidth?
d.documentElement:d.body; // IE 6 strict dtd
x=b.clientWidth||0;
y=b.clientHeight||0;
sx=b.scrollLeft||0;
sy=b.scrollTop||0;
}
}
return {x:x,y:y,sx:sx,sy:sy};
}

// object to bundle resize processing:

window.oResize = {
checkTime: 1000,
oldXY: dfxWinXY( window),
timerId: 0,
check1: function() {window.oResize.check2()},
check2: function() // call as method of oResize
{ if(this.timerId)
window.clearTimeout(this.timerId);
this.timerId =
setTimeout( "window.oResize.check3()",this.checkTime);
},
check3: function()
{
var newXY = dfxWinXY( window);
this.timerId = 0;
if( (newXY.x != this.oldXY.x) ||
(newXY.y != this.oldXY.y))
{ this.oldXY = newXY;
this.onafterresize();
}
},
onafterresize: function()
{ alert("missing line: \n " +
"oResize.onafterresize = callBackFunction;")
}
}

// start resize monitoring:

window.onresize= oResize.check1;

 

[Bas]

One possibility would be to record the window size, and use a timer to
determine if resizing has stopped, for a second say, before doing
anything about it. For the following code example, set
oResize.onafterresize to a function you want to call after resize has
stopped:


// existing function to find window dimensions and scroll amount:

function dfxWinXY(w) // w = window object
{
var b,d,x,y,sx,sy,v;
x=y=sx=sy=0;
if(w.innerWidth && w.innerHeight)
{ x=w.innerWidth;
v=w.document.body.offsetWidth;
if(v && (1<v)&&!(x<v)) // scrollbar width problem
x=v-1;
y=w.innerHeight;
sx=w.pageXOffset||0;
sy=w.pageYOffset||0;
}
else
{ d=w.document;
if(d.body)
{ b=d.documentElement.clientWidth?
d.documentElement:d.body; // IE 6 strict dtd
x=b.clientWidth||0;
y=b.clientHeight||0;
sx=b.scrollLeft||0;
sy=b.scrollTop||0;
}
}
return {x:x,y:y,sx:sx,sy:sy};
}

// object to bundle resize processing:

window.oResize = {
checkTime: 1000,
oldXY: dfxWinXY( window),
timerId: 0,
check1: function() {window.oResize.check2()},
check2: function() // call as method of oResize
{ if(this.timerId)
window.clearTimeout(this.timerId);
this.timerId =
setTimeout( "window.oResize.check3()",this.checkTime);
},
check3: function()
{
var newXY = dfxWinXY( window);
this.timerId = 0;
if( (newXY.x != this.oldXY.x) ||
(newXY.y != this.oldXY.y))
{ this.oldXY = newXY;
this.onafterresize();
}
},
onafterresize: function()
{ alert("missing line: \n " +
"oResize.onafterresize = callBackFunction;")
}
}

// start resize monitoring:

window.onresize= oResize.check1;

Dom,

Thanks for your answer I've thought of a timer, but it wouldn't be
100% perfect. When you would hold the mouse pressed down and not move
it for 1 second, it would trigger the function. And if you are very
fast, you could click some url on the page, and have the function not
triggered at all

I know, i'm a purist, but after reading your post, i realized
something: I could add an onMouseUp to the <body> tag, and when the
event is triggered, it would check if the window size differs from the
original width. If it does, save it

Thanks!