NAVIGATION
[[Container center]]
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
- $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.
/************************************************************* * 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); }
