Forum de discussion
Forum « Programmation Javascript » (archives)
[Problème] 2 menus fixes en fonciton du scrolling sur une meme page
Envoyé: 3 février 2005, 9h00 par ar3a
Je voudrais mettre sur une page html 2 menus verticals fixe qui se repositionnent automatiquement sur la page en fonction du scrolling de l'utilisateur. J'ai donc utilisé un script de l'éditeur javascript que j'ai modifié pour generer automatiquement un tableau (dans un premier temps) qui va se placer a 400 pixels du milieu de la page. Ce script fonctionne correctement et on peut en voir le resultat sur cette page:
http://ar3a.free.fr/test/pb/1menu.htm
Voici le code javascript pour generer ce tableau à partir d'un fichier *.js :
gauche='50%'
droite='50%'
haut=200
bas=500
target = '_self';
color1 = "#7788AA";
color2 = "#99AEDB";
color3 = "#FFFFFF";
//menu en haut a gauche
menutitre = new Array;
menutitre[0]= 'MyAccount'
document.write('<STYLE TYPE="text/css">#menu { position:absolute;top:'+haut+';left:'+gauche+';margin-left : -400px;}</STYLE>');
ie4=document.all
ns6=document.getElementById&&!document.all
ns4=document.layers
function placeMenu() {
if (ie4) {menu.style.pixelTop=document.body.scrollTop+haut}
else if (ns6) {document.getElementById("menu").style.top=window.pageYOffset+haut}
else if (ns4) {eval(document.menu.top=eval(window.pageYOffset+haut));}
if(ie4 || ns6 || ns4)
setTimeout("placeMenu()",1);
}
window.onload = placeMenu;
document.write('<SPAN ID=menu><table bgcolor=#000000 border=1 cellspacing=0 cellpadding=3 bordercolorlight=#000000 bordercolordark=#C0C0C0 WIDTH=150><TR> <TD ALIGN=center HEIGHT=229 VALIGN=TOP><font color="#FFFFFF">1er Menu</font><br></td></tr></table></span>')
Je cherche maintenant à mettre 2 menus (2 tableaux en fait). Pour ce la, j'ai fait une page html qui fait appel a 2 script javascript, le 1er etant celui que vous venait de voir et le 2e étant celui-ci
gauche2='50%'
droite2='50%'
haut2=200
bas2=500
target = '_self';
color1 = "#7788AA";
color2 = "#99AEDB";
color3 = "#FFFFFF";
//menu en haut a gauche
menu2titre = new Array;
menu2titre[0]= 'Menu'
document.write('<STYLE TYPE="text/css">#menu2 { position:absolute;top:'+bas2+';left:'+gauche2+';margin-left : -400px;}</STYLE>');
ie4=document.all
ns6=document.getElementById&&!document.all
ns4=document.layers
function placeMenu2() {
if (ie4) {menu2.style.pixelTop=document.body.scrollTop+bas2}
else if (ns6) {document.getElementById("menu2").style.top=window.pageYOffset+bas2}
else if (ns4) {eval(document.menu2.top=eval(window.pageYOffset+bas2));}
if(ie4 || ns6 || ns4)
setTimeout("placeMenu2()",1);
}
window.onload = placeMenu2;
document.write('<SPAN ID=menu2><table bgcolor=#000000 border=1 cellspacing=0 cellpadding=3 bordercolorlight=#000000 bordercolordark=#C0C0C0 WIDTH=150><TR> <TD ALIGN=center HEIGHT=229 VALIGN=TOP><font color="#FFFFFF">2eme Menu</font><br>lbalbalblablalb</td></tr></table></span>')
C'est le meme avec quelques modifications. Vous pouvez voir le resultat de tout cela a cette page:
http://ar3a.free.fr/test/pb/2menu.htm
Comme vous pouvez le constater, seul le 2e menu bouge en fonction du scrolling, le 1er étant statique et ne bougeant plus. Je débute en javascript d'ou peut-être une erreur de débutant mais je ne vois pas le pb. Une âme sensible pourrait-elle svp me venir en aide ? Merci
Réponses
|