{{indexmenu_n>10}}


====== Container zentrieren ======

**Vertikal/horizontal zentrieren im Browserfenster ganz einfach**

Aus dem [[http://blog.sternpunkt.at/2009/06/25/vertikal_zentrieren_ganz_einfach/|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:**  -> [[http://www.phpwcms-docu.de/confincphp_de.phtml|/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 <code>[PHP]initJSPlugin('centercontainer');[/PHP]</code>

\\

==== Layout: ====


{{:deutsch:andere-erweiterungen:jquery:container_zentrieren_500x400.gif|}}
\\

==== Vorlage: ====


{{:deutsch:andere-erweiterungen:jquery:be_template_jquery_on_01_de.gif|}}
\\


===== Code =====

In der Datei ##template/lib/jquery/plugin/jquery.centercontainer.js## ablegen.

**Trage Sie Ihre ID/Klasse in das Skript ein, etwa in Zeile 19 und 27.**

<code js|h jquery.centercontainer.js|h>
/*************************************************************
* 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 19 und 27 
*
**************************************************************/


//-----------------------------------------------
// Beim Laden der Seite Container zentrieren
//-----------------------------------------------
$(document).ready(function(){
	setCenter('#container01');  //Deine ID oder Klasse des Containers
});

//-----------------------------------------------
// Beim Veraendern der Fenstergroesze Container neu 
// zentrieren
//-----------------------------------------------
$(window).bind('resize', function(event) {
	setCenter('#container01');  //Deine 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);
}

</code>