You sir are a star! I've trimmed the code so it applies only
vertically and it's working well.... except when the viewport is taken
lower than 550px in height.

Again, trying to get my head around syntax here. I'm sure it's simply
a case of stopping the behaviour if $(window) is equal to or less than
the object, but not sure how to achieve that.




On Mar 6, 2:55 am, Hamish Campbell <[EMAIL PROTECTED]> wrote:
> My solution from:
>
> http://groups.google.com/group/jquery-ui/browse_thread/thread/35a33d1...
>
> and in action atwww.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

Reply via email to