Sujet Précédent Sujet Suivant

Deplacement fluide d'un div en js.

Résolu/Fermé
samsam26 Messages postés 105 Date d'inscription vendredi 6 février 2009 Statut Membre Dernière intervention 4 mars 2013 - 6 févr. 2009 à 15:27
 claudiusse - 14 nov. 2011 à 20:49
Bonjour, à tous.
alors voilà, j'ai un petit problème, je débute avec le javascript, et j'ai encore beaucoup de mal à réussir ce que je souhaite faire.
j'ai un menu à gauche de 400px de large, il est positionné à -250px du bord gauche (il y a donc 150px qui sont visible sur la page) et voilà ce que je souhaiterais faire: lorsque la souris passe dessus, il se "deploit" et lorsque elle le quitte, il se "range". j'ai réussi avec onmouseover et onmouseout et en changent le positionnement gauche. sauf que je souhaiterais que le mouvement soit fluide, j'ai donc fait: 

function deplace()
{
testpos=false;
if(positiongauche==0){tespos=true;}
while (!tespos)
{
positiongauche++;
document.getElementById("menu").style.left=positiongauche;
}
}
timer2 = setInterval("deplace()",50);

function range()
{
testpos2=false;
if(positiongauche==-250){tespos2=true;}
while (!tespos2)
{
positiongauche--;
document.getElementById("menu").style.left=positiongauche;
}
}
timer3 = setInterval("range()",50);



ça c'est pour le javascript.
et dans mon html: 

<div id="menu" onmouseover="deplace()" onmouseout="range()" >
tout mon menu est ici
</div>


bon évidemment tout ça ne marche pas...
voilà... je ne sais pas trop doù vient le problème, c'est pourquoi je voudrais savoir si l'un de vous a une solution.
je vous remercie d'avance =)
A voir également:

21 réponses

  • 1
  • 2
Réponse 1 / 21
Azraka Messages postés 252 Date d'inscription mercredi 11 juin 2008 Statut Membre Dernière intervention 5 juin 2014 13
6 févr. 2009 à 16:32
Il faudrait que tu fasses en une fonction qui déplace ton menu de seulement quelques pixels (genre 10 ou 15) et après tu utilises la fonction javascript setInterval() pour que ta fonction s'exécute en boucle.

Voilà un peu d'aide pour le setInterval() : https://www.toutjavascript.com/reference/ref-window.setinterval.php
0
Réponse 2 / 21
samsam26 Messages postés 105 Date d'inscription vendredi 6 février 2009 Statut Membre Dernière intervention 4 mars 2013 6
8 févr. 2009 à 02:00
merci beaucoup pour ton aide azraka.
Mais maleureusement je ne suis pas au résultat souhaité...
voici la page: http://samsam26.u7n.org/2ndsouffle/testmenuglissant.htm
le cd à gauche, je souhaite qu'il se deplace fluidement lorsque la souris est dessus et qu'il se range fluidement lorsque la souris le quitte. j'espère qu'avec la page, vous pourriez mieux saisir mon problème... encore merci azraka de perdre ton temps pour moi :s je suis ouvert à toute proposition pouvant faire avancer mon problème...
bonne soirée
0
Réponse 3 / 21
samsam26 Messages postés 105 Date d'inscription vendredi 6 février 2009 Statut Membre Dernière intervention 4 mars 2013 6
8 févr. 2009 à 02:02
p.s:
la page telle qu'elle c'est avec ce que tu m'as donné azraka. sauf pour le onmouseout, j'ai mis la même chose qu'avec le over mais avec la fonction range() et mon autre setinterval. (vous pouvez ouvrir les source, le script est dans la page, pas dans un fichier js si vous souhaitez en savoir plus, enfin seulement si vous souhaitez me venir en aide =D)
0
Azraka Messages postés 252 Date d'inscription mercredi 11 juin 2008 Statut Membre Dernière intervention 5 juin 2014 13
8 févr. 2009 à 10:24
Premier problème, tes appels de fonctions. Mets ça à la place, ça ira déjà mieux 
<div id="menu" onmouseover="sort=setInterval('sortir(),50');" onmouseout="range=setInterval(" ranger()="" ,50);="">


Après le soucis c'est que la boucle qui permet de décaler le cd ne s'arrète jamais (il n'y a pas de clearInterval). Donc l'idéal serait de mettre un if dans ta fonction. Si la position maximale n'est pas atteinte on effectue le déplacement, sinon on arrête la boucle. Tu n'auras pas de mal à faire ça je pense, il faudra utiliser clearInterval(sort), ou clearInterval(range);

Je pense que ça donnerai un truc du genre 
function sortir()
{
     if (positiongauche != *valeur max*)
     {
          positiongauche+=10;
          document.getElementById("menu").style.left=positiongauche;
     }
     else
     {
          clearInterval(sort);
     }
}

Bon je suis pas sûr que ça soit ça mais il faudrait faire un truc du genre. N'hésite pas à redemander si ça ne marche pas ;)
0
Réponse 4 / 21
samsam26 Messages postés 105 Date d'inscription vendredi 6 février 2009 Statut Membre Dernière intervention 4 mars 2013 6
8 févr. 2009 à 10:28
un GRAND merci Azraka, je vais déjeuner et je tente après^^
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 21
samsam26 Messages postés 105 Date d'inscription vendredi 6 février 2009 Statut Membre Dernière intervention 4 mars 2013 6
8 févr. 2009 à 11:11
rebonjour -_-
Et bien malheureusement le résultat attendu n'est toujours pas là... j'ai mis à jour la page si vous souhaitez voir le nouveau résultat. Il parait identique au précédent: il n'appelle pas la fonction range lors du retrait de la souris, lorsque la souris passe dessus il faut "la frotter" pour qu'il sorte, et enfin le dernier problème, il n'y a pas pris en compte de la valeur maximum.
je bidouille un peu mon code afin de trouver la solution, mais je suis encore ouvert à toute proposition...
0
Réponse 6 / 21
samsam26 Messages postés 105 Date d'inscription vendredi 6 février 2009 Statut Membre Dernière intervention 4 mars 2013 6
8 févr. 2009 à 19:45
En bidouillant un peu j'arrive à ceci, je ne suis pas loin du resultat, mais la fonction du onmouseout, j'ai l'impression qu'elle est appellée même quand ya la souri dessus... en gros aussitôt arrivé ça repart,... 

function avance()
{
	positiongauche+=10;
	document.getElementById("menu").style.left=positiongauche;
}

function sortir()
{
     if (positiongauche < posmax)
     {
	  sort=setInterval("avance()" ,50);
     }
     else
     {
          clearInterval(sort);
     }
}

function recule()
{
	positiongauche-=10;
	document.getElementById("menu").style.left=positiongauche;
}

function ranger()
{
     if (positiongauche > posmin)
     {
	  range=setInterval("recule()" ,50);
     }
     else
     {
          clearInterval(range);
     }
}


et après j'appelle ranger() et sortir(): 
<div id="menu" onmouseover="sortir()" onmouseout="ranger()">


voilà, je suis sur que je ne suis vraiment pas loins du but... si vous pourriez continuer à me fournir votre aide si précieuse..... merci beaucoup
0
Réponse 7 / 21
Utilisateur anonyme
8 févr. 2009 à 19:51
besoin d'aide ?
0
Réponse 8 / 21
samsam26 Messages postés 105 Date d'inscription vendredi 6 février 2009 Statut Membre Dernière intervention 4 mars 2013 6
8 févr. 2009 à 20:03
euuu oui
un très gros besoin d'aide...
je ne sais pas si tu as suvie mon problème ou si tu souhaite une explication clair?
0
Réponse 9 / 21
Utilisateur anonyme
8 févr. 2009 à 20:08
ok, je vais voir ça
0
Réponse 10 / 21
samsam26 Messages postés 105 Date d'inscription vendredi 6 février 2009 Statut Membre Dernière intervention 4 mars 2013 6
8 févr. 2009 à 20:14
en bref:
j'ai un menu qui est positionné a gauche en absolue de -250px, je souhaiterais le deplacer de façon fluide à 0px lorsque la souris passe dessus, et le remettre à sa place lorsque la souris le quitte. voici le meilleur résultat que j'arrive à obtenir: http://samsam26.u7n.org/2ndsouffle/testmenuglissant.htm (script dans le code source ou deux messages au dessus). mon problème est qu'il ne se limite pas ou très mal (entre -250 et 0px) et qu'il ne se range pas au bon moment...
0
Réponse 11 / 21
Utilisateur anonyme
8 févr. 2009 à 20:56
Voici un script que j'ai fait :

<html>
<head>

<style type='text/css'>

.pro
{height:200px;
width:400px;
border:solid red 1px;
background-color:yellow;
position:absolute;
left:-250px;
}




</style>



</head>
<body>



<div id="menu" onMouseover='deplace();' onMouseout='range();' class='pro'>
tout mon menu est ici
</div>



<script language='javascript'>

obj=document.getElementById('menu');
obj.style.left=obj.offsetLeft;
leftDepart=obj.offsetLeft;

function fDeplace()
{
if(obj.offsetLeft<=0)
{obj.style.left=obj.offsetLeft+10;
deplace();}
}

function deplace()
{
vitesseDeplacement=1;
setTimeout("fDeplace()",vitesseDeplacement);
}


function fRange()
{
if(obj.offsetLeft>=-250)
{
obj.style.left=obj.offsetLeft-10;
range();}
}


function range()
{
vitesseRange=1;
setTimeout("fRange()",vitesseRange);
}

</script>


</body>
</html>















0
Réponse 12 / 21
samsam26 Messages postés 105 Date d'inscription vendredi 6 février 2009 Statut Membre Dernière intervention 4 mars 2013 6
8 févr. 2009 à 21:01
merci c'est exactement ce que je veux veux, je vais l'eplucher et essayer de l'adapter a mon menu =)
0
Réponse 13 / 21
Utilisateur anonyme
8 févr. 2009 à 21:07
j'ai affiner le script pour qu'il soit plus efficace (voir en gras ce que j'ai ajouté):

<html>
<head>

<style type='text/css'>

.pro
{height:200px;
width:400px;
border:solid red 1px;
background-color:yellow;
position:absolute;
left:-250px;
}

</style>


</head>
<body>


<div id="menu" onMouseover='deplace();' onMouseout='range();' class='pro'>
tout mon menu est ici
</div>


<script language='javascript'>

obj=document.getElementById('menu');
obj.style.left=obj.offsetLeft;
leftDepart=obj.offsetLeft;

function fDeplace()
{
if(obj.offsetLeft<=0)
{obj.style.left=obj.offsetLeft+10;
deplace();}
}


function deplace()
{
vitesseDeplacement=1;
deplacement=setTimeout("fDeplace()",vitesseDeplacement);
}




function fRange()
{
if(obj.offsetLeft>=-250)
{
obj.style.left=obj.offsetLeft-10;
range();}
}


function range()
{
clearTimeout(deplacement);
vitesseRange=1;
setTimeout("fRange()",vitesseRange);

}
</script>




</body>
</html>
0
Azraka Messages postés 252 Date d'inscription mercredi 11 juin 2008 Statut Membre Dernière intervention 5 juin 2014 13
9 févr. 2009 à 09:06
Merci toto, je vais garder ce script sous la main, ça peut servir.
0
Réponse 14 / 21
samsam26 Messages postés 105 Date d'inscription vendredi 6 février 2009 Statut Membre Dernière intervention 4 mars 2013 6
8 févr. 2009 à 22:11
merci pour ton script totoAussi, il marche très bien et a résolu mon problème =)
0
Réponse 15 / 21
samsam26 Messages postés 105 Date d'inscription vendredi 6 février 2009 Statut Membre Dernière intervention 4 mars 2013 6
9 févr. 2009 à 19:56
Juste une question, si ya une image sur le div: lorsque la souris passe sur l'image, elle est considéré comme en dehors du div, autrement dit, la fonction range est appellée. alors que l'image est pourtant dans le div... si vous avez une idée...
0
Réponse 16 / 21
samsam26 Messages postés 105 Date d'inscription vendredi 6 février 2009 Statut Membre Dernière intervention 4 mars 2013 6
9 févr. 2009 à 23:33
voilà!
tout ceci fonctionne, même avec des images,... voici ce que j'ai rajouté:
une variable qui vaut 0 si le menu est fermé et 1 si il est ouvert: 
<html>
<head>

<style type='text/css'>
.pro
{height:200px;
width:400px;
border:solid red 1px;
background-color:yellow;
position:absolute;
left:-250px;
}
</style>

</head>
<body>



<div id="menu" onMouseover='deplace();' onMouseout='range();' class='pro'>
tout mon menu est <img src="image.gif" />
</div>



<script language='javascript'>
var compte=0;
obj=document.getElementById('menu');
obj.style.left=obj.offsetLeft;
leftDepart=obj.offsetLeft;

function fDeplace()
{
if(obj.offsetLeft<=0)
{obj.style.left=obj.offsetLeft+10;
deplace();}
}

function deplace()
{
vitesseDeplacement=1;
if(compte==0)
{
deplacement=setTimeout("fDeplace()",vitesseDeplacement);}
else
{clearTimeout(rangement); 
deplacement=setTimeout("fDeplace()",vitesseDeplacement);
compte=0;
}
}


function fRange()
{
if(obj.offsetLeft>=-250)
{
obj.style.left=obj.offsetLeft-10;
range();}
}


function range()
{
clearTimeout(deplacement); 
vitesseRange=1;
rangement=setTimeout("fRange()",vitesseRange);
compte=1;
}


</script>


</body>
</html>


tout fonctionne parfaitement! Encore merci à toto pour m'avoir donné de très bon résultats et a Azrak de m'avoir aidé.
0
Azraka Messages postés 252 Date d'inscription mercredi 11 juin 2008 Statut Membre Dernière intervention 5 juin 2014 13
10 févr. 2009 à 14:06
De rien, c'est normal.
Par contre curieux de voir le résultat je suis retourner voir ta page de test (http://samsam26.u7n.org/2ndsouffle/testmenuglissant.htm) et ça marche pas, c'est normal ?
0
Réponse 17 / 21
samsam26 Messages postés 105 Date d'inscription vendredi 6 février 2009 Statut Membre Dernière intervention 4 mars 2013 6
10 févr. 2009 à 14:34
oui j'avais pas envoyé la nouvelle page au serveur!
maintenant tu peux aller voir^^
0
Azraka Messages postés 252 Date d'inscription mercredi 11 juin 2008 Statut Membre Dernière intervention 5 juin 2014 13
10 févr. 2009 à 14:36
Merci. En effet c'est super classe ;)
0
Réponse 18 / 21
samsam26 Messages postés 105 Date d'inscription vendredi 6 février 2009 Statut Membre Dernière intervention 4 mars 2013 6
10 févr. 2009 à 14:48
oui je trouve aussi que le résultat est sympa, encore merci pour votre aide =)
0
Réponse 19 / 21
claudiusse
Modifié par claudiusse le 14/11/2011 à 20:51
Attention Transitional +'px'
obj.style.left=obj.offsetLeft+50+'px';//important pour la compatibilité
0
Réponse 20 / 21
samsam26 Messages postés 105 Date d'inscription vendredi 6 février 2009 Statut Membre Dernière intervention 4 mars 2013 6
6 févr. 2009 à 16:36
merci beaucoup, je vais aller regarder ça, je vous tient au courant.
-1

Discussions similaires

Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
SOS EXCEL
Joluynes -
Joluynes -

4 réponses
java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
javascript:void(0);
nano -
JCVD -

18 réponses