jQuery largeur, outerWidth(), innerWidth() pour retourner des données incorrectes

Pour une raison quelconque, je ne peux pas obtenir de jQuery pour me donner fiable des données de la largeur de divers éléments. Voici un lien vers un violon qui illustre le problème:
http://jsfiddle.net/snoopydaniels/ZDbaa/1/

Je cherche à créer un multidimensionnelle menu déroulant. Comme vous pouvez le voir dans le jsfiddle, la deuxième instruction de menu n'est pas correctement positionné. Le jQuery que j'utilise à la position qu'il interroge le frère d'ancrage de l'élément à l'aide de outerWidth() à la découverte de sa largeur, puis définir la position la plus à gauche de la liste imbriquée selon le retour de la largeur. Quand je donne le frère d'ancrage de l'élément une largeur définie dans le CSS puis-je obtenir quelque chose de proche de la valeur correcte, mais sans que la largeur statique, outerWidth() renvoie "2."

Mais même quand je donne d'ancrage des éléments d'un ensemble de largeur, outerWidth(true) ne fonctionne toujours pas correctement intégrer la frontière de l'élément.

Je suis sur le point de tirer mes cheveux. Pourquoi pas de la merde comme cela vient travailler comme annoncé?

OriginalL'auteur Daniel Arant | 2012-08-23

  1. 14

    Les différentes largeur de commandes ne fonctionnent pas pour les éléments cachés (display: none).

    Si vous utiliser les css pour définir une largeur, jquery sera de retour. Sinon, vous n'aurez pas, ou pas de sens, les résultats.

    La solution classique est de la position de l'élément de l'écran, vérifiez la largeur, puis de le cacher et de le remettre. (Vous pouvez probablement trouver un plugin jquery qui va faire en une seule commande.)

    Parfois il y a des moyens de la restructuration de l'html et/ou css afin de vous éviter cela.

    Parfois, vous pouvez fixer la taille à droite après montrant l'élément.

    Vous pouvez également essayer de définir le visibility à hidden, de sorte que l'élément reçoit une taille, mais il est invisible. En fonction de votre conception de ce qui pourrait fonctionner.

    Votre proposition initiale était correcte, mais la logique de ma position initiale était erronée. Une fois j'ai donné le script de la possibilité de récupérer la largeur de l'avant .hide()ing de l'élément, les chiffres étaient raisonnables.

    OriginalL'auteur Ariel

  2. 1

    J'ai eu un problème similaire dans la réception de ce qui semblait être des résultats aléatoires lors de l'appel de jQuery largeur fonctions. Lorsque le navigateur a été rafraîchie, je voudrais obtenir la réponse correcte à environ 50 pour cent du temps.

    J'ai fait l'erreur de faire immédiatement vérifier la largeur de la div dans le $(document).prêt() fonction. Quand j'ai changé d'appeler outerWidth () $(window).load(), la bonne réponse était toujours revenu.

    OriginalL'auteur Darnuhulu

  3. 1

    Vous devez appeler $(window).trigger('resize') qui va déclencher une fausse fenêtre de l'événement de redimensionnement.
    Par la suite, le outerWidth devraient avoir la bonne valeur.

    Assurez-vous que vous êtes le déclenchement de la fausse fenêtre de l'événement de redimensionnement une fois que vos données sont remplies.

    En d'autres termes, si vous êtes à la vérification de la largeur d'un <td> à l'intérieur d'un <th> par exemple, assurez-vous que la table est remplie et tout le redimensionnement est effectué avant le déclenchement de la fausse événement de redimensionnement et de la vérification de la outerWidth.

    C'est une solution de contournement, en raison de limitations mentionnées par Ariel https://stackoverflow.com/a/12085210/774630

    OriginalL'auteur Hussein El Motayam

  4. 0

    outherWidth() peut retourner des données non valides si l'élément possède une marge négative sur lui-même

    OriginalL'auteur Mladen Janjetovic