Hi,
I'm trying to get an element to have it's css: left property adjusted with
the width of the window, but in a live fashion. For example, if you have
the following bit of CSS & HTML:
body { width: 100%; }
#test { width: 300px; margin: 0 auto; }
...
<div id="test">Testing</div>
Then that div will always position in the center of the browser window. If
you try to resize the window, the div adjusts AS YOU'RE RESIZING to remain
in the exact center.
Now that only works if the div is relatively positioned. My problem is that
the div I need to have similar behavior has a fixed position. So:
#test { position: fixed; top: 0px; }
...
$(window).resize(function () {
var offsetLeft = Math.floor($(window).width()/2) -
($("#test").width()/2);
$("#test").css("left",offsetLeft+"px");
});
The only problem is that the resize event seems to only callback AFTER the
window reaches its new size, not during the actual resize event. In short,
I want my fixed-position div to have the same behavior as the CSS
relatively-positioned div with left and right auto margins. Furthermore, I
have another element that adjusts (via jQuery) to the window.scroll() event,
and it will adjust on-the-fly; why doesn't window.resize() do the same?
I would greatly appreciate any light you could throw on my situation!!
-Ev
--
View this message in context:
http://www.nabble.com/Live-Resize-tp19587248s27240p19587248.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
