Javascript : séparer comportement et structure

[pierredureau]

En passant, merci pour la leçon bobe, et si tu à une minute pour glisser les deux ou trois commentaires qui vont bien, je suis sur que tu vas créer des vocations ...

En tant que principal intéressé par cette discussion, je suis heureux de vous annoncer que ma vocation est "suscitée"...

[ElMoustiko]

Salut les scripteurs, j'avais pas tilté que ce forum incluait le JS aussi...

Me voilà comblé moi qui pensé que toute le monde s'en moqué !

Ca fait un bout de temps aussi que je suis turlupiné par la séparation contenu/script, j'ai deja fait des bons essais plutot concluant. (ouverture des liens externes dans une nouvelle fenetre avec script separé du contenu, on recupere les <a class="lien_ext"> et on les ouvre dans une nouvelle fenetre, si JS desactivé, le lien se comporte normalement)(galerie d'image très simple faite vite fait pas très évoluée mais tout à fait fonctionnelle)

Et là je me suis REmis au menu dynamique en extrayant la source JS.

En voyant ce topic, je me suis dis, je bosse pour rien et en lisant le reste... bah je vais vous paraitre rabats joie mais je suis pas satisfait pas votre script

C'est trop gros ;p

J'etais parti sur cette piste :

function displayMenu()
{
	var dl = document.getElementById('menu');
	var dts = dl.getElementsByTagName('dt');

	var dds = dl.getElementsByTagName('dd');

	for(var j = 0; j < dds.length; j++ )
	{
  dds[j].style.display = "none";
	}

	for(var i = 0; i < dts.length; i++)
	{
  if(dds[i].style.display != "none")
  {
 	 dts[i].onclick = function()
 	 {
    dds[i].style.display = "none";
 	 }
  }
  else
  {
 	 dts[i].onclick = function()
 	 {
    dds[i].style.display = "";
 	 }
  }
	}
}
window.onload = displayMenu;

Bon 1er probleme, je pensais qu'il etait possible de passer la variable "i" de fonction en fonction imbriquées comme ici, mais dds n'est pas pris en compte, ca correspondrait (dans ma tete) au dd du même niveau que le dt cliqué. Bon en mettant dds[0] pour mes tests ca fonctionne, mais (2eme probleme) le "if else" ne fonctionne pas, si le menu est caché (else) ca m'ouvre le menu, (en mettant dds[0] pour mes tests) mais maintenant que le style est différent de none (!="none") je devrais pouvoir faire la condition du if dds[0].style.display = "none" ; mais ca ne fonctionne pas...

Donc alors je me demandais pourquoi le "if else" ne fonctionnait pas.

Et ensuite comment passer la valeur courante du "i" dans ma fonction...

j'ai testé dts.onclick = function(i)... mais sans succes non plus.

Parceque si c'est 2 problèmes trouvaient une solution le script marcherais parfaitement et serait hypra court ;p

Si vous pouviez m'aider.

[ElMoustiko]

Bon j'avais fait le gogol pour le "if else", j'ai une fonction qui marche dans l'idée :

function displayMenu()
{
	var dl = document.getElementById('menu');
	var dts = dl.getElementsByTagName('dt');

	var dds = dl.getElementsByTagName('dd');

	for(var j = 0; j < dds.length; j++ )
	{
  dds[j].style.display = "none";
	}

	for(var i = 0; i < dts.length; i++)
	{
  dts[i].onclick = function()
  {
 	 if(dds[0].style.display != "none")
 	 {
    dds[0].style.display = "none";
 	 }
 	 else
 	 {
    dds[0].style.display = "";
 	 }
  }
	}
}
window.onload = displayMenu;

Voilà donc en faisant ca, ca fonctionne, au click sur un <dt> ca ouvre le dd[0] mais moi je voudrais ouvrir dd au click sur dt mais je n'arrive pas a recuperer la valeur de i (dans dts) c'est là qu'est mon problème.

Donc en gros je voudrais remplacer dds[0] par dts ... mais c'est là que je bloque.

A noter, j'associe 1 dd à 1 dt et pas 2dd à 1 dt ou ce genre de chose, dts.length DOIT etre egal à dds.length, ce qui est logique, on associe 1 sous menu à 1 titre de menu.

Donc si vous aviez une idée pour recuperer la valeur de i...

J'ai testé, dts.onclick = function(i) {..} mais sans succes

Il n'y aurai pas un truc du genre getLevel[dts] un qqchose du style (c'est invraissemblable ma syntaxe mais c pour dire à quoi je pense)

[ElMoustiko]

Niiaiiaarrff (le cri de desespoir envers les différentes interpretation IE/les autres)

Bon je suis arrivé à quelque chose qui marche MAIS, avec une syntaxe pour IE et une autre pour les gecko (j'ai pas testé opera)

function displayMenu()
{
	var dl = document.getElementById('menu');
	var dts = dl.getElementsByTagName('dt');

	var dds = dl.getElementsByTagName('dd');

	for(var j = 0; j < dds.length; j++ )
	{
  dds[j].style.display = "none";
	}

	for(var i = 0; i < dts.length; i++)
	{
  dts[i].onclick = function()
  {
 	 // Pour IE
 	 if(this.nextSibling.style.display != "none")
 	 {
    this.nextSibling.style.display = "none";
 	 }
 	 else
 	 {
    this.nextSibling.style.display = "";
 	 }
 	 
 	 // Pour les gecko
 	 if(this.nextSibling.nextSibling.style.display != "none")
 	 {
    this.nextSibling.nextSibling.style.display = "none";
 	 }
 	 else
 	 {
    this.nextSibling.nextSibling.style.display = "";
 	 }
  }
	}
}
window.onload = displayMenu;

Bon faut pas laisser cohabiter la version gecko avec la version IE sinon ca merdouille mais chaque version fonctionne avec son navigateur... Alors comment ca se fait que nextSibling ne soit pas geré de la meme facon par IE et par les gecko ?

Vous avez un truc genre hack css mais pour le JS pour faire une syntaxe pour IE et l'autre pour les gecko ?

Ca me parait qd meme bcp plus simple que ce a quoi vous étiez arrivé... trop simple non ? j'ai l'impression que votre truc faisait plus de choses.

A vous la parole.

[ElMoustiko]

Bon apres tests, j'ai un code fonctionnel gecko/opera et le meme (a 1 chose pres) fonctionnel pour IE, il me faut donc un hack pour ne faire marcher quelquechose QUE sur IE et pas opera ni gecko, le précédent hack testé prenait opera en compte (var ie = document.all != null ; if(ie) {...} )

Ca dis quelque chose à quelqu'un ?

Modifié 26 Septembre 2004 par ElMoustiko

[ElMoustiko]

Bon voilà, fini ! enfin ...

function displayMenu()
{
	var dl = document.getElementById('menu');
	var dts = dl.getElementsByTagName('dt');
	var dds = dl.getElementsByTagName('dd');

	for(var j = 0; j < dds.length; j++ )
	{
  dds[j].style.display = "none";
	}

	for(var i = 0; i < dts.length; i++)
	{
  dts[i].onclick = function()
  {
 	 if(navigator.onLine == true || navigator.onLine == false)
 	 {
    var next_dd = this.nextSibling;
 	 }
 	 else
 	 {
    var next_dd = this.nextSibling.nextSibling;
 	 }
      
 	 if(next_dd.style.display != "none")
 	 {
    next_dd.style.display = "none";
 	 }
 	 else
 	 {
    next_dd.style.display = "";
 	 }
  }
	}
}
window.onload = displayMenu;

Ca fonctionne sous IE 6.0, Firefox 1.0PR, Opera 7.23 le tout sous windows XP, je vous laisse me dire si ca chez vous :

http://www.elmoustikoblog.net/tutos/js/menu/index.html fonctionne

Fiiou j'en aurai ch*** !

[ElMoustiko]

Bon un grand coup d'épée dans l'eau, ca ne fonctionne pas sous firefox 0.8... pourquoi ils ont sortis des versions bidons...

Si vous avez d'autres configs, softs etc... vous pouvez me donner vos resultat s'il vous plait. et pour les connaisseurs ce que vous voyez pour rendre ca utilisable sur ff0.8.

@++

[pierredureau]

Ca marche chez moi (Linux 2.6.8, Fedora Core 2, Firefox 1.0 PR) mais ce n'est pas le même script que le précédent : sur le tiens, il faut cliquer sur l'item pour dérouler le menu.

Je les considère donc comme complémentaires et note celui-ci dans un coin pour plus tard. Merci.

[ElMoustiko]

bah c pas bien compliqué de le faire en roll over si tu veux, mais le problème est qu'il ne fonctionne pas sous firefox 0.8... alors je ne sais pas trop comment me debrouiller.

Par contre si tu pouvais verifier sur konqueror si tu y as acces. sinon je testerais qd j'irais sous linux ;p

[pierredureau]

Konqueror, non, j'ai pas. Désolé.

J'aurai du préciser dans ma configuration : " gnome 2.6, full gtk2 " .

[Bobe]

bah je vais vous paraitre rabats joie mais je suis pas satisfait pas votre script 

Oui mais ton script, lui, s'appuie sur l'évènement 'click' qui est bien plus simple à gérer que le couple mouseover/mouseout.

C'est trop gros ;p

faut ce qu'il faut Et puis une fois mis dans un fichier externe, celui-ci est mis en cache.

J'ai pas bien saisi à quoi servait navigator.onLine. C'est quoi ?

[ElMoustiko]

En fait j'ai modifié le script parceque celui là n'etait pas tout à fait correct (a cause de la structure html principalement).

Voir le nouveau topic (nouveau pour ne pas polluer plus celui ci) http://www.webmaster-hub.com/index.php?showtopic=6244

Et le nouveau permet onclick et onmouseover et je ne trouve pas ca plus facile/difficile à utiliser... la preuve je n'ai quasiment rien à modifier pour changer le comportement du menu.

Code final ~20 lignes

@++

{edit}

Pour le navigator.onLine ca sert de "hack" pour UNIQUEMENT IE, c'est l'une des seule propriété prise en compte uniquement par IE, parceque certaines font que Opera comprend aussi, parceque quand on demande à opera quel navigateur il est, il repond IE ;p

Mais dans le nouveau script, plus de hack puisque pas de probleme de compatibilité. C'est pour ca (entre autre) que la structure html à été modifiée.

Modifié 1 Octobre 2004 par ElMoustiko

[Bobe]

je ne trouve pas ca plus facile/difficile à utiliser... la preuve je n'ai quasiment rien à modifier pour changer le comportement du menu.

Ton menu ne fonctionne pas en mode mouseover/mouseout...

Lorsqu'on déplace le curseur pour pointer sur un lien du sous menu ouvert, on quitte le h2 et la fonction enregistrée sur l'évènement 'mouseout' est donc appellée et referme le sous menu.

Bon, sur ce, je continue dans l'autre topic.