NAVIGATION
This is an old revision of the document!
Table of Contents
Container zentrieren
Vertikal/horizontal 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.
Die horizontale Zentrierung einer Seite im Browserfenster ist noch recht einfach über CSS machbar, die vertikale Zentrierung dagegen ist mit wesentlich mehr Aufwand verbunden. Deshalb diese Variante per 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: –
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.
Trage Sie Ihre ID/Klasse in das Skript ein, etwa bei Zeile 19 und 27.
/************************************************************* * 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); }
