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

  • View More

    This plug-in allows an element's contents to be hidden untill the user clicks a certain element. It works exactly like the HTML5 details and summary e...

    Details

  • 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

  • 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