11540 sujets

JavaScript, DOM et API Web HTML5

Bonjour à tous,
Je suis en train de préparer un template à utiliser sur un CMS. Dans ce code, la div qui représente mon menu est en position:fixed, ce qui est figuré par la classe "fixed". Mais il y a un moment lorsqu'on scrolle vers le bas où le menu doit remonter pour ne pas déborder sur le bas de page.

Pour l'heure, mon code fonctionne parfaitement dans tous les navigateurs, sauf, bien sûr!, avec IE 9. J'utilise jQuery 1.7.2.

J'ai constaté en utilisant les outils de développement que la ligne de code ci-dessous reste inopérante dans IE 9 alors qu'elle fonctionne partout ailleurs. En clair, avec FF et Chromium, le DOM est mis à jour automatiquement. Avec Opera, je vois le résultat à l'écran puis quand je rafraîchis le DOM. Avec IE, rien ne change, à croire que jQuery n'arrive pas à enlever la classe "absolute" (ou n'importe quelle autre chaîne d'ailleurs) d'un noeud.

$('#Nav').removeClass('absolute').addClass('fixed');


Y a-t-il une précaution particulière à prendre pour IE ? J'en ai vraiment perdu mon latin. J'espérais naïvement que le temps des hacks navigateur par navigateur était fini…

Merci.
Problème résolu.

Version courte
Le problème était causé par une balise <a> mal fermée, c'est-à-dire fermée par un </p> au lieu d'être fermée comme il se doit par un </a>.

Version longue (pour ceux qui n'ont pas la flemme de lire)
Il se fait que IE (dans son mode par défaut j'imagine, je n'utilise pas ce navigateur), quand il tombe sur une balise mal fermée, provoque une duplication d'une partie du DOM. J'imagine qu'il y a en place une procédure pour rattraper les bêtises des développeurs. Il s'ensuit que mon élément d'id "Nav" existe en une seule fois dans le code HTML envoyé par le serveur, en une seule fois dans la source que me présente IE, mais il existe en deux fois dans le DOM. Voir image plus bas.

Donc, quand mon code JS enlève et place des classes sans que cela ait un effet, c'est parce que la modif des classes se fait sur la première occurrence de l'id "Nav". Or l'élément rendu à l'écran est en fait la deuxième occurrence… Fallait le deviner.

http://img33.imageshack.us/img33/5921/mwsnap20120817133559dom.png

On peut constater que IE s'emmêle (un peu car c'est trop facile de taper sur Microsoft… c'est quand même mon stagiaire qui a merdé) les pinceaux: les commentaires ouvrant et fermant de "CONTAINER MID" (ainsi que ceux de "NAVIGATION") ne sont pas au même niveau d'imbrication… Tout ça, sans aucun message d'erreur or, à en croire la pub, IE 9 a "les meilleurs outils pour les développeurs web". Ouais, c'est ça! Quand un simple Refresh de l'onglet HTML ferme complètement l'arbre qui figure le DOM… Et pourquoi il faut un Refresh d'abord ? Ah oui, parce que la vue n'est pas synchronisée en temps réel avec le DOM.

Bref, il a suffi de remplacer le "</p>" par le "</a>" qu'il fallait pour que tout rentre dans l'ordre. En espérant que ça serve à d'autres.