Menu glissant sous html ne fonctionne pas sous DOCTYPE XHTML [Résolu]

Signaler
Messages postés
7
Date d'inscription
dimanche 10 février 2008
Statut
Membre
Dernière intervention
19 juillet 2008
-
Messages postés
7
Date d'inscription
dimanche 10 février 2008
Statut
Membre
Dernière intervention
19 juillet 2008
-
Bonjour,

J'ai construit un petit menu glissant tout simple en CSS et javascript qui fonctionne très bien en HTML, mais sous XHTML il bloque. Le menu est fait en ul, mais en div ou tableau, c'est pareil.
Ce serait sympa si quelqu'un pouvait me donner la raison de ce blocage et suggérer une modification pour le faire fonctionner avec DOCTYPE XHTML ?
Voici le code :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>menu glissant horizontal</title>
<style type="text/css">
*{margin:0;padding:0;border:0;font-family:sans-serif;font-size:1em;font-weight:normal;font-style:normal;text-decoration:none;}
#menu{z-index:20;font-size:10px;text-align:left;padding:5px 0 5px 0; background-color:#8fbc8f; list-style-type:none; position:absolute;top:20px; width:120px; left:-100px;}
#menu .tit{font-size:12px;background-color:blue;color:red;font-weight:bold;}
#menu .stit{background-color:green;font-weight:bold;}
#menu .item{background-color:yellow;}
#menu a:hover{background-color:blue;color:yellow;}
#menu .courriel {background-color:red;color:blue;font-size:12px;font-weight:bold;}
#menu .courriel a:hover{background-color:blue;color:red;font-weight:bold;}
#li_bouton{position:absolute;left:100px;top:0;height:345px;width:23px}
#bouton{height:345px;width:23px;}
</style>

<script type="text/javascript" language="JavaScript">
var flag=0;
var bouton="nav/menu.jpg";
function glisse(){
var Menu=document.getElementById("menu");
if(flag==1){
Menu.style.left=Menu.offsetLeft-10;
if(Menu.offsetLeft<=-100){
flag=0;
return false
}}
else if(flag==0){
Menu.style.left=Menu.offsetLeft+10;
if(Menu.offsetLeft>=0){
flag=1;
return false
}}
setTimeout("glisse()",1);
}
</script>
</head>

<!-- ******************* MENU ************************************-->

<li id="li_bouton"></li>
<li class="tit">Titre 1</li>
<li class="item" >[# link]</li>

[# link]</li>
<li class="tit">Titre 2</li>
<li class="item" >[# link]</li>
<li class="item" >[# link]</li>
<li class="item" >[# link]</li>
<li class="item" >[# link]</li>
<li class="tit">Titre 3</li>
<li class="item" >[# link]</li>
<li class="item" >[# link]</li>
<li class="item" >[# link]</li>
<li class="item" >[# link]</li>
<li class="tit">Titre 4</li>
<li class="stit">soustitre</li>
<li class="item" >[# link]</li>
<li class="item" >[# link]</li>
<li class="stit">soustitre</li>
<li class="item" >[# link]</li>
<li class="item" >[# link]</li>
<li class="item" >[# link]</li>
<li class="stit">soustitre</li>
<li class="item" >[# link]</li>
<li class="item" >[# link]</li>
<li class="courriel" onmouseover="className='courriel a:hover'">
[mailto:me@home.com Email]</li>

<!-- **********************  FIN MENU ************************-->

</html>

12 réponses

Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
16
Bonjour,
même réponse que sur le post
http://www.javascriptfr.com/infomsg_MENU-DEROULANT-INOPERANT-SOUS-FF_1156446.aspx

attendu que les unités pour
les attributs left, top etc... peuvent être des pt, mm, cm, em...ou px
il est nécéssaire de préciser l'unité que tu souhaites.
IE par défaut semble affecter des px et FireFox ne sachant pas ne fait pas...
donc

Menu.style.left = Menu.offsetLeft -10





+"px"

;




Menu.style.left = Menu.offsetLeft +10





+"px"

;








;O)
Messages postés
1784
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
28 avril 2021
126
pase par une condition ( if )

<script type="text/javascript" language="JavaScript">
var flag=0;
var bouton="nav/menu.jpg";
function glisse(){
var Menu=document.getElementById("menu");
if(flag==1){
if(navigator.appName.substring(0,3)=="Micro"){
Menu.style.left=Menu.offsetLeft-10;
}
else{
Menu.style.left=Menu.offsetLeft-15;
}
if(Menu.offsetLeft<=-100){
flag=0;
return false
}}
else if(flag==0){
if(navigator.appName.substring(0,3)=="Micro"){
Menu.style.left=Menu.offsetLeft+10;

}

else{
Menu.style.left=Menu.offsetLeft+15;

}
if(Menu.offsetLeft>=0){
flag=1;
return false
}}
setTimeout("glisse()",1);
}
</script>

le chiffre en rouge c'est lui qu'il faut modifie pour augmenter ou diminue la vitesse
on peut jouer sur le set timeout mais la valeur est au minimum (1 )
Messages postés
1784
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
28 avril 2021
126
c'est pour ca que je trouve ca etrange car j' ai modifie et pour moi ca va tres vite
 
en gros 10px ( px pour pixel )c'est le deplacement par cycle (le programe tourne en boucle par l'intermediaire de setTimeout )dans notre cas  10 pixel donc si je met 20px j'aurait un deplacement par cycle de 20 pixel donc le deplacement sera plus rapide.

Sur le conseil judicieux de PetoleTeam, J'avais modifié
Menu.style.left = Menu.offsetLeft -10+"px"
c'est exacte tu doit metre px certain navigateur accepte qu'il y en ai pas d'autre
en plus  la norme xhtml est tres exigente au niveau de la syntaxe en comparaison au html
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
16
Bonjour,
tu peux également jouer avec le délai de
setTimeout, 1 me paraît un peu court...

setTimeout("glisse()",
20);
;O)
Messages postés
1784
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
28 avril 2021
126
jour
tu a une ligne ou tu a mis  div a la place de li

[# link]</li>
peut etre qu'en corigeant.......
Messages postés
7
Date d'inscription
dimanche 10 février 2008
Statut
Membre
Dernière intervention
19 juillet 2008

Merci, bien vu ! J'ai corrigé, mais cela ne change rien. J'ai oublié de dire que, en XHTML, cela fonctionne sous IE, mais pas sous Firefox. En HTML, cela fonctionne avec les deux.
Messages postés
7
Date d'inscription
dimanche 10 février 2008
Statut
Membre
Dernière intervention
19 juillet 2008

Génial ! Ca marche. Je n'y avais pas pensé. Un grand merci !!!
Messages postés
7
Date d'inscription
dimanche 10 février 2008
Statut
Membre
Dernière intervention
19 juillet 2008

Bonjour,
Encore un petit souci : Le "glissement" du menu est beaucoup plus lent sous Firefox que sous IE. Est-il possible de résoudre ce phénomène ?
Messages postés
7
Date d'inscription
dimanche 10 février 2008
Statut
Membre
Dernière intervention
19 juillet 2008

Non Kasma, ça ne marche pas. Ca ne fait que shifter le menu de 5 px, mais ca ne résout pas le problème de la lenteur de glisse et de la saccade.
Merci quand même pour le conseil.
Messages postés
1784
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
28 avril 2021
126
je vient d'essayer le script ;il marche nikel pas de sacades j'ai modifie les parametres et j'obtient de grandes vitesses toujour sacades.
Messages postés
7
Date d'inscription
dimanche 10 février 2008
Statut
Membre
Dernière intervention
19 juillet 2008

Bonjour Kasma,
Il y a alors quelque chose qui m'échappe. Je suis nul en Javascript et j'ai besoin d'explications complémentaires.
Quand je modifie les valeurs en rouge, le menu entier shifte horizontalement et la vitesse ne change pas !
Sniff!

Sur le conseil judicieux de PetoleTeam, J'avais modifié
Menu.style.left = Menu.offsetLeft -10+"px"
pour que ça fonctionne avec Firefox sous DOCTYPE XHTML, sinon ça bloque avec FF si je ne mets pas +"px".
Messages postés
7
Date d'inscription
dimanche 10 février 2008
Statut
Membre
Dernière intervention
19 juillet 2008

OK, ca marche nickel. J'avais fait une stupide petite erreur que je n'oserais pas dire ici.
Un grand merci à Kasma et à PetoleTeam !!!