NAVIGATION
[[Container center]]
This is an old revision of the document!
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
In the file template/lib/jquery/plugin/jquery.centercontainer.js placing.
/************************************************************* * 10.12.09 * Autor: http://blog.sternpunkt.at/2009/06/25/vertikal_zentrieren_ganz_einfach/# * * JQuery Skript zur vertikalen und horizontalen Zentrierung * im Browserfenster * * Aendern des Selektors: * --------------------- * Einsetzen der gewuenschten ID in den Zeilen 17 und 25 * **************************************************************/ //----------------------------------------------- // Beim Laden der Seite Container zentrieren //----------------------------------------------- $(document).ready(function(){ setCenter('#container01'); //ID oder Klasse des Containers }); //----------------------------------------------- // Beim Veraendern der Fenstergroesze Container neu // zentrieren //----------------------------------------------- $(window).bind('resize', function(event) { setCenter('#container01'); //ID oder Klasse des Containers }); //----------------------------------------------- // Container vertikal zentrieren //----------------------------------------------- function VerticalCenter(elem) { var top=($(window).height() - $(elem).height()) / 2; $(elem).css('margin-top',top); } //----------------------------------------------- // Container horizontal zentrieren // (Alternativ ueber CSS -> margin: auto;) //----------------------------------------------- function HorizontalCenter(elem) { var left=($(window).width() - $(elem).width()) / 2; $(elem).css('margin-left',left); } //------------------------------------------------ // Beides zentrieren //------------------------------------------------ function setCenter(elem) { VerticalCenter(elem); HorizontalCenter(elem); }
