Table of Contents

Container center

Simply vertical/horizontal center of the browser window

From sternpunkt blog

From time to time it needs a fast solution for a problem or a desire. This centring is so a solution.

The horizontal centring of a side in the Browserfenster is still quite simply feasible over CSS, the vertical centring against it is connected with much more effort. Therefore this variant by JS.


jquery.centercontainer.js V1.0 10.12.09

Docu: –
Forum: –

Autor: blog.sternpunkt.at
wiki-Autor: K.Heermann (flip-flop) http://planmatrix.de)
CMS Version: >= 1.4.4 (r381)
Version: V1.0

Tag: –

Fileiname: jquery.centercontainer.js

Folder: template/lib/jquery/plugin/

Condition: → /config/phpwcms/conf.inc.php


Description:

The JS-code is stored in the listing indicated above and the appropriate ID/class from the template (e.g. container01) entered in the script (See script).


Layout:


Template:


Code

Please insert into the file template/lib/jquery/plugin/jquery.centercontainer.js the following snippet.

Change your ID/class around line 19 and 27.

jquery.centercontainer.js

/*************************************************************
* 10.12.09
* Autor: http://blog.sternpunkt.at/2009/06/25/vertikal_zentrieren_ganz_einfach/#
*
* JQuery script for vertical and horizontal centering
* in browser window
*
* Change the selector:
* ---------------------
* Change your ID/class around line 19 and 27
*
**************************************************************/
 
 
//-----------------------------------------------
// Durng page loading center container
//-----------------------------------------------
$(document).ready(function(){
    setCenter('#container01');  //Your ID or class of the container
});
 
//-----------------------------------------------
// When resizing the window re-center containers
//
//-----------------------------------------------
$(window).bind('resize', function(event) {
    setCenter('#container01');  //Your ID or class of the container
});
 
//-----------------------------------------------
// Container center vertically
//-----------------------------------------------
function VerticalCenter(elem) {
    var top=($(window).height() - $(elem).height()) / 2;
    $(elem).css('margin-top',top);
}
 
//-----------------------------------------------
// Container center horizontally
// (Alternatively, with CSS -> margin: auto;)
//-----------------------------------------------
function HorizontalCenter(elem) {
    var left=($(window).width() - $(elem).width()) / 2;
    $(elem).css('margin-left',left);
}
 
//------------------------------------------------
// Both center
//------------------------------------------------
function setCenter(elem) {
    VerticalCenter(elem);
    HorizontalCenter(elem);
}