NAVIGATION
This is an old revision of the document!
Table of Contents
Container zentrieren
Vertikal zentrieren im Browserfenster ganz einfach
Aus dem sternpunkt blog
Ab und zu braucht es eine schnelle Lösung für ein Problem oder Wunsch. Dieser Zentrierer ist so eine Lösung.
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: –
Dateiname: jquery.centercontainer.js
Verzeichnis: template/lib/jquery/plugin/
Bedingung: → /config/phpwcms/conf.inc.php
- $phpwcms['allow_cntPHP_rt'] = 1;
- JS im Browser eingeschaltet
Beschreibung:
Der JS-Code wird im oben angegebenen Verzeichnis abgelegt und die entsprechende ID/Klasse aus der Vorlage (z.B. container01) im Skript eingetragen (Siehe Skript).
- In der betreffenden Vorlage wird bei JS Bibliothek: jQuery gewählt.
- Ein Container wird um die Seite gelegt (z.B. container01)
- In der Vorlage wird an irgendeiner Stelle das JS-Plugin initialisiert
[PHP]initJSPlugin('centercontainer');[/PHP]
Layout:
Vorlage:
Code
In der Datei template/lib/jquery/plugin/jquery.centercontainer.js ablegen.
/************************************************************* * 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); }
