NAVIGATION
[[Container center]]
Differences
This shows you the differences between two versions of the page.
|
english:other-enhancements:jquery:container-center [2009/12/12 11:40] Knut Heermann (flip-flop) created |
english:other-enhancements:jquery:container-center [2018/06/03 18:09] (current) |
||
|---|---|---|---|
| Line 72: | Line 72: | ||
| ===== Code ===== | ===== Code ===== | ||
| - | In the file ##template/lib/jquery/plugin/jquery.centercontainer.js## placing. | + | 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> | <code js|h jquery.centercontainer.js|h> | ||
| Line 79: | Line 81: | ||
| * Autor: http://blog.sternpunkt.at/2009/06/25/vertikal_zentrieren_ganz_einfach/# | * Autor: http://blog.sternpunkt.at/2009/06/25/vertikal_zentrieren_ganz_einfach/# | ||
| * | * | ||
| - | * JQuery Skript zur vertikalen und horizontalen Zentrierung | + | * JQuery script for vertical and horizontal centering |
| - | * im Browserfenster | + | * in browser window |
| * | * | ||
| - | * Aendern des Selektors: | + | * Change the selector: |
| * --------------------- | * --------------------- | ||
| - | * Einsetzen der gewuenschten ID in den Zeilen 17 und 25 | + | * Change your ID/class around line 19 and 27 |
| * | * | ||
| **************************************************************/ | **************************************************************/ | ||
| Line 90: | Line 92: | ||
| //----------------------------------------------- | //----------------------------------------------- | ||
| - | // Beim Laden der Seite Container zentrieren | + | // Durng page loading center container |
| //----------------------------------------------- | //----------------------------------------------- | ||
| $(document).ready(function(){ | $(document).ready(function(){ | ||
| - | setCenter('#container01'); //ID oder Klasse des Containers | + | setCenter('#container01'); //Your ID or class of the container |
| }); | }); | ||
| //----------------------------------------------- | //----------------------------------------------- | ||
| - | // Beim Veraendern der Fenstergroesze Container neu | + | // When resizing the window re-center containers |
| - | // zentrieren | + | // |
| //----------------------------------------------- | //----------------------------------------------- | ||
| $(window).bind('resize', function(event) { | $(window).bind('resize', function(event) { | ||
| - | setCenter('#container01'); //ID oder Klasse des Containers | + | setCenter('#container01'); //Your ID or class of the container |
| }); | }); | ||
| //----------------------------------------------- | //----------------------------------------------- | ||
| - | // Container vertikal zentrieren | + | // Container center vertically |
| //----------------------------------------------- | //----------------------------------------------- | ||
| function VerticalCenter(elem) { | function VerticalCenter(elem) { | ||
| Line 113: | Line 115: | ||
| //----------------------------------------------- | //----------------------------------------------- | ||
| - | // Container horizontal zentrieren | + | // Container center horizontally |
| - | // (Alternativ ueber CSS -> margin: auto;) | + | // (Alternatively, with CSS -> margin: auto;) |
| //----------------------------------------------- | //----------------------------------------------- | ||
| function HorizontalCenter(elem) { | function HorizontalCenter(elem) { | ||
| Line 122: | Line 124: | ||
| //------------------------------------------------ | //------------------------------------------------ | ||
| - | // Beides zentrieren | + | // Both center |
| //------------------------------------------------ | //------------------------------------------------ | ||
| function setCenter(elem) { | function setCenter(elem) { | ||
