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(/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(/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(/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('/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(/images/mm-default.jpg)

alert sur les autres menus: url(/images/mm.jpg)

Désolé faute de frappe dans ma dernière réponse

Code:

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

Fuseau horaire GMT +2. Il est actuellement 02h29.