clignotement de mon menu JavaScript

Version imprimable

14/05/2009, 11h32
YoChappu

clignotement de mon menu JavaScript
Bonjour,

J'ai cr�� un menu (avec sous menus) en html. Voici � peut pr�s � quoi �a ressemble:
Code:

1 2 3 4 5 6 <div> <div>TITRE MENU</div> <ul><li>Sous Menu 1</li> <li>Sous Menu 2</li></ul> <div>
Je cache mes sous menus gr�ce � la propri�t� css visibility:hidden.
Avec du JavaScript je pr�cise que:

- lorsque je survole ma <div> contenant mon "TITRE MENU", je change la couleur et je fais apparaitre mes sous menus (onMouseOver).
- lorsque je survole mes sous menus, je change la couleur et je fais en sorte de laisser mes sous menus affich�s (onMouseOver).
- lorsque je retire la souris de ma <div> principale (qui contient mon TITRE MENU et mes sous menus), je remets par d�faut (onMouseOut).

Sous Firefox et IE8 aucun soucis. En revanche sous IE7 et IE6 lorsque je passe la souris sur un menu et ses sous menus �a clignote...
J'ai essay� de mettre un timeout, rien n'y fait! Quelqu'un aurait il une solution � proposer??

Merci d'avance!

Salut,

C'est tout � fait normal...

Le test de "protection" de la modification dans changeFondBleu() n'est pas correct...

Code:

1
2
3
4
5
6
7
8
9
10
11
12
 
function changeFondBleu(menuG,menuM,menuD){
 
	if (!(document.getElementById(menuM).style.background=="transparent url(/https/www.developpez.net/images/mm-default.jpg) repeat scroll left bottom")) {
 
        document.getElementById(menuM).style.color="#fff";
        document.getElementById(menuG).style.background="url('/images/mg.jpg') bottom left";
        document.getElementById(menuM).style.background="url('/images/mm.jpg') bottom left";
        document.getElementById(menuD).style.background="url('/images/md.jpg') bottom left";
 
    }
}

"transparent url(/https/www.developpez.net/images/mm-default.jpg) repeat scroll left bottom" <> "url('/images/mm.jpg') bottom left"

14/05/2009, 11h58
YoChappu

Merci pour votre r�ponse mais �a ne change rien au probl�me... J'ai comment� mon mon "if" et le clignotement continue.

Cette condition me permet juste de ne pas changer la couleur bleue du menu en cours lorsque je fais un onMouseOut dessus (ne fonctionne que pour accueil pour l'instant).

Le background d'un menu actif est volontairement "images/mm-default.jpg" dans le cas de la div "mm"
14/05/2009, 12h01
devyan

Citation:

Envoy� par YoChappu

Merci pour votre r�ponse mais �a ne change rien au probl�me... J'ai comment� mon mon "if" et le clignotement continue.

Cette condition me permet juste de ne pas changer la couleur bleue du menu en cours lorsque je fais un onMouseOut dessus (ne fonctionne que pour accueil pour l'instant).

C'est bien ce que je dis, ce test est NECESSAIRE :D
Mais il n'est pas correct et c'est pour �a que tu as le clignotement.
14/05/2009, 12h04
YoChappu

En quoi n'est il pas correct?

Je ne sais pas si vous avez vu, j'ai �dit� mon dernier message en ajoutant le commentaire suivant:

Citation:

Le background d'un menu actif est volontairement "images/mm-default.jpg" dans le cas de la div "mm"
14/05/2009, 12h06
devyan

Il n'est JAMAIS vrai car tu compares 2 chaines qui sont diff�rentes.

Citation:

Envoy� par devyan

"transparent url(/https/www.developpez.net/images/mm-default.jpg) repeat scroll left bottom" <> "url('/images/mm.jpg') bottom left"
14/05/2009, 12h12
YoChappu

D'ou l'int�r�t que je pr�cise que ce contr�le ne me sert qu'� v�rifi� si je suis actuellement en train de parcourir le menu actif.

En gros je dis:

Si je ne suis pas dans le menu actuellement actif (avec le fond "/images/mm-default.jpg"), dans ce cas lorsque je fais un onMouseOver je remet le menu en blanc.

Prenons le cas ou je parcours justement le menu actif, je rentre dans la condition car mon menu actif aura toujours "/images/mm-default.jpg" comme background et non "/images/mm.jpg". Dans ce cas lorsque je quitte l'�l�ment, je ne change pas sa couleur afin qu'il reste bleu.

Je pr�cise que seul le bouton accueil est concern� pour le moment.
14/05/2009, 12h21
devyan

Citation:

Envoy� par YoChappu

D'ou l'int�r�t que je pr�cise que ce contr�le ne me sert qu'� v�rifi� si je suis actuellement en train de parcourir le menu actif.

En gros je dis:

Si je ne suis pas dans le menu actuellement actif (avec le fond "/images/mm-default.jpg"), dans ce cas lorsque je fais un onMouseOver je remet le menu en blanc.

Prenons le cas ou je parcours justement le menu actif, je rentre dans la condition car mon menu actif aura toujours "/images/mm-default.jpg" comme background et non "/images/mm.jpg". Dans ce cas lorsque je quitte l'�l�ment, je ne change pas sa couleur afin qu'il reste bleu.

Je pr�cise que seul le bouton accueil est concern� pour le moment.

Le bout de code que tu fournis dit :
si je n'ai pas couleur de fond = transparent ET image = "/images/mm-default.jpg" ET scroll ET r�p�t�e en X et Y � partir du coin bas gauche ALORS je fixe image ="/images/mm.jpg" ET positionn�e � partir du coin bas gauche.

donc tu vas toujours effectuer la modification du background donc tu vas avoir le fond qui clignote � chaque affectation sous IE6 et IE7 et c'est normal.
14/05/2009, 14h42
YoChappu

J'ai modifi� mes contr�les javascript et mis en place le syst�me de coloration du menu courant afin que �a paraisse plus clair pour tout le monde.

Mais je ne vois pas ce que �a change et ce qu'il faudra que j'�crive comme code pour arr�ter le clignotement... Mon contr�le me sert uniquement � ne pas changer le "background" de mon menu actif...

Citation:

Envoy� par YoChappu

J'ai modifi� mes contr�les javascript et mis en place le syst�me de coloration du menu courant afin que �a paraisse plus clair pour tout le monde.

Mais je ne vois pas ce que �a change et ce qu'il faudra que j'�crive comme code pour arr�ter le clignotement... Mon contr�le me sert uniquement � ne pas changer le "background" de mon menu actif...

Essaye d'ajouter ceci, regarde ce qu'il t'affiche et normalement tu devrais comprendre...
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 function changeFondBleu(menuG,menuM,menuD){ alert(document.getElementById(menuM).style.backgroundImage); if (!(document.getElementById(menuM).style.backgroundImage=="url(/images/mm-default.jpg)")) { document.getElementById(menuM).style.color="#fff"; document.getElementById(menuG).style.background="url('/images/mg.jpg') bottom left"; document.getElementById(menuM).style.background="url('/images/mm.jpg') bottom left"; document.getElementById(menuD).style.background="url('/images/md.jpg') bottom left"; } }

14/05/2009, 15h15
YoChappu

C'est fait et le probl�me persiste toujours... Je ne suis pas le seul � ne pas comprendre, mes coll�gues aussi.

Vous semblez avoir compris la source du probl�me, serait-il possible que vous me donniez le code que vous pensez �tre le bon? Car la je ne vois vraiment pas...

Merci d'avance

C'est normal que le probl�me persiste...

Ce n'est pas en ajoutant un message d'alerte que cela peut r�soudre le bug.

A moins que la fonction que je suis all� p�cher dans le fichier joint � la page html mise en lien dans ton premier message ne soit pas le bon ...

(mais dans ce cas, le mieux �a aurait �t� de nous donner toutes les billes sur ce forum)

... Tu compares des cha�nes diff�rentes.

Je vais sch�matiser ton code :
Code:

1 2 3 4 5 function montest(A,B,C) { if (!(document.getElementById(B).style.backgroundImage=="url(/images/mm-default.jpg)")) { document.getElementById(B).style.background="url('/images/mm.jpg') bottom left"; } }
Maintenant je ne vois pas comment je peux m'exprimer diff�remment.
Si quelqu'un d'autre veut s'y coller ...

Je me doute bien qu'un alert ne change rien ^^ Ce que je voulais dire par l� c'est que j'ai beau avoir essay� de suivre votre logique par des modifications, le r�sultat est toujours le m�me ;)

Avez vous bien vu le "!" lors de mon contr�le?

Code:

1
2
3
4
5
function montest(A,B,C) {
    if (!(document.getElementById(B).style.backgroundImage=="url(/images/mm-default.jpg)")) {
        document.getElementById(B).style.background="url('/images/mm.jpg') bottom left";
    }
}

Pour que ce soit plus clair je l'ai modifi� de la mani�re suivante:

Code:

1
2
3
4
5
6
7
8
9
10
11
function changeFondBleu(menuG,menuM,menuD){
 
    if (document.getElementById(menuM).style.backgroundImage!="url(/images/mm-default.jpg)") {
 
        document.getElementById(menuM).style.color="#fff";
        document.getElementById(menuG).style.background="url('/images/mg.jpg') bottom left";
        document.getElementById(menuM).style.background="url('/images/mm.jpg') bottom left";
        document.getElementById(menuD).style.background="url('/images/md.jpg') bottom left";
 
    }
}

14/05/2009, 15h55
devyan

Pouvez-vous nous donner ici le texte du message obtenu avec l'alerte que je vous ai demand� de tester ?

if (A != 'B') {
A = 'C'
}

C'est toujours vrai car 'B' est toujours diff�rent de 'C'
14/05/2009, 16h04
YoChappu

D�sol� j'ai compl�tement oubli� de pr�ciser... En fait pour mon menu en cours j'applique le background suivant � partir d'une fonction:

Code:

style="background:url('/https/www.developpez.net/images/mm-default.jpg') bottom left;"

Si je reprends votre sch�ma, parmi mes menus, celui qui est actif est �gal � B justement.

exemple avec le menu 3 actif:

Si on consid�re que:
style=C correspond � un fond blanc
style=B correspond au fond par d�faut (bleu dans mon cas)

MENU1 (style=B), MENU2 (style=B), MENU3 (style=C), MENU4 (style=B)

Donc il arrive que A=B lors du contr�le...
14/05/2009, 16h15
devyan

Citation:

Envoy� par devyan

Pouvez-vous nous donner ici le texte du message obtenu avec l'alerte que je vous ai demand� de tester ?

"url('/images/mg-default.jpg')" <> "url(/images/mm-default.jpg)"
14/05/2009, 16h20
YoChappu

alert sur le menu actif: url(/https/www.developpez.net/images/mm-default.jpg)

alert sur les autres menus: url(/https/www.developpez.net/images/mm.jpg)

D�sol� faute de frappe dans ma derni�re r�ponse

Code:

style="background:url('/https/www.developpez.net/images/mm-default.jpg') bottom left;"

Fuseau horaire GMT +2. Il est actuellement 01h59.