Modifier la largeur CSS en utilisant javascript (JQuery Tools Scrollable) centre

Question

J'utilise JQuery Tools Scrollable pour créer un formulaire déroulant de largeur de page complète, de sorte que chaque page du formulaire défile tout le long de la page, remplacée par la suivante page glissant de la droite. Le problème que j'ai est de savoir comment centrer chaque page de telle sorte que reste centré entre le redimensionnement du navigateur et le zoom dans le navigateur (Ctrl +/-). Mon code est basé sur: http://flowplayer.org/tools/demos/scrollable/site-navigation.html

J'ai essayé enrobant mon code dans un div comme ceci:

<div style="margin-left:-440px; padding-left:50%; width:50%; min-width:880px;"> 

Mais, parce que ce div lui-même est placé au milieu de la page, le défilement des pages don Ne faites pas glisser tout le chemin vers le bord gauche - ils coupent au bord de la div à environ 30% de la gauche, ce qui semble mauvais.

La seule conclusion que je peux penser est de modifier dynamiquement la marge gauche j'ai défini sur div class = « éléments » pour vous assurer qu'il est toujours égale à 50% - 440px, mais pas moins de 0.

Comment puis-je faire cela en utilisant javascript?

Answer 1

est le conteneur div positionné en absolu ou relatif? Si elle a une largeur spécifique, disons "800px", alors le centrer horizontalement est facile avec les marges automatiques à gauche et à droite, par ex. margin: 0 auto. Sinon, cela devient plus délicat.

Si vous voulez répondre à redimensionner en Javascript, dans jquery je fais quelque chose comme $(window).resize(function() {}) (docs here) et à l'intérieur de la fonction de gestionnaire de mettre à jour une certaine valeur en CSS. Si vous souhaitez simplement augmenter la largeur tout en conservant des marges automatiques, vous pouvez sélectionner votre div et mettre à jour la propriété width, par ex. $('.mydiv').css('width', '900px');. Cela se déclencherait à chaque fois que la fenêtre est redimensionnée.