Sunday, December 20, 2009

Centering a container on screen with JavaScript (jQuery plugin)

Recently I needed a way to center an image on screen for a 'Coming Soon' kind of page, and so I wrote this jQuery plugin that does in fact this.

You can download the normal, unpacked version for development or the packed version for production.

Click here to view a demo

The container needs to have a preset width and height for this to work


Here is the unpacked code:

/*
 * CenterScreen v1.1 - jQuery plugin
 * 
 *  Copyright (c) 2009 - 2010 Andreas Grech
 *
 *  Dual licensed under the MIT and GPL licenses:
 *    http://www.opensource.org/licenses/mit-license.php
 *    http://www.gnu.org/licenses/gpl.html
 *
 * http://blog.dreasgrech.com
 */

(function ($) {
    $.fn.centerScreen = function () {
        return this.each(function () {
            var $this = $(this),
                $window = $(window),
                center = function () {
                    var winWidth = $window.width(),
                        winHeight = $window.height();
                    $this.css({
                        position: 'absolute',
                        left: ((winWidth / 2) - ($this.outerWidth() / 2)),
                        top: ((winHeight / 2) - ($this.outerHeight() / 2))
                    });
                };
            $window.resize(center);
            center();
        });
    };
}(jQuery));