11548 sujets

JavaScript, DOM et API Web HTML5

Besoin d'aide pour le positionement relatif de mon menu flottant

Bonjour à tous, Smiley biggrin

Je sais que je suis nouveau et que c'est pas une belle entrée en matiere de poser des questions mais j'ai besoin d'aide... Smiley langue

Voila, je me suis mis à aider mon frangin pour la conception de son site internet professionnel. Smiley biggrin

Sur une page, j'ai mis script de menu flottant sur la partie gauche qui suit le scrolling (jusque la rien de revolutionnaire !).
Le truc c'est que ce petit menu glisse sur un tableau qui fait la hauteur de la page.

Le script calcul sa postition en absolu par rapport la page, donc si je redimentionne la page ou si je change la resolution, il est decalé... et s'est tout moche ! Smiley bawling

J'ai essayé au debut d'ajouter une fonction "resolution" qui permet de reinitialiser la coordonnée x en fonction de la resolution et du navigateur.
Evidement quand on redimentionne la fenetre ça marche po ! Smiley ohwell

Je pense que une solution serait de positionner le menu flottant en relatif par rapport au tableau, mais je galere grave ! Smiley decu

y a quelqu'un qui peut m'aider ? Smiley confused

Voici mon code :

upload/5584-p1.JPG

upload/5584-p2.JPG

upload/5584-p3.JPG

upload/5584-p4.JPG


je peux l'envoyer par mail si necessaire.


Merci par avance ! Smiley biggrin
Hello,

Déjà je pense que tu t'es trompé de forum Smiley cligne
Je ne suis pas un débutant, mais je ne comprends rien à tout ça, parce que je ne connais pas du tout javascript (ou alors si peu...). Donc hop, si un modérateur passe par là, ce sujet ira sans doute dans le forum approprié.

Petite remarque :
Qui passe son temps à redimmensionner la fenêtre de son navigateur, à part les webmasters qui testent des pages ?

Autre chose : c'est beaucoup de code pour un petit comportement esthétique d'UN objet, non ? Dans le genre j'aime me casser la tête, c'est pas mal Smiley sweatdrop

Enfin, je ne suis pas sûr d'avoir compris le comportement souhaité. Que le menu reste visuellement à la même place lorsque l'on fait un défilement de la page ?
Dans ce cas, je me contente d'un position: fixed doublé d'un position: absolute pour IE. Et tant pis pour les utilisateurs IE, qui ne remarqueront même pas qu'il "manque" quelque chose... (sauf si l'ergonomie du site demande absolument que le menu reste toujours visible à l'écran).

EDIT : le code en image c'est bien joli mais :
– mon éditeur à moi il fait la coloration syntaxique, d'abord ;
– comment je teste le code (sous réserve que j'aie les compétences pour) si je peux pas le copier-coller ?
– tu te prives de l'aide précieuse de Quentin C, ce qui est dommage.
Et puis bon, certes ça "protège" ton code, mais qui voudrait piquer un code bugué ? Smiley cligne
Modifié par mpop (14 Mar 2006 - 21:41)
Bonjour,

Je te remercie de ta reponse, oui c'est peu être pas le bon forum en effet... Smiley confused

Pour ce qui est de tout ce code pour le comportement d'un objet, tu n'as pas tout a fait tort mais en fait le site n'a pas de frame pour une meilleure visibilité des moteurs de recherche et sur cette page FAQ, il y a beaucoup de texte, donc scrolling de l'utilisateur et donc perte de vue du menu de navigation... Smiley ohwell

C'est pour ça que je m'acharne à laisser ce menu de navigation visible quelque soit la resolution et le navigateur... Smiley langue

En fait la difficulté, c'est que le menu reste à la meme place mais par rapport a d'autres elements graphiques et notament un tableau (qui sert plus ou moins de frame gauche).

Donc la position absolute ou fixed ne suffit pas, ça me decalera le menu selon la dimension de la fenetre ou de la resolution... Smiley decu

Je pense que l'ideal serait de pouvoir utilisé la position relative avec le tableau... mais je n'y arrive pas !

Pour ce qui est du code, je ne cherche pas à le proteger (c'est pas une bonne affaire !) juste que le copier/ coller, ça fait un tres gros post... Smiley eek

Bon allons y alors ! Smiley ravi

Je met que l'essentiel du code qui me preoccupe mais je peux vous envoyer la page Htlm complete sans souci.

Merci


<HEAD>

<SCRIPT LANGUAGE="JavaScript">
<!--
//******* parametres initiaux

floatX=55;
floatY=95;
layerwidth=100;
layerheight=130;
halign="left";
valign="center";
delayspeed=1;

//***********

NS6=false;
IE4=(document.all);
if (!IE4) {NS6=(document.getElementById);}
NS4=(document.layers);


// Ajustement du calcul en fonction du navigateur

function adjust() {
if ((NS4) || (NS6)) {
if (lastX==-1 || delayspeed==0)
{
lastX=window.pageXOffset + floatX;
lastY=window.pageYOffset + floatY;
}
else
{
var dx=Math.abs(window.pageXOffset+floatX-lastX);
var dy=Math.abs(window.pageYOffset+floatY-lastY);
var d=Math.sqrt(dx*dx+dy*dy);
var c=Math.round(d/10);
if (window.pageXOffset+floatX>lastX) {lastX=lastX+delayspeed+c;}
if (window.pageXOffset+floatX<lastX) {lastX=lastX-delayspeed-c;}
if (window.pageYOffset+floatY>lastY) {lastY=lastY+delayspeed+c;}
if (window.pageYOffset+floatY<lastY) {lastY=lastY-delayspeed-c;}
}
if (NS4){
document.layers['floatlayer'].pageX = lastX;
document.layers['floatlayer'].pageY = lastY;
}
if (NS6){
document.getElementById('floatlayer').style.left=lastX;
document.getElementById('floatlayer').style.top=lastY;
}
}
else if (IE4){
if (lastX==-1 || delayspeed==0)
{
lastX=document.body.scrollLeft + floatX;
lastY=document.body.scrollTop + floatY;
}
else
{
var dx=Math.abs(document.body.scrollLeft+floatX-lastX);
var dy=Math.abs(document.body.scrollTop+floatY-lastY);
var d=Math.sqrt(dx*dx+dy*dy);
var c=Math.round(d/10);
if (document.body.scrollLeft+floatX>lastX) {lastX=lastX+delayspeed+c;}
if (document.body.scrollLeft+floatX<lastX) {lastX=lastX-delayspeed-c;}
if (document.body.scrollTop+floatY>lastY) {lastY=lastY+delayspeed+c;}
if (document.body.scrollTop+floatY<lastY) {lastY=lastY-delayspeed-c;}
}
document.all['floatlayer'].style.posLeft = lastX;
document.all['floatlayer'].style.posTop = lastY;
}
setTimeout('adjust()',50);
}

// Definition des coordonnées initiales en fonction du navigateur et des parametres initiaux

function define()
{
if ((NS4) || (NS6))
{
if (halign=="left") {floatX=ifloatX};
if (halign=="right") {floatX=window.innerWidth-ifloatX-layerwidth-20};
if (halign=="center") {floatX=Math.round((window.innerWidth-20)/2)-Math.round(layerwidth/2)};
if (valign=="top") {floatY=ifloatY};
if (valign=="bottom") {floatY=window.innerHeight-ifloatY-layerheight};
if (valign=="center") {floatY=Math.round((window.innerHeight-20)/2)-Math.round(layerheight/2)};

}
if (IE4)
{
if (halign=="left") {floatX=ifloatX};
if (halign=="right") {floatX=document.body.offsetWidth-ifloatX-layerwidth-20}
if (halign=="center") {floatX=Math.round((document.body.offsetWidth-20)/2)-Math.round(layerwidth/2)}
if (valign=="top") {floatY=ifloatY};
if (valign=="bottom") {floatY=document.body.offsetHeight-ifloatY-layerheight}
if (valign=="center") {floatY=Math.round((document.body.offsetHeight-20)/2)-Math.round(layerheight/2)}

}

}

// modification des coordonnées en fonction de la resolution et du navigateur

function resolution()
{
if ((NS4) || (NS6))
{
if (window.innerWidth <= 800) {floatX=25};
if (window.innerWidth >= 1024) {floatX=55};
if (window.innerWidth >= 1280) {floatX=182};
}
if (IE4)
{

if (document.body.offsetHeight<= 800) {floatX=25};
if (document.body.offsetHeight >= 1024) {floatX=55};
if (document.body.offsetHeight >= 1280) {floatX=177};
}

}

//-->
</script>

</HEAD>


<BODY>

// Lancement du script

<script>

if (NS4) {document.write('<LAYER NAME="floatlayer" LEFT="'+floatX+'" TOP="'+floatY+'">');}


// Ici le flotlayer est defini en postition : absolute, mais en relative ça ne fonctionne plus !

if ((IE4) || (NS6)) {document.write('<div id="floatlayer" style="position:absolute; left:'+floatX+' ; top:'+floatY+';">');}
</script>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td><a href="index.html" target="_top" onClick="MM_nbGroup('down','group1','what','buttons/button1ap.png',1)" onMouseOver="MM_nbGroup('over','what','buttons/button1over.png','buttons/button1ap.png',1)" onMouseOut="MM_nbGroup('out')"><img src="buttons/button1up.png" alt="" name="what" width="143" height="24" border="0" onload=""></a></td>
</tr>
<tr>
<td><a href="02-where.html" target="_top" onClick="MM_nbGroup('down','group1','where','buttons/button2ap.png',1)" onMouseOver="MM_nbGroup('over','where','buttons/button2over.png','buttons/button2ap.png',1)" onMouseOut="MM_nbGroup('out')"><img src="buttons/button2up.png" alt="" name="where" width="143" height="24" border="0" onload=""></a></td>
</tr>
<tr>
<td><a href="03-who.html" target="_top" onClick="MM_nbGroup('down','group1','who','buttons/button3ap.png',1)" onMouseOver="MM_nbGroup('over','who','buttons/button3over.png','buttons/button3ap.png',1)" onMouseOut="MM_nbGroup('out')"><img src="buttons/button3up.png" alt="" name="who" width="143" height="24" border="0" onload=""></a></td>
</tr>
<tr>
<td><a href="04-why.html" target="_top" onClick="MM_nbGroup('down','group1','why','buttons/button4ap.png',1)" onMouseOver="MM_nbGroup('over','why','buttons/button4over.png','buttons/button4ap.png',1)" onMouseOut="MM_nbGroup('out')"><img src="buttons/button4ap.png" alt="" name="why" width="143" height="24" border="0" onload="MM_nbGroup('init','group1','why','buttons/button4up.png',1)"></a></td>
</tr>
<tr>
<td><a href="05-how-much.html" target="_top" onClick="MM_nbGroup('down','group1','howm','buttons/button5ap.png',1)" onMouseOver="MM_nbGroup('over','howm','buttons/button5over.png','buttons/button5ap.png',1)" onMouseOut="MM_nbGroup('out')"><img src="buttons/button5up.png" alt="" name="howm" width="143" height="24" border="0" onload=""></a></td>
</tr>
<tr>
<td><a href="06-how-to.html" target="_top" onClick="MM_nbGroup('down','group1','howto','buttons/button6ap.png',1)" onMouseOver="MM_nbGroup('over','howto','buttons/button6over.png','buttons/button6ap.png',1)" onMouseOut="MM_nbGroup('out')"><img src="buttons/button6up.png" alt="" name="howto" width="143" height="24" border="0" onload=""></a></td>
</tr>
</table>
<p align="center" style="line-height:100%; margin-top:0; margin-bottom:0;"><b><font face="Arial"></font></b></p> </td>
</tr>
</table>
<script>

if (NS4)
{
document.write('</LAYER>');
}
if ((IE4) || (NS6))
{
document.write('</DIV>');
}
ifloatX=floatX;
ifloatY=floatY;
define();
resolution();
window.onresize=define;
lastX=-1;
lastY=-1;
adjust();

</script>
</BODY>
Sujet clos
Aller à