My solution from:
http://groups.google.com/group/jquery-ui/browse_thread/thread/35a33d1c50f0e724/e527c8f47ba183e0?lnk=gst&q=extend+center#
and in action at www.deft.co.nz
$(document).ready(function() {
jQuery.fn.centerScreen = function(loaded) {
var obj = this;
if(!loaded) {
obj.css('top', $(window).height()/2-
this.height()/2);
obj.css('left', $(window).width()/2-
this.width()/2);
$(window).resize(function()
{ obj.centerScreen(!loaded); });
} else {
obj.stop();
obj.animate({ top: $(window).height()/2-
this.height()/2, left: $
(window).width()/2-this.width()/2}, 200, 'linear');
}
}
});
Now you can apply centreScreen to divs that have layout [eg $
('#page').centreScreen()]. On document.ready it will centre the
element, then on window.resize it will move (linear animation) the
div
to the new centre. Seems to work nicely in IE7 and FF2. There are a
few potential bigs - it should really check for layout, and apply it
if it is missing for example - but it works well enough.
When implenting, you'd do the usual MS hacks, then let this take
over.
Other possible extensions: maybe an option to centre to parent
element
as well as window, un-centre, offsets etc.
On Mar 6, 11:31 am, TheOriginalH <[EMAIL PROTECTED]> wrote:
> Hi, very new to jQuery, but suspect it can probably help me out.
>
> I have a div of a fixed height (auto scroll where content exceeds that
> height), that I would like to center vertically on the page. I'm
> assuming I can use jQuery to work out the height of the browser
> window, subtract the height of the div and then apply margin-top and
> margin-bottom at 50% of that result to achieve what I'm after - but am
> very lost as to the syntax involved.
>
> Any help gratefully received!
>
> TIA
