Un menu qui se déplace

Version imprimable

Bonjour!

Je cherche à faire se déplacer mon menu dans ma page web en même temps que le scroll.

J'ai écrit ce script et j'ai déjà essayé plusieurs combinaisons et rechercher un peu partout mais rien:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <script language="javascript"> document.body.onload="window.setTimeout('javascript:position_boite();',1000);"; function position_boite() { alert("yo!"); h_boite=document.getElementById("boite_deplacable").top; h_boite=(h_boite+window.pageYOffset)/2; document.getElementById("boite_deplacable").top=h_boite; window.setTimeout("javascript:position_boite();",1000); } </script>
Quelqu'un peut-il m'aider s'il-vous-plaît?

Merci beaucoup.

07/10/2005, 10h03
SpaceFrog

top dépend du style ....

=> style.top
07/10/2005, 10h12
CUCARACHA

onscroll
Salut,

C'est assez simple, il te suffit de déclarer l'évennement onscroll dans ton body :

Code:

<body MS_POSITIONING="GridLayout" language=javascript onscroll="return window_onscroll()">

Puis de créer la fonction :
Code:

1 2 3 4 5 6 7 8 9 <script language=javascript>  </script>
Bien à toi

Laurent Jordi
07/10/2005, 10h22
Olish

Désolé ça ne marche pas non plus. :(

Je suis carrément perdu. :x
07/10/2005, 10h23
SpaceFrog

holà !!!!

je parle dans le vide ou quoi !!!!!!!!

window.document.getElementById("boite_deplacable").top

top est une propriété du STYLE ....

8O Non tu ne parles pas dans le vide mais ça ne fonctionne pas non plus ainsi:
Code:

1 2 3 4 5 6 7 8 9 10 <script language=javascript>  </script>
:aie: Je ne suis pas sourd.

07/10/2005, 10h45
SpaceFrog

question subsidiarie l'element est en positon absolute ?
07/10/2005, 10h48
Olish
En position absolute? Absolument! :)
Code:

1 2 <div id="boite_deplacable" align="center" style="left:0; top:0; position:absolute;">
Mais où est l'embrouille alors???

et tu la lance quand la fonction on_scroll ???

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script language=javascript>
<!--
 
function window_onscroll() {
 
    window.document.getElementById("boite_deplacable").style.top =  window.document.body.scrollTop+150+'px';
}
 
//-->
</script>
 
</head>
<body onscroll="window_onscroll()">
<a href="javascript:(confirm('oui ou non')?window.location.href='newpage.htm':void(0));">ici</a>
<div id="boite_deplacable" style="height:150px;width:150px;background-color:red;position:absolute; top:150px">sfqsd</div>
<div style="height:1500px;">ddd</div>
</body>
</html>

si tu ne mets rien dans le body onscroll ...

07/10/2005, 11h07
Olish

Si ton script fonctionne, chez moi il ne fonctionne pas, ni dans Firefox, ni dans Internet Explorer.

Par contre, je travaille avec Dreamweaver MX 2004 et dans la liste déroulante des attributs disponibles pour la balise BODY il n'y a pas d'événement onscroll prévu...
07/10/2005, 11h11
SpaceFrog

Ben tu dois avois un sérieux problème car chez moi il focntionne pour les deux ... testé et approuvé !!!!

mets l'intégralité de ton code que je voies ou tu te fourvoies ...
07/10/2005, 11h13
Mr N.

Chez moi ca tourne nickel sous Fx (Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.7.12) Gecko/20050920 Firefox/1.0.7)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language=javascript>
<!--
 
function window_onscroll() {
 
    window.document.getElementById("boite_deplacable").style.top =  window.document.body.scrollTop+150+'px';
}
 
//-->
</script>
</head>
 
<body onscroll="javascript:window_onscroll();">
<a href="javascript:(confirm('oui ou non')?window.location.href='newpage.htm':void(0));">ici</a>
<div id="boite_deplacable" style="height:150px;width:150px;background-color:red;position:absolute; top:150px">sfqsd</div>
<div style="height:1500px;">ddd</div>
</body>
</html>

07/10/2005, 11h15
Mr N.

Citation:

Envoyé par Olish

Par contre, je travaille avec Dreamweaver MX 2004 et dans la liste déroulante des attributs disponibles pour la balise BODY il n'y a pas d'événement onscroll prévu...

+1
http://giminik.developpez.com/xhtml/body.html
07/10/2005, 11h16
SpaceFrog

Citation:

<body onscroll="javascript:window_onscroll();">

partie en rouge inutile...

onscroll n'attend pas une rectette de crèpes suzette mais uniquement du javascript ....

sinon javascript est activé dans tes browsers ???
07/10/2005, 11h20
SpaceFrog

tu as quelle version de browsers ???

sinon mets toute la page dans un div et utilise le onscroll du div ...
07/10/2005, 11h22
Mr N.

Enleve la dtd et tu verras que ca marche !
Quirks mode vs Standards compliance mode

DW a raison...
07/10/2005, 11h26
Olish

Oui je me doute. J'ai fait avec et sans ça ne fonctionne pas non plus.

Et javascript est activé partout.
07/10/2005, 11h26
Mr N.

Fais une recherche de onscroll sur le W3c, les resultats sont uniquement pour SVG...

Donc en html, pas d'attribut onscroll
07/10/2005, 11h28
Mr N.

Citation:

Envoyé par Olish

Oui je me doute. J'ai fait avec et sans ça ne fonctionne pas non plus.

J'ai essayé ton code : pas de scroll
J'ai enlevé le doctype : scroll !

Ta page s'affiche en quel mode quirks ou standard ? ("view page info" sous Fx)
07/10/2005, 11h28
Olish

Citation:

Envoyé par Mr N.

Enleve la dtd et tu verras que ca marche !
Quirks mode vs Standards compliance mode

DW a raison...

C'est quoi ça? Je ne comprends pas? Comment voit-on ce mode?

J'ai essayé ça:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript">
<!--
function prog() {
 
    window.document.getElementById("boite_deplacable").style.top =  window.document.pageYOffset+150+'px';
	window.setTimeout("javascript:prog();",3000);
}
 
//-->
</script>
</head>
 
<body onload="prog();">
<a href="javascript:(confirm('oui ou non')?window.location.href='newpage.htm':void(0));">ici</a>
<div id="boite_deplacable" style="height:150px;width:150px;background-color:red;position:absolute; top:150px">sfqsd</div>
<div style="height:1500px;">ddd</div>
</body>
</html>

Rien non plus.

07/10/2005, 11h34
Mr N.

A partir du moment ou tu met une dtd sur ton flux (x)html, le browser passe du mode 'quirks mode' au mode 'standards compliance mode', en gros il applique la dtd et ne reconnait pas les attributs non déclarés dans cette dtd.
Or onscroll ne fait pas partie de la dtd http://www.w3.org/TR/html4/loose.dtd donc pas reconnu par le navigateur donc pas de scroll.
C'est une deduction personnelle, peut-etre que la verité est ailleurs...
07/10/2005, 11h35
Mr N.

Citation:

Envoyé par Olish

J'ai essayé ça:[...]

Enlève cette ligne de ton fichier html :

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Attention! je ne dis pas que c'est ce qu'il faut faire au final. C'est juste pour voir ton scroll. après à toi de choisir entre mettre le doctype ou pas.
07/10/2005, 11h39
Olish

Ca ne fonctionne pas non plus. C'est grave ça quand même... :x
07/10/2005, 11h43
SpaceFrog

change de pc ? :lol:
07/10/2005, 11h50
Mr N.

Arrête l'informatique ? :lol:

Après avoir enlevé ce doctype, en quel mode es-tu (cf un de mes posts précédents) ? quel est le source de ta page ? Si tu l'enlève sous DW, es-tu sur qu'il ne le rajoute pas automatiquement à la sauvegarde du fichier ?

Bien, j'ai testé avec Internet Explorer, ça fonctionne avec ce code:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<html>
<head>
<title>Document sans nom</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language=javascript>
<!--
 
function window_onscroll() {
 
    window.document.getElementById("boite_deplacable").style.top =  window.document.body.scrollTop+150+'px';
}
 
//-->
</script>
 
</head>
<body onscroll="window_onscroll()">
<a href="javascript:(confirm('oui ou non')?window.location.href='newpage.htm':void(0));">ici</a>
<div id="boite_deplacable" style="height:150px;width:150px;background-color:red;position:absolute; top:150px">sfqsd</div>
<div style="height:1500px;">ddd</div>
</body>
</html>

Mais Firefox est complètememnt largué sur le coup...

07/10/2005, 11h55
SpaceFrog

aucun souci chez moi ...
07/10/2005, 11h56
Olish

Le doctype n'est pas rajouté automatiquement par Dreamweaver.

Firefox m'indique que la page en question est en Mode de compatibilité.
07/10/2005, 12h00
Mr N.

Aucun soucis pour moi non plus.
Il ne reste plus beaucoup de piste pour ma part et elles sont assez hasardeuses :
OS en cause ? version de Fx en cause ? je ne saurais répondre...
07/10/2005, 18h04
Mr N.

Tiens ça devrait t'interesser !
http://www.quirksmode.org/js/fixedmenu.html
07/10/2005, 18h36
Olish

Je vous remercie tous beaucoup pour votre aide. J'ai réussi tout de même à bidouiller tout ça.

Merci pour le dernier lien, je vais décortiquer le code de la page un peu plus tard... il me semble intéressant.

Puis-je vous inviter à regarder le résultat sur mon site? Je sais que ce n'est pas trop le bon forum mais c'est juste pour que vous voyiez... :)

http://olishontheweb.selfip.net

Encore merci à vous tous! :D :merci: :yaisse1: :chin: :yaisse3:
19/10/2011, 10h38
ernestrenan

Désolé de remonter mais comme je suis tombé dessus ça peut arriver à d'autres et je pense qu'un simple position: fixed fait l'affaire.

Fuseau horaire GMT +2. Il est actuellement 22h22.