{{indexmenu_n>10}}


====== Container center ======

**Simply vertical/horizontal center of the browser window **

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

\\

==== Layout: ====


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

==== Template: ====


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


===== 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.** 

<code js|h jquery.centercontainer.js|h>
/*************************************************************
* 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);
}

</code>