jQuery : différence entre visible et hidden
Je voulais tester si un élément est visible, ou non, en jQuery.
Après quelques recherches sur le net, on tombe souvent sur des exemples comme cela :
if ( $("#monid").is(':visible')) { ... }
C’est une grossière erreur.
Voici l’explication, et le principe qu’il faut avoir en tête :
Lorsqu’on cache ou qu’on montre un élément avec jQuery ou jQueryUI, cela va presque toujours modifier la propriété display
(display:none
, display:block
, etc).
La propriété visible
est complètement différente, et est utilisée pour cacher un élément, mais en gardant la place qu’elle occupe.
Pour vérifier si quelque chose est « caché » (notez la subtilité avec la différence de « pas visible« ) il faut vérifier la propriété css display
.
Exemple concret :
if ( $("#monid").css('display')!='none') { ... }
[…] Côté actualité en général, j'ai apprécié le rappel qu'a effectué mon ami et lecteur Olivier Pons. Je vous invite à découvrir son bref article sur la différence entre hidden et visible avec jQuery. […]
Je ne suis pas d’accord ou alors je n’ai rien compris le sens de l’article. Pour moi, le selector « :visible » vérifie la propriété css display.
Si display: none, alors .is(« :visible ») retourne false, et inversement si display: block, ou autre.
Pour la propriété css visibility, là il faut passer par la propriété css.
Le jsFiddle qui explique tout ça (http://jsfiddle.net/boucman/yg8Ba/9/).
Si tu ne comprends pas, alors j’ai un bon lien : je n’arrivais pas, en utilisant «
if ( $("#monid").is(':visible')) { ... }
» à vérifier s’il était visible. Le problème, c’est que des fois ça fonctionne mais pas tout le temps.Et j’ai même un exemple concret, le mien, ou ça ne fonctionne pas, ici : http://jsfiddle.net/uRhuK/. En fait ça fonctionne une fois quand tu clique sur les éléments, mais si tu re-clique dessus, ça ne fonctionne plus !
…
Pourquoi ?
Parce que ce code ne fonctionne pas : «
if ( $("#monid").is(':visible')) { ... }
»J’ai donc posé la question ici et si tu lis bien le détail des réponses, les gens l’expliquent, et peut-être que leur explication sera plus compréhensible que la mienne.
J’espère que ce lien t’aidera plus 😉 .
Salut,
Je reviens vers toi car cette histoire de visible me trottait dans la tête.
Je viens de regarder directement dans le code de jQuery pour voir ce que les selectors « :visible » et « :hidden » faisaient. Sachant que le selector « visible » retourne l’inverse du selector « :hidden ».
Dans ton article tu dis que le selector « :visible » ne vérifie pas la propriété css « display » et qu’il concerne les éléments cachés gardant la place qu’ils occupent.
Mais au contraire, pour vérifier que l’élément est caché, il vérifie la propriété css « display » est égale à « none » ou que la hauteur ou la largeur de l’élément est égale à 0.
Pour ce qui est de ton exemple sur jsFiddle, de mon côté il fonctionne très bien.
Bonsoir !
Je te copie colle l’idée de la réponse que j’ai donnée dans le lien de ma réponse précédente:
C’est à partir de là que j’ai fait mon article… donc si je me suis trompé quelque part, je ne vois pas trop où…
Bonjour,
Visible n’est pas une propriété mais un selector. Je pense alors qu’il voulait parler plutôt de la propriété visibility, qui, certes, masque un élément en gardant la place qu’il occupe. Mais ça n’a rien à voir avec le selector « :visible » de jQuery qui lui vérifie la propriété css display. Il n’y a qu’a regarder dans le code source (lien dans mon commentaire ci-dessus).
Je commence à me dire qu’il y a un gros quiproquo mais je ne vois pas où 😉