Menu avec javascript non intrusif... suite

Bonjour,

Je travaille sur la création d'un menu avec du javascript non intrusif.
Je bloque sur le point suivant :

Pour chaque rubrique, j'ai un sous menu sauf pour la première rubrique, ce qui fait qu'ensuite le nommage de mes sous-rubriques est décalé :

(code généré par JS)
<dl id="menu">

		<dt id="menu1"><a href="#">Menu 1</a></dt>
			
		<dt id="menu2">Menu 2</dt>
			<dd id="smenu1">
				<ul>
					<li><a href="#">Sous-Menu 2.1</a></li>
					<li><a href="#">Sous-Menu 2.2</a></li>

					<li><a href="#">Sous-Menu 2.3</a></li>
				</ul>
			</dd>	

		<dt id="menu3">Menu 3</dt>
			<dd id="smenu2">
				<ul>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>

					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.1</a></li>
				</ul>
			</dd>
</dl>

Javascript (en construction) :

function showmenu(id) {
if (!document.getElementsByTagName) return false;
var dls = document.getElementsByTagName("dl");
	for (var va=0;va<dls.length;va++) {
	var dts = dls[va].getElementsByTagName("dt");
	var dds = dls[va].getElementsByTagName("dd");
		for (var vb=0;vb<dts.length;vb++) {
			vc=vb+1;
			dts[vb].setAttribute("id","menu"+vc);
			dds[vb].setAttribute("id","smenu"+vc);					
			}
}

}

Comment dois-je modifier mon code pour éviter ce décalage ?

Merci.
Modifié par EricLB (11 Aug 2006 - 10:02)

Salut,

J'ai un peu modifié ta fonction:

function showmenu() {
if (!document.getElementsByTagName) return false;
var dls = document.getElementsByTagName("dl");
for (var va=0;va<dls.length;va++) {
	var dts = dls[ va ].getElementsByTagName("dt");
	for (var vb=0;vb<dts.length;vb++) {
		vc = vb+1;
		dts [ vb ] .setAttribute("id","menu"+vc);							
	}
	var dds = dls [ va ] .getElementsByTagName("dd");
	for (var vb=0;vb<dds.length;vb++) {
		if (dds[ vb ].previousSibling.tagName == "DT") 
			dds[ vb ].setAttribute("id","s"+dds[ vb ].previousSibling.id);							
		if (dds[ vb ].previousSibling.nodeType == 3 && dds[ vb ].previousSibling.previousSibling.tagName == "DT")
			dds[ vb ].setAttribute("id","s"+dds[ vb ].previousSibling.previousSibling.id);
	}	
}
}

a+

Salut !

Merci pour ta réponse - j'avais pensé à nextSibling pour pointer les balises <dd>, mais effectivement previousSibling me semble plus adapté à ce cas.

J'ai testé ton code, mais sans résultat. Si je fais un alert() sur dds .previousSibling.tagName, j'ai comme résultat : "undefined".

En revanche il me nomme bien les id des balises <dt> et ne me renvoie pas d'erreur dans la console javascript.
Modifié par EricLB (11 Aug 2006 - 17:36)

a écrit :
J'ai testé ton code, mais sans résultat. Si je fais un alert() sur dds vb .previousSibling.tagName, j'ai comme résultat : "undefined".

La mise en forme du forum fait des choses bizarres avec les crochets,
si tu as copié/collé le code à partir de ce que je t'ai envoyé, il y a peut-être une erreur qui s'est glissée.

Chez moi, le code fonctionne correctement, contacte moi par MP si tu trouves pas l'erreur

dunjl a écrit :
Chez moi, le code fonctionne correctement, contacte moi par MP si tu trouves pas l'erreur

Merci de veiller à poursuivre la discussion en public.

Dunjl : je t'ai envoyé mon code en MP.

Laurent : je posterai le résultat en public dès que j'aurais trouvé le problème (ou dès que Dunjl m'aura indiqué le pb). Merci

a écrit :

Merci de veiller à poursuivre la discussion en public.

Ok, désolé, c'est seulement pour permettre le transfert d'un code, qui, placé dans les balises [code] du forum, est parfois modifié quand il contient des crochets (en l'occurrence les crochets deviennent invisibles).
Ce qui peut géner avec un copier/coller.

La discussion, elle, reste publique

Pour info : Le code de dunjl fonctionne.

Il faut indiquer DT et DD en majuscule.
tagName renvoie DT & DD et non dt et dd.

Sujet résolu, donc !
Modifié par EricLB (11 Aug 2006 - 23:44)

EricLB a écrit :
Pour info : Le code de dunjl fonctionne.

Il faut indiquer DT et DD en majuscule.
tagName renvoie DT & DD et non dt et dd.

Sujet résolu, donc !

vous auriez pu faire un nextSibling.tagName.toLowerCase() == "dt"
au moins comme ça on est à l'abris.

sinon pourquoi tagName ? je préfère utiliser nodeName

Bonjour,

a écrit :
sinon pourquoi tagName ? je préfère utiliser nodeName

C'est vrai, c'est plus judicieux. Il eut été sympa d'expliquer pourquoi

a écrit :
from quirksmode.org
My advice: don't use tagName. nodeName contains all functionalities of tagName, plus a few more. Therefore nodeName is always the better choice.

nodeName renvoie en fait différentes valeurs selon le type de noeud, pour un noeud Element il renvoie tagName cf nodeName

merci pour la remarque

a+

Bonjour,

J'en étais resté là de mon menu la dernière fois :

function showmenu() {
if (!document.getElementsByTagName) return false;
var dls = document.getElementsByTagName("dl");
for (var a=0;a<dls.length;a++) {
	var dts = dls[va].getElementsByTagName("dt");
	for (var b=0;b<dts.length;b++) {
		c = b+1;
		dts[vb].setAttribute("id","menu"+c);
	}
	var dds = dls[va].getElementsByTagName("dd");
	for (var b=0;b<dds.length;b++) {
		if (dds[vb].previousSibling.tagName == "dt")
			{dds[vb].setAttribute("id","s"+dds[vb].previousSibling.id);}				
		if (dds[vb].previousSibling.nodeType == 3 && dds[vb].previousSibling.previousSibling.tagName == "dt")
			{dds[vb].setAttribute("id","s"+dds[vb].previousSibling.previousSibling.id);}
	}	
}
}

Une fois les différents éléments identifiés, comment inclure cette partie :

var d = document.getElementById(id);
for (var i = 1; i<=10; i++) {
  if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
}
if (d) {d.style.display='block';}
window.onload=showmenu;

J'ai essayé plusieurs solutions mais il ne reconnait pas : d => var d = document.getElementById(id);

NB vb est en fait : crochet b crochet interprété comme bold dans les post
Modifié par EricLB (04 Sep 2006 - 11:31)