PDA

View Full Version : setXY Issue.



INeedADip
19 Oct 2006, 3:40 PM
I am trying to float a dialog box of mine in the middle of the page.
I've got something like:



YAHOO.util.Event.addListener(window,'scroll',dlg_layout);
YAHOO.util.Event.addListener(window,'resize',dlg_layout);


So in my dlg_layout() function is where I try to re-center the div. I've noticed an issue in IE:

This does not work..the div bounces all over the place:


var cords = _dlg.getCenterXY(true);
_dlg.setXY(cords);


This does work however:



var cords = _dlg.getCenterXY(true);
_dlg.setLeft(cords[0] + 'px');
_dlg.setTop(cords[1] + 'px');


Has anyone else noticed this??

jack.slocum
19 Oct 2006, 3:55 PM
The problem is IE fires the resize event constantly while you resize. The setXY method just calls the YUI setXY function which walks the dom offsetParents to calculate the appropriate XY translation. This is too expensive to be completed as frequently as the resize event fires. That's what causes the jumpy behavior. The quicker you resize, the worse the problem will be.

The solution I always use when listening to window resize is to use YAHOO.ext.util.DelayedTask. It will buffer the IE events to make it behave like every other browser.

This code buffers the resize event to fire a max of once every 100 milliseconds


var resizeTask = new YAHOO.ext.util.DelayedTask(dlg_layout);
YAHOO.util.Event.addListener(window,'resize', function(){
resizeTask.delay(100);
});


In normal

INeedADip
19 Oct 2006, 4:02 PM
Excellent. Thank You..