[résolu] Window.addEventListener et paramètres

Bonjour TLM,

je déclenche des fonctions javascript sur mon site perso en utilisant la fonction eval, qui évalue une chaine de caractère qui attache des écouteurs aux balises 'lmenu'+i.

Pour passer des paramètres j'ai fait plusieurs fonctions 'tata'+i et 'tatta'+i, chaque fonction ayant les paramètres correspondants.

Après de nombreux tests, je voulais savoir si c'est pas possible de simplifier tout ça, et si c'est possible de sélectionner chaque balise <dl> plutôt que de devoir associer un id 'lmenu1' par exemple comme j'ai fait.

function montre(smenu,menu) {
	var smenu = document.getElementById(smenu);
	var menu = document.getElementById(menu);
	for (var i = 0; i<8; i++) {
		if (document.getElementById('smenu'+i)) {
		document.getElementById('smenu'+i).style.display='none';
		document.getElementById('menu'+i).style.backgroundColor='#ad3329';
		document.getElementById('menu'+i).style.color='white';
		}
	}
	if (smenu) {smenu.style.display='block';}
	if (menu) {menu.style.color='#ad3329';menu.style.backgroundColor='white';}
}

function tata0 () {montre('smenu0','menu0');}
function tata1 () {montre('smenu1','menu1');}
function tata2 () {montre('smenu2','menu2');}
function tata3 () {montre('smenu3','menu3');}
function tata4 () {montre('smenu4','menu4');}
function tata5 () {montre('smenu5','menu5');}
function tata6 () {montre('smenu6','menu6');}
function tata7 () {montre('smenu7','menu7');}

function ttata0 () {montre();}
function ttata1 () {montre();}
function ttata2 () {montre();}
function ttata3 () {montre();}
function ttata4 () {montre();}
function ttata5 () {montre();}
function ttata6 () {montre();}
function ttata7 () {montre();}

function toto () {
	for (var i = 0; i<8; i++) {
	if (window.addEventListener) {
		chaine1='document.getElementById(\'lmenu'+i+'\')\.addEventListener(\'mouseover\', tata'+i+', false)';
		chaine2='document.getElementById(\'ssmenu'+i+'\')\.addEventListener(\'mouseout\', ttata'+i+', false)';
		eval(chaine1);
		eval(chaine2);
		}
	else if (window.attachEvent) {
		chaine1='document.getElementById(\'lmenu'+i+'\')\.attachEvent(\'onmouseover\', tata'+i+')';
		chaine2='document.getElementById(\'ssmenu'+i+'\')\.attachEvent(\'onmouseout\', ttata'+i+')';
		eval(chaine1);
		eval(chaine2);
		}
	}
}

if (window.addEventListener) {
	window.addEventListener('load', montre, false);
	window.addEventListener('load', toto, false);
}

else if (window.attachEvent) {
	window.attachEvent('onload', montre);
	window.attachEvent('onload', toto);
}

toute proposition est la bienvenue
Modifié par ChrisG (20 Jul 2006 - 01:03)

ChrisG a écrit :
Bonjour TLM,

je déclenche des fonctions javascript sur mon site perso en utilisant la fonction eval, qui évalue une chaine de caractère qui attache des écouteurs aux balises 'lmenu'+i.

Pour passer des paramètres j'ai fait plusieurs fonctions 'tata'+i et 'tatta'+i, chaque fonction ayant les paramètres correspondants.

Après de nombreux tests, je voulais savoir si c'est pas possible de simplifier tout ça, et si c'est possible de sélectionner chaque balise <dl> plutôt que de devoir associer un id 'lmenu1' par exemple comme j'ai fait.

Je te conseille de garder des id pour tes dl, c'est plus sûr dans le cas où tu ajouterais une liste de définition ne faisant pas partie de tes menus.

Ton script pourrait effectivement être bien simplifié :

function montre(smenu,menu) {
	var smenu = document.getElementById(smenu);
	var menu = document.getElementById(menu);
	for (var i = 0; i<8; i++) {
		if (document.getElementById('smenu'+i)) {
		document.getElementById('smenu'+i).style.display='none';
		document.getElementById('menu'+i).style.backgroundColor='#ad3329';
		document.getElementById('menu'+i).style.color='white';
		}
	}
	if (smenu) {smenu.style.display='block';}
	if (menu) {menu.style.color='#ad3329';menu.style.backgroundColor='white';}
}

function toto () {
	for (var i = 0; i<8; i++) {
var f = new Function("", "montre('smenu"+i+"', 'menu"+i+"'); ");
var o = document.getElementById('lmenu'+i);
if (window.addEventListener) {
o.addEventListener('mouseover', f, false);
o.addEventListener('mouseout', montre, false);
}
	else if (window.attachEvent) {
o.attachEvent('onmouseover', f);
o.attachEvent('onmouseout', montre);
}
	}
}

if (window.addEventListener) {
	window.addEventListener('load', montre, false);
	window.addEventListener('load', toto, false);
}

else if (window.attachEvent) {
	window.attachEvent('onload', montre);
	window.attachEvent('onload', toto);
}

Il y a encore sûrement mieux à faire, mais ça raccourcit déjà pas mal.

merci ! mais comment faire malgré tes conseils pour ne pas avoir à mettre des id sur les <dl> ?

Avant de pouvoir répondre à cette question, il faut que tu me dises à quoi correspondent les éléments #smenuN et #menuN dans ta page web.
Soit tu expliques, soit tu mets un extrait de code (uniquement ce qui est nécessaire, hein, pas toute la page, sinon je ne lis plus)

ChrisG a écrit :
merci ! mais comment faire malgré tes conseils pour ne pas avoir à mettre des id sur les <dl> ?

Bonjour,
c'est possible avec l'usage de Menu.getElementsByTagName("dl");
Modifié par chmel (14 Jul 2006 - 23:15)

Dans ce cas pour que ça marche, il faut soit attribuer des id automatiques, soit passer des objets dans les fonctions.

QuentinC a écrit :
Dans ce cas pour que ça marche, il faut soit attribuer des id automatiques, soit passer des objets dans les fonctions.

Non, les objets sont :

dds = Menu.getElementsByTagName("dd");//tableau des sous-menus

J'ai fait un essai en local et ça marche. Je n'ai rien pour mettre en ligne en ce moment, alors je vais expliquer la marche à suivre :
- Repport dans les tags "dd", du style des sous-menus récupéré dans le script enrouler.js
- rectifié la largeur des éléments "dt" correspondants aux titres de menu toujours visibles
:

[#red]#menu{margin:0}[/#]
dd {
[#red]	margin: -19px 0 0 150px;
	padding: 1px 0 0 15px;
	position: absolute;[/#]
	list-style-type: none;
	cursor: pointer;
}

dt {
[#red]width: 140px[/#];

reste plus qu'à remplacer

<script type="text/javascript" src="enrouler.js"></script>
<script type="text/javascript" src="montre.js"></script>

par

<script type="text/javascript" src="menu.js"></script>

On peut supprimer toutes les id devenues inutiles

Modifié par chmel (15 Jul 2006 - 23:40)

merci je vais étudier ça. En plus d'après w3schools ça marche sur beaucoup de browsers et c'est valide w3c.

Salut,
le test en ligne.

reste à peaufiner le style

merci ! mais je me confronte encore au problème d' IE qui n'arrive pas à lire le javascript et le menu ne marche plus ! je panique...

Chmel, en supprimant le script enrouler.js et modifiant le CSS comme t'as fait tu verras que le javascript devient obstrusif. c.a.d que que le js est désactivé on ne peut plus accéder à tout le contenu.

j'ai fait un truc bien propre maintenant, le plus propre possible et ça passe pas sur IE6

ChrisG a écrit :
Chmel, en supprimant le script enrouler.js et modifiant le CSS comme t'as fait tu verras que le javascript devient obstrusif. c.a.d que que le js est désactivé on ne peut plus accéder à tout le contenu.

j'ai fait un truc bien propre maintenant, le plus propre possible et ça passe pas sur IE6

la page test que j'ai mise en ligne fonctionne pourtant, alors le coups de l'obstructif .
Le seul inconvénient est que hover sur dt ne marche plus sur IE. pour cela, dans le script il faut employer une class au lieu du display:block.
Je l'ai fait dans un autre script destiné à un menu liste non ordonnée, plus simple à mettre en oeuvre et ouvrant d'autres possibilités( accessible au clavier et si js est désactvé, menu ouvert à la page en cours, temporisation en entrée et en sortie ...). Mais toujours avec le besoin d'une seule id, celle du menu. Pour le reste, j'utilise les objets du DOM et pour une maintenance plus aisée, séparation script et css.
Modifié par chmel (18 Jul 2006 - 01:25)

Bonjour,

Les différents menus proposés ici sont tous problématiques à un titre ou un autre, et aucun ne peut être qualifié d'accessible.

Soyez très prudents dans ce domaine, s'il vous plaît, lorsque ces menus sont mis en ligne pour être reproduits par d'autres webmestres : il ne doit pas y avoir de confusion sur ce point à leurs yeux.

Laurent Denis a écrit :
Bonjour,

Les différents menus proposés ici sont tous problématiques à un titre ou un autre, et aucun ne peut être qualifié d'accessible.

Soyez très prudents dans ce domaine, s'il vous plaît, lorsque ces menus sont mis en ligne pour être reproduits par d'autres webmestres : il ne doit pas y avoir de confusion sur ce point à leurs yeux.

Bonjour,
Le mot "accessible" est chez toi strict et exclusif.

moi a écrit :
menu liste non ordonnée, plus simple à mettre en oeuvre et ouvrant d'autres possibilités( accessible au clavier et si js est désactvé, menu ouvert à la page en cours, temporisation en entrée et en sortie ...).

Je viens de "retester" ces pages avec javascript désactivé. En effet, à la souris, seuls les liens visibles sont parcourus alors qu'au clavier, même les liens invisibles le sont.
Je ne sais pas si c'est de cela dont tu "parles". Cela peut se résoudre avec un display:none sur les sous-menus non concernés, mais à force ça devient compliqué de contenter tout le monde. J'ai un peu tout testé pour finir par te rejoindre par le fait que le menu dynamique plait plus au webmaster et son employeur qu'à ses visiteurs. Là, je prends encore des risques , car tout ce que je fait n'est qu'amateur.

Chmel: ne te fâche pas; c'est juste que c'est très complexe, un menu déroulant accessible. Je sais bien que cela peut être frustrant pour un développeur...

Le mot "accessible" ne fait que signifier un nombre précis de critères normalisés, à respecter pour recevoir ce qualificatif.

Dans le cas de celui de ta page d'accueil:
- la navigation est impossible au clavier si javascript est activé
- l'affichage et la tabulation sont incohérents sans javascript ;
- le contenu et les sous-menus se superposent avec couleurs désactivées et agrandissement des caractères (IE5.x ou FF) ;

En outre:
- l'ouverture des sous-menus sera très fréquemment non perceptible dans une loupe d'écran ;
- la structure en liste de définition le rend peu navigable dans un lecteur d'écran...
Modifié par Laurent Denis (18 Jul 2006 - 14:53)

Bonjour Laurent Denis,

je m'efforce à rendre mon site le plus propre possible, accessible comme tu dis -ceci dit je suis en phase d'apprentissage- même si on s'enrichie tous les jours. En me disant ce qu'il faut changer je ferais en sorte que mon site soit pleinement accessible. J'ai basé mon travail sur un menu alsa que auquel j'ai ajouté des éléments, je pensais que le menu alsa est "navigable dans un lecteur d'écran" (la structure en liste de définition). Le menu alsa marche au clic et le mien au survol de la souris je trouve ça plus ergonomique (moins d'étapes pour accéder au contenu), même s'il faut bien garder le focus pour ne pas "perdre" les sous-menus. De même il y a trop de titres pour mettre mon menu à l'horizontale, et à la verticale j'ai trouvé ce moyen de ne pas prendre trop de place avec le menu. C'est avec une grande motivation que je vais suivre tes conseils pour changer tout ça.

Chmel j'ai réessayé ta page sous IE 6 javascript désactivé et on ne voit que 10 sous menu parmis plus de 30.

Quand vous parlez de navigation au clavier et tabulation je vois pas du tout ! avec le js je n'arrive pas à naviguer au clavier !?

Quelqu'un sait comment régler l'erreur "'style' a la valeur Null ou n'est pas un objet" dans IE !?

bonne soirée

Salut,

Bon j'essaye de placer quelques réflexions. c'est pas simple simple parce que je risque toujours de m'enfader avec javascript

Néanmoins la première chose que je dirais c'est :
ça ne va pas du tout votre affaire et on ne risque pas d'y arriver !!! et pour une raison très simple, il n'y a aucune méthode dans la conception du document.
On est dans un cas très similaire de celui qui veut élaborer une css ex nihilo sans avoir de document html conséquent auquel l'appliquer et qui s'étonne qu'on lui parle de divite.

A quel type de document a t'on affaire ?
Ben une banalité :

Titre

Menu

Contenu

Parlons du menu, la première chose que l'on peut dire c'est que moins il encombre le document mieux on se porte.

Si on oublie un peu le javascript (on n'a d'ailleurs pas à l'oublier puisqu'il n'en est pas question du tout) et si on essaye d'être raisonnable alors on coderait quelque chose comme ceci :

<h1>Titre</h1>
<h2>Menu</h2>
<ul>
<li><a href="menu_webdesign.html">Webdesign</a></li>
<li><a href="menu_motion.html">Motion / Flash</a></li>
<li><a href="menu_print.html">Print</a></li>
<li><a href="menu_logotypes.html">Logotypes</a></li>
<li><a href="menu_graphics.html">Graphics</a></li>
<li><a href="menu_fine_art.html">Fine art</a></li>
<li><a href="menu_photographs.html">Photographs</a></li>
<li><a href="menu_goodies.html">Goodies</a></li>
</ul>
<h2>Contenu</h2>
<div>
Blablabla...

Blablabla...

Blablabla...
</div>

Que vous en semble t'il ?
c'est bien non ? Simple, le menu est un peu long mais ça reste raisonnable. Par le biais des pages menu_rubrique.html tous les liens sont aisément accessible et on peut en plus optimiser cela par un plan du site.

Voilà personnellement de quoi je partirais et à quoi je me tiendrais du point de vue html et ce quelque soit le caractère fantaisiste ou audacieux du javascript que je souhaiterais mettre en oeuvre. Et même si ça doit être difficile ou laborieux à réaliser.

Dit autrement, ce html étant fixé, tout ce qui concerne le menu déroulant javascript doit maintenant être intégralement généré par javascript lui même.

sinon je voulais juste faire remarquer que dans l'exemple donné par chmel, si le contenu des dt avait été des liens et non du texte simple alors la question de l'accès au menu et aux sous menu en navigation clavier aurait été réglée pour peu qu'on complète le js par :

dls[i ].onmouseover=dls[i ].onfocus=function()
dls[i ].onmouseout=dls[i ].onblur=function()

voilà, ben bon courage quoi

merci clb56 pour ton intervention, j'ai à peu près compris le code à ajouter pour le clavier, mais je sais toujours pas comment naviguer au clavier ni l'origine de mon erreur sur IE. je cherche je cherche.. je veux rendre accessible mon site aussi.