Center 2.0

Created Wednesday 17th of September 2008 by Andreas Lagerkvist
Copyright © 2008 Andreas Lagerkvist (andreaslagerkvist.com)

What it Does

This little pluggy centers an element on the screen using either fixed or absolute positioning. Can be used to display messages, pop up images etc.

How to Use

jQuery('#my-element').center(true); would center the element with ID 'my-element' using absolute position (leave empty for fixed).

Example

I should be fixed centered

The paragraph above and the paragraph beneath this one are centered. They should be in the middle of the viewport.

I should be absolutely centered

Example Code

HTML

<div id="jquery-center-example">
<
p>I should be fixed centered</p>

<
p>The paragraph above and the paragraph beneath this one are centeredThey should be in the middle of the viewport.</p>

<
p>I should be absolutely centered</p>
</
div>

JS

jQuery('#jquery-center-example p:first-child').center();
jQuery('#jquery-center-example p:last-child').center(true);

Source Code

jQuery.fn.center = function (absolute) {
    return 
this.each(function () {
        var 
jQuery(this);

        
t.css({
            
position:    absolute 'absolute' 'fixed'
            
left:        '50%'
            
top:        '50%'
            
zIndex:        '99'
        
}).css({
            
marginLeft:    '-' + (t.outerWidth() / 2) + 'px'
            
marginTop:    '-' + (t.outerHeight() / 2) + 'px'
        
});

        if (
absolute) {
            
t.css({
                
marginTop:    parseInt(t.css('marginTop'), 10) + jQuery(window).scrollTop(), 
                
marginLeft:    parseInt(t.css('marginLeft'), 10) + jQuery(window).scrollLeft()
            });
        }
    });
};

Download

Plug-in

Requires

Post a Comment

blog comments powered by Disqus

Random jQuery Plug-ins

  • Togglable DL

    Use this plug-in on your definition-lists (dl-elements) to allow the dd:s for a dt to be toggled when clicking the dt. Don't use it unless it's semant...

    Details

  • Text Shadow

    Frankly a rather crappy text-shadow plug-in (can one be done well? :) but nevertheless it does the job in some cases.

    Details

  • Colour Picker

    Use this plug-in on a normal <select>-element filled with colours to turn it in to a colour-picker widget that allows users to view all the colours in...

    Details

More Plug-ins

Recent Comments

Powered by Disqus