La Force de dom recharger/redimensionner en Javascript

J'ai une barre latérale dans mon application qui peut être affichée/masquée par un bouton à bascule. Simplement, il bascule dans un cours sur les "corps" qui ajoute un peu de marge de gauche de la zone de contenu et de masque/affiche la barre latérale. La difficulté est que la zone de contenu n'est pas le redimensionnement de son contenu enfant lorsque cette case est cochée. Une fois que j'ai ajuster la taille du navigateur, la zone de contenu s'adapte au contenu, mais j'en ai besoin pour ce faire, après la bascule, sans la nécessité de redimensionner la fenêtre. Est-il un moyen de déclencher une taille d'élément de rafraîchir ou de dom actualiser pour résoudre ce problème? À L'Aide De Chrome 19.x.

 $('#sidebar-toggle').click(function(event) {
   event.preventDefault();
   $('body').toggleClass('with-sidebar-left');
 });

Edit: Semble comme il pourrait être un Webkit question. Fonctionne très bien dans Firefox.

Edit 2: Mis en place une procédure simplifiée de construire à l'emplacement suivant:

https://dl.dropbox.com/u/189605/misc/build-test/grid.html

Vous pouvez voir les cases sont en float: left et lorsque vous réduisez la barre latérale à l'aide de la petite flèche du bouton, il faut ajuster la droite de sorte que plus de boîtes de fit. Dans Webkit, vous avez pour redimensionner le navigateur pour qu'il réalise qu'il a plus d'espace. Fonctionne dans Firefox.

  • Pouvez-vous fournir une JSFiddle.net exemple du problème?
  • Êtes-vous sûr $('sidebar-toggle') est correcte? Peut-être qu'il devrait être $('#sidebar-toggle') à la place?
  • ouais, il devrait l'être, mais ce n'est pas la question. faute de frappe.
  • Pouvez-vous faire un test? jsfiddle.net / jsbin.com
  • J'ai vu quelque chose de semblable, mais seulement sur chrome par lequel le repeindre le moteur a besoin d'être ensemble, mais c'est aussi que si vous utilisez transforme en css
  • Demo publié dans l'OP.
  • est-il un hack pour "réglage de la repeindre le moteur"? Pas sûr de ce que tu veux dire.
  • ouais 2 minutes, je vais déterrer
  • heres quelques liens: stackoverflow.com/questions/4641522/... stackoverflow.com/questions/8840580/...
  • il m'a beaucoup aidé quand j'ai été en utilisant transforme cos webkit est un peu buggé repeindre transformé les zones
  • Hmm, ouais, rien de liens à des solutions élaborées. Crois que je vais soumettre un rapport de bogue.

InformationsquelleAutor typeoneerror | 2012-06-12
  1. 2

    La solution de contournement de ma réponse ici qui fonctionne pour votre situation.

    Voici une petite démo: http://jsbin.com/amakex

    Il fonctionne dans Chrome et Safari (sans surprise, votre démo originale aussi ne fonctionne pas dans Safari).

    • boom, nice! merci.
    InformationsquelleAutor thirtydot
  2. 5

    vous pourrait déclencher juste un redimensionnement dans votre gestionnaire de clic, par exemple:

    $(window).trigger('resize')
    • Plutôt que de déclencher un événement, la fonction écouteur peut être appelé directement.
    • N'a aucun effet, malheureusement. C'était la première chose que j'ai essayé.
    • si il y a de multiples fonctions d'écouteur puis c'est mieux pour déclencher l'événement. De cette façon, ils ont tous le feu.
    • Oh, j'espère vraiment il n'y a pas plusieurs onresize auditeurs 🙂
    InformationsquelleAutor billythetalented
  3. 1

    vous l'a dit-"mais j'en ai besoin pour ce faire, après la bascule, sans la nécessité de redimensionner la fenêtre".vous pouvez utiliser jquery de rappel pour le faire

    InformationsquelleAutor Ash