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

  • $phpwcms['allow_cntPHP_rt'] = 1;
  • JS switch to on in browser


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).

  • In the relevant template is selected by JS library: jQuery.
  • A container is placed around the site (e.g. container01)
  • In the template at any point the JS-Plugin is initialized
    [PHP]initJSPlugin('centercontainer');[/PHP]


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);
}
english/other-enhancements/jquery/container-center.txt · Last modified: 2009/12/12 12:12 by Knut Heermann (flip-flop)
www.planmatrix.de www.chimeric.de Creative Commons License Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0