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:44] Knut Heermann (flip-flop) |
english:other-enhancements:jquery:container-center [2018/06/03 18:09] (current) |
||
|---|---|---|---|
| Line 81: | 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 92: | Line 92: | ||
| //----------------------------------------------- | //----------------------------------------------- | ||
| - | // Beim Laden der Seite Container zentrieren | + | // Durng page loading center container |
| //----------------------------------------------- | //----------------------------------------------- | ||
| $(document).ready(function(){ | $(document).ready(function(){ | ||
| - | setCenter('#container01'); //ID or class of the container | + | 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 or class of the container | + | setCenter('#container01'); //Your ID or class of the container |
| }); | }); | ||
| //----------------------------------------------- | //----------------------------------------------- | ||
| - | // Container vertikal zentrieren | + | // Container center vertically |
| //----------------------------------------------- | //----------------------------------------------- | ||
| function VerticalCenter(elem) { | function VerticalCenter(elem) { | ||
| Line 115: | 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 124: | Line 124: | ||
| //------------------------------------------------ | //------------------------------------------------ | ||
| - | // Beides zentrieren | + | // Both center |
| //------------------------------------------------ | //------------------------------------------------ | ||
| function setCenter(elem) { | function setCenter(elem) { | ||
