Discussion :

[kami-no-ryuu]

Bien le bonjour a vous.

Je suis en train de coder un menu en JS , qui lorsque l'on survole sur une partie du menu, ses sous menu s'affichent dans une div, tout sa semblait plutôt simple, voir très simple sauf que je me heurte a un petit soucis, lorsque je crée l'appel de la fonction qui s'en occupe, elle est contenue dans une boucle, qui l'appel donc X fois selon les trucs présent dans le menu, j'aurai besoin de récupéré la valeur du "i" de cette boucle utilisé lors de la création de l'appel, mais évidement c'est impossible vu qu'elle n'aura que la valeur du nombre total de tour de la boucle.

Comment faire donc pour moi savoir le quel est survolé ? (de façon numérique, le premier, le deuxième, troisième etc) j'ai même tenté de passer les nombre dans le même div mais les mettre en display none pour moi pouvoir les récupéré mais qu'il ne soit pas affiché, seul soucis quand je les récupère la balise est vide ...(je les récupère avec un lastChild)

Voici le code actuel :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function displayPics() 
{ 
var prelien = document.getElementById('menuDeroulant') ; 
 
    var lienst = prelien.getElementsByClassName('Menu_premier'); 
 
 
 
    for (var i = 0 ; i < lienst.length ; ++i) { 
 
        lienst[i].onmouseover = function() { 
		var truc = this.childNodes;
 
		alert(truc['0'].data);
 
			document.getElementById('contenu_bar').innerHTML = document.getElementById('sousMenu3').innerHTML;
            return false; 
 
        }; 
 
 
 
    }
 
} 
window.onload = displayPics;

e récupère ici "sousMenu3" mais évidement selon la valeur, se serais sousmenu1,2 etc.


Voilà merci d'avance a ceux qui participerons au sujet =) .

[Invité]

slt

jsais bien que t'es allemand, mais t'es incompréhensible.

lorsque je crée l'appel de la fonction qui s'en occupe, elle est contenue dans une boucle

la fonction qui s'occupe de quoi?

qui l'appel donc X fois selon les trucs présent dans le menu

C'est qui qui appèle cette fonction

j'aurai besoin de récupéré la valeur du "i" de cette boucle utilisé lors de la création de l'appel

dans une boucle de variable i, la valeur de i, c'est i.

, mais évidement c'est impossible vu qu'elle n'aura que la valeur du nombre total de tour de la boucle.

c'est qui elle.

Comment faire donc pour moi savoir le quel est survolé ?

Tu aurais du commencer par ca. Et encore une fois, c'est quoi le quel?

(de façon numérique, le premier, le deuxième, troisième etc) j'ai même tenté de passer les nombre dans le même div mais les mettre en display none pour moi pouvoir les récupéré mais qu'il ne soit pas affiché, seul soucis quand je les récupère la balise est vide ...(je les récupère avec un lastChild)

On voit que t'as fait un effort de réflexion, mais ca nous apporte rien si on te comprend pas.

[Invité]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
lienst[i].onmouseover = function() { 
		var truc = this.childNodes;
 		alert(truc['0'].data);
 			document.getElementById('contenu_bar').innerHTML = document.getElementById('sousMenu3').innerHTML;
            return false; 
        };

et enfin, en supposant que si pour un lien donné du menu
Pour ce lien il y a des sous menus
au survol de ce lien
tu veux afficher ses sous menus associés dans un div, alors

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
liens[i].onmouseover=(function(menuHovered){
 return function(){
  var leContenu='';//recuperer les fils de menuHovered  
  tondiv.innerHTML = leContenu
 };
})(liens[i]);

[kami-no-ryuu]

Je ne suis pas exactement allemand, mais plutôt belge =) (mêmes couleurs mais pas même orientation) .

Alors pour incompréhension, j'avoue que j'ai posté en coup de vent je devais partir je n'ai donc que relu "vite fait", toutes mes excuses si c'était pas très français.

Pour l architecture du menu, voici (pour être certain qu'on se comprend Bien sûr le soucis):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
 
<div id="menu">
 
			<ul id="menuDeroulant">
 
		<li>
			<a href="index.php" >Accueil</a><div style="display:none;" id="Valeur">1</div>
			<ul id="sousMenu1">
 
			</ul>
		</li>
 
		<li>
		<div class="Menu_premier">
			<a href="ref.php">référence</a><strong style="display:none;" id="Valeur">2</strong>
			</div>
			<ul id="sousMenu2">
 
			</ul>
		</li>
 
		<li><div class="Menu_premier">
			<a href="Actu.php?T=truc-2>Truc 2</a><div style="display:none;" id="Valeur"><strong>3</strong></div>
			</div>
			<div class="sousMenu">
			<ul id="sousMenu3">
				<li><a href="Tag_.php?Tag=PV">PV</a></li>
				<li><a href="Tag_.php?Tag=Annonce">Annonce</a></li>
 
			</ul>
			</div>
		</li>
		<li><div class="Menu_premier">
			<a href="Actu.php?T=truc-3">Truc 3</a><div style="display:none;" id="Valeur">4</div>
			</div>
			<div class="sousMenu">
			<ul id="sousMenu4">			      
				<li><a href="Tag_.php?Tag=Oricon">Top 10 Oricon</a></li>
				<li><a href="#">Annonce</a></li>
 
			</ul>
			</div>
 
//etc.....

Pour les nombres dans les balises '<strong>' c'était pour moi récupérer une valeur vu que je n'y arrivais pas avec le JS, mais étrangement je n'ai pas su les récupérer, mais de toute façon ca semblait pas super propre comme technique.

Pour faire simple, (et clair je l'espère cette fois-ci) je dois donc savoir si j'ai cliqué sur le premier, le deuxième, le troisième etc pour récupérer le "sousmenuX" (accueil = 0, référence = 1, etc)

voilà pour l'explication (j'aurai dû commencer avec l'exemple du menu)

Pour le code fourni, en faisant ca je récupère la valeur du i selon le lien pointé ?

Merci de ta participation à la résolution de mon problème.

[Willpower]

Ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
for (var i = 0 ; i < lienst.length ; ++i) { 
	(function(i){
		lienst[i].onmouseover = function() { 
			var truc = this.childNodes;
			alert(truc['0'].data);
			alert(i); // <-- indice souhaité ^^
			document.getElementById('contenu_bar').innerHTML = document.getElementById('sousMenu3').innerHTML;
			return false; 
		}; 
	})(i);
}

devrait faire ton bonheur.

[NoSmoking]

Bonsoir,
il existe également dans la Comment attribuer à des objets un onclick faisant appel à une variable de boucle ?

[kami-no-ryuu]

Effectivement ca fonctionne, l'exemple plus haut était bon aussi juste que j’avais pas bien compris pourquoi lien au lieu de i donc je n'ai pas penser a adapter.


Et bien grand merci a vous deux, ca m'est vraiment d'une grande aide ! =) .

Encore merci.

[Willpower]

Bonsoir,
il existe également dans la Comment attribuer à des objets un onclick faisant appel à une variable de boucle ?

l'encapsulation n'est-elle pas plus propre ?

[Invité]

Si l'encapsulation est plus propre. Et au passage on s'en tape d'un indice, ce qui nous intéresse c'est l'élément, donc le i qui traine, on peut faire mieux! (comme j'avais proposé quoi)

Je crois que ya des coquins qui s'amusent à surcharger le DOM avec des fonctions. Pe mootools. J'ai lu il y a longtemps un retour de quelqu'un qui connaissait (...) un développeur qui disait que c'était un bordel monstre.

Egalement les mots clés DOM lvl 2 me reviennent en mémoire, mais j'ai pas envie de chercher ce soir.

Enfin j'aimerais bien comprendre pourquoi on m'a downrated. Ironie du sort. Je fais remarquer ce qui va pas, on downrate, donc du coup je sais pas pourquoi on me downrate. Et d'un autre côté on veut pas livrer la solution.

Cherchez l'erreur!

[kami-no-ryuu]

Galerien69 :

si j'ai bien compris ta version du code voudrais que la div que je doit récupéré est dans le div survolé ?

[Invité]

si j'ai bien compris ta version du code voudrais que la div que je doit récupéré est dans le div survolé ?

non. Moi je veux rien, c'est toi qui veut.

J'ai écrit récupérer les fils de menuHovered, parce que dans ton propre code tu écris this.childNodes, ce qui sous-entend que tes sous menus sont imbriqués dans tes menus. Style

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<ul><li id="menu1"><ul><li id="sousMenu1">monTexte</li>...</ul></li></ul>

. C'est logique en soit, mais ce n'est pas forcé.

Tu peux très bien avoir le contenu de tes sous menus ailleurs dans le DOM, genre

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
<ul><li id="menu1"><ul><li id="sousMenu1" href="#sousMenu1Text"></li>...</ul></li></ul>
...
<div id="sousMenu1Text">monTexte</div><!-- on récupère le contenu de sousMenu1 à l'aide de href qui "pointe" vers le div id="sousMenu1Text" -->

Donc mon code suit ce que tu avais proposé. Après la manière dont tu récupères le contenu...c'est ton affaire!

[Invité]

l'encapsulation n'est-elle pas plus propre ?

Voilà un lien de 2010...
Où en gros on dépréconise l'ajout de fonction sur les elem du DOM.

Dans le cas de la FAQ c'est une simple variable ce qui est bcp moins impactant, mais ca reste un bad pattern. Car
1: l'idée est la même, on se sert du DOMjs pour faire ses petits soins.
2: Pourquoi pourrir le DOM pour un truc aussi futile qu'identifier un élément???
3: Pas de namespace, si ya un kevin qui passe par là, il te défonce ta variable en 2-2

Il y a probablement d'autres points, plus techniques que j'ai pas cités.
Non je n'ai pas regardé comment MooTools s'en sort.
Et oui, la spec a peut-être évolué depuis.

[kami-no-ryuu]

Non ils ne sont pas embraqué, je récupérais juste un nombre mis en display none vu que j'arrivais pas a récupérer la valeur de i, mais maintenant je ne le récupère plus, la div de chaque sous menu est a part du div qui est vérifier pour le survole.

[Invité]

Dans ton markup,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
<div class="Menu_premier">
			<a href="ref.php">référence</a><strong style="display:none;" id="Valeur">2</strong>
			</div>
			<ul id="sousMenu2">
 
			</ul>
		</li>

Tes sous menus semblent quand meme pas mal imbriqués dans tes menus.

Au lieu de te poser des questions metaphysiques, tu devrais essayer d'afficher menuHovered.innerHTML dans le code que je t'ai propose, ou bien i dans l'alert de willpower, pour voir si tu peux retrouver le sous menu correspondant a ton menu.

[Willpower]

Voilà un lien de 2010...
Où en gros on dépréconise l'ajout de fonction sur les elem du DOM.

Dans le cas de la FAQ c'est une simple variable ce qui est bcp moins impactant, mais ca reste un bad pattern. Car
1: l'idée est la même, on se sert du DOMjs pour faire ses petits soins.
2: Pourquoi pourrir le DOM pour un truc aussi futile qu'identifier un élément???
3: Pas de namespace, si ya un kevin qui passe par là, il te défonce ta variable en 2-2

Il y a probablement d'autres points, plus techniques que j'ai pas cités.
Non je n'ai pas regardé comment MooTools s'en sort.
Et oui, la spec a peut-être évolué depuis.

Mootools ne fonctionne-t'il pas de la même manière que jQuery qui assigne des fonctions à des objets javascript (des array's dans le cas de jquery) ? qui eux-même contiennent les objets associés aux éléments du dom. Contrairement à ce que dit l'article, on ne fait jamais Element.hide() mais on fait bien $(Element).hide(). Et $(Element) n'est pas égal à Element, à moins que je ne me trompe ?

[Invité]

ben nan justement.

jquery fait un wrapper comme tu las ecrit.

Quant a Mootools, non, ils surchargent bien Element (meme pas son prototype, mais la surcharge est faite a chaque instantiation explicite via javascript) (correspondant a lapi du DOM):
http://mootools.net/docs/core/Element/Element

In Internet Explorer, the Element is extended the first time document.id is called on it, and all the Element Methods become available.
Browsers with native HTMLElement support, such as Safari, Firefox, and Opera, apply all the Element Methods to every DOM element automatically.

pour le code
https://github.com/mootools/mootools...ent/Element.js
ici, on cree un Element. (s'agit-il d'un wrapper?), on arrive dans id:function, qui retourne un Object.append.

https://github.com/mootools/mootools...e/Core/Core.js
Et dans Core on se rend compte qu'il s'agit vraiment de l'Object js etendu avec append.

Bref, c'est vraiment les objets natifs qui sont utilises.

Cela dit, je trouve que c'est joli. Mais quand meme dangereux. (namespace en particulier)

[Willpower]

Ah effectivement, je viens de tester le $(Element) de MooTools renvoit bien un DOM object. Peut-on en conclure que jQuery est meilleur de ce point de vue là ?

[Invité]

de quel point de vue parle-t-on?
Si on parle d'un point de vue performance, c'est pas sur. Notamment, j'ai peut etre rate la surcharge sur prototype, qui du coup ferait economiser pas mal de temps a MooTools.
Si on parle d'un point de vue visibilite du code c'est pas sur. Le code de MooTools est quand meme super clair.

Si on parle d'un point de vue encapsulation, clairement.
Si on parle de cross compatibilite, je dirais jquery plus fiable puisque ne depend pas de DomLvl2 pour la surcharge.

Enfin, j'ai pas regarde (depuis le temps...) le core de jQuery, et je manque certainement de recul pour repondre a cette question.

[kami-no-ryuu]

j'ai testé avec rien qu'un alert, et il semble pas le prendre en compte :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
  for (var i = 0 ; i < lienst.length ; ++i) { 
       (
lienst[i].onmouseover= (function(menuHovered){
 return function(){
 
  alert("teste");
 };
})(lienst[i]);
 
}

[Invité]

c'est que ton script est foireux avant.