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

blog comments powered by Disqus

Random jQuery Plug-ins

  • Content Scroller

    Use this plug-in to make a list of elements only show one at a time and every now and then scroll to the next one. The plug-in scrolls in infinty, sta...

    Details

  • Code Block Toolbar

    If you post code-examples on your site you can use this plug-in to add some nifty buttons below each code-example that allows the user to, for example...

    Details

  • Show Password

    This little plug inserts a "View password"-checkbox next to inputs of type password that allows the user to toggle the password's visibility. When the...

    Details

More Plug-ins

Recent Comments

Powered by Disqus
Page cached. Loaded in: 0.0077 second(s).
Last DB change: 2012-04-02 11:06:05
Last file change: 2012-04-25 20:30:39
Cache created: 2012-05-18 10:23:08