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

  • Slide Presentation

    A sort of slide/presentation kind of plug-in. Displays sliding images with text floating on top. This one's pretty specific but perhaps someone will f...

    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

  • Drag to Select

    Use this plug-in to allow your users to select certain elements by dragging a "select box". Works very similar to how you can drag-n-select files and ...

    Details

More Plug-ins

Recent Comments

Powered by Disqus