Faire bouger un div horizontalement

Version imprimable

09/05/2013, 08h50
Décibel

Faire bouger un div horizontalement

Bonjour,

J'ai cherché sur le web, sans rien trouver, pourtant je suis sur que cela se fait...

Je cherche un code javascript pour faire bouger un div (overflow) horizontalement, soit en faisant tourner la molette de la souris, soit avec 2 flèches fixe dans la page.
Attention je souhaite juste que le contenu du div bouge, pas toute la page...

Merci de votre aide

Bonjour,

ce n'est pas du javascript mais du CSS (feuilles de styles) :

Code:

1
2
3
4
5
6
7
8
9
<style type="text/css">
<!--
.monDiv{
        width: 200px;
        overflow-x: auto;
        white-space: nowrap;
}
-->
</style>

Code:

1
2
3
<div class="monDiv">Cognitis enim pilatorum caesorumque funeribus nemo deinde ad has stationes appulit navem, 
sed ut Scironis praerupta letalia declinantes litoribus Cypriis contigui navigabant, 
quae Isauriae scopulis sunt controversa.</div>

09/05/2013, 19h43
Décibel

Heuu... pas tout compris...

Je cherche un code javascript pour faire bouger le div horizontalement soit avec la roulette de la souris soit en cliquant sur 2 flèches qui seraient en plein milieu du div.
Par exemple sur un clic sur la flèche vers la droite, le div bougerait de 2 cm.
Le div overflow est bien en place, tout va bien de ce coté là...
C'est peut-être plus clair...

Code:

1 2 3 4 5 6 var fg = document.getElementById("flecheGauche"); // selection de ta fleche gauche var decallage = 100; // nombre de px de decallage voulue fg.addEventListener("onclick", function() { // ajout d'un evenement onclick fg.style.left = fg.style.left - decallage; }
tu fais la meme pour la fleche droite en ajoutant un decallage au lieu de le soustraire.
je sais pas si cela repond a ta question?
j'ai écrit le bout de code sur la tablette donc j'ai pas pu testé. previens moi si ya un soucis. ;)

09/05/2013, 19h53
rodolphebrd

Mais je vous l'ai déjà donné ce lien: http://css-tricks.com/snippets/jquer...h-mouse-wheel/

Et il y a la démo associée.
09/05/2013, 20h23
Décibel

Merci scandinave c'est bien ce genre de petit code que je cherche pour les flèches, je vais essayer et te tiens au courant.

Rodolphebrd la solution dans ton lien ne marche pas (la demo non plus :cry:). Il y a une réponse en bas de page, mais c'est une usine à gaz car en fait cela fait bouger la page entière et pas juste le contenu du div, mais merci quand même, j'ai trouvé d'autres choses, mais encore plus complexe pour mon humble niveau... :?

Alors je continue à chercher
09/05/2013, 20h29
Décibel

scandinave,

Les flèches sont dans un div position:fixed au milieu de la page, elles ne bougent pas avec le div.
Donc on doit trouver l'id du div qui doit bouger dans ton script (je pense ?) et là je ne le vois pas...
09/05/2013, 20h37
rodolphebrd

Et ça? http://jsfiddle.net/jaschahal/bd6pf/3/
09/05/2013, 20h54
scandinave
Citation:

Envoyé par Décibel

scandinave,

Les flèches sont dans un div position:fixed au milieu de la page, elles ne bougent pas avec le div.
Donc on doit trouver l'id du div qui doit bouger dans ton script (je pense ?) et là je ne le vois pas...

oui dsl, petit erreur de ma part. rajoute :
Code:

1 2 var maDiv = document.getElementById("maDiv");
et change :

Code:

fg.style.left = fg.style.left - decallage;

par
Code:

1 2 maDiv.style.left = maDiv.style.left - decallage;
09/05/2013, 21h00
scandinave

Citation:

Envoyé par rodolphebrd

Et ça? http://jsfiddle.net/jaschahal/bd6pf/3/

le problème de ça , c'est qu'il va inclure toute la librairie Jquery pour faire la meme chose. Si il a juste besoin de ça, je pense pas que ça vaille le coup.
09/05/2013, 21h41
Décibel

Whouaouuu trop bon rodolphebrd, le code de la page http://jsfiddle.net/jaschahal/bd6pf/3/, marche trop bien, merci !!

Scandinave je vais essayer ta solution, j'aurai les 2 !!!

Merci

Désolé Scandinave, mon niveau en javascript est vraiment très très faible...
Je n'arrive pas à faire tourner ta fonction, pourtant je pense qu'elle fonctionne mais je n'arrive pas à la mettre en place... :cry:

J'ai mis cela :
Code:

1 2 3 4 5 6 var fg = document.getElementById("flecheGauche"); // selection de ta fleche gauche var maDiv = document.getElementById("wrapper"); var decallage = 100; // nombre de px de decallage voulue fg.addEventListener("onclick", function() { // ajout d'un evenement onclick maDiv.style.left = maDiv.style.left - decallage; });
Le div avec l'overflow à un id=wrapper.

Voila le div de la fléche gauche

Code:

<div style="width:20px;height:20px;position:fixed;left:50%"><a href="#"><img src="../../test/rightbig.gif" width="40" height="30" alt="aa" id="flecheGauche" /></a></div><br>

09/05/2013, 22h12
scandinave
je suis dsl ,je n'est pas de pc pour tester pour l'instant.

si tu as firefox, je te conseill d'installer l'extension firebug , d'aller dans l'onglet console et me dire l'erreur qui s'affiche.

dsl de pas avoir précisé, oublie pas de mettre ceci aussi :
Code:

1 2 3 4 window.onload = function() { // le reste du code }
ça permet d'attendre que la page est finit de charger. sans ça, ton getElementById ne trouvera pas les éléments voulus.

Bon j'ai mis le code ainsi dans ma page
Code:

1 2 3 4 5 6 7 8 window.onload = function() { var fg = document.getElementById("flecheGauche"); // selection de ta fleche gauche var maDiv = document.getElementById("wrapper"); var decallage = 100; // nombre de px de decallage voulue fg.addEventListener("onclick", function() { // ajout d'un evenement onclick maDiv.style.left = maDiv.style.left - decallage; }); }
C'était bien ça ?
Mais rien, même pas une erreur, c'est comme si sur la flèche il n'y a avait pas de commande renvoyée, il ne faut rien mettre, genre un onclick="bougedela()", non ?

09/05/2013, 23h16
Décibel

A il y a une erreur :
TypeError: fg is null
8O ;)

Effectivement, je n'avais pas compris ton problème. Essaye ceci :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
 
<title></title>
<meta http-equiv="Content-type" content="application/xhtml+xml; charset=ISO-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
<script type="text/javascript">
<!--
var chrono;
function stopChrono()
{
        clearInterval(chrono);
}
 
function gauche()
{
        document.getElementById("idDiv").style.left = (parseInt(document.getElementById("idDiv").offsetLeft,10) - 10) + "px";
        chrono = setTimeout("gauche()",100);
}
 
function droite()
{
        document.getElementById("idDiv").style.left = (parseInt(document.getElementById("idDiv").offsetLeft,10) + 10) + "px";
        chrono = setTimeout("droite()",100);
}
 
//-->
</script> 
 
 
<style type="text/css">
<!--
.monDiv{
        width: 200px;
        position: absolute;
        top: 50px;
        left: 50px;
}
-->
 
-->
</style> 
 
 
</head>
 
<body>
<div class="monDiv" id="idDiv">Cognitis enim pilatorum caesorumque funeribus nemo deinde ad has stationes appulit navem, 
sed ut Scironis praerupta letalia declinantes litoribus Cypriis contigui navigabant, 
quae Isauriae scopulis sunt controversa.</div>
<div>
<input type="button" value="&lt;" onmousedown="gauche()" onmouseup="stopChrono()"/>
<input type="button" value="&gt;" onmousedown="droite()" onmouseup="stopChrono()"/>
</div>
 
</body>
</html>

09/05/2013, 23h25
Décibel

Magnifique, c'est vraiment très très bien !!

Merci beaucoup à vous tous !!

Arggg, fallait que je teste avant de crier victoire... :?

Ta solution Auteur est presque opérante, en fait elle fait bouger tout le div, mais je souhaite juste faire bouger le dedans du div car il y a un overflow

Voila ton code avec mon besoin

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
 
<title></title>
<meta http-equiv="Content-type" content="application/xhtml+xml; charset=ISO-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
<script type="text/javascript">
<!--
var chrono;
function stopChrono()
{
	clearInterval(chrono);
}
 
function gauche()
{
	document.getElementById("idDiv").style.left = (parseInt(document.getElementById("idDiv").offsetLeft,10) - 10) + "px";
	chrono = setTimeout("gauche()",100);
}
 
function droite()
{
	document.getElementById("idDiv").style.left = (parseInt(document.getElementById("idDiv").offsetLeft,10) + 10) + "px";
	chrono = setTimeout("droite()",100);
}
 
//-->
</script> 
 
 
<style type="text/css">
<!--
.monDiv{
	width: 200px;
	position: absolute;
	overflow:auto;
	height:200px;
	top: 50px;
	left: 50px;
}
-->
 
-->
</style> 
 
 
</head>
 
<body>
<div class="monDiv" id="idDiv">ggggggggggggggggfgdgfdksfhkjsdhfsfhkjdsfhskdhsdhfdjkhfrhjghdfghfjghfjghjfghfjghfjghfghfjghfjhsfjghsfghsdfklghsdghlskdskdsfgjhsfdghfjghfkjlghfjhfjghfkjlghfjghfjghsfjkghfjghfkjhfjkghfkjghfhfkhhdfjkghsfhdfjk</div>
<div>
<input type="button" value="&lt;" onmousedown="gauche()" onmouseup="stopChrono()"/>
<input type="button" value="&gt;" onmousedown="droite()" onmouseup="stopChrono()"/>
</div>
 
</body>
</html>

Le div doit rester à sa place et juste l'intérieur doit bouger...

C'est le contenant (le div) ou le contenu (le texte) que tu veux déplacer ?

Pour déplacer le contenu du div :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
 
<title></title>
<meta http-equiv="Content-type" content="application/xhtml+xml; charset=ISO-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
<script type="text/javascript">
<!--
var chrono;
function stopChrono()
{
        clearInterval(chrono);
}
 
function gauche()
{
        document.getElementById("idDiv").scrollLeft = (parseInt(document.getElementById("idDiv").scrollLeft,10) - 10);
        chrono = setTimeout("gauche()",100);
}
 
function droite()
{
        document.getElementById("idDiv").scrollLeft = (parseInt(document.getElementById("idDiv").scrollLeft,10) + 10);
        chrono = setTimeout("droite()",100);
}
 
//-->
</script> 
 
 
<style type="text/css">
<!--
.monDiv{
        width: 200px;
        overflow-x: auto;
        white-space: nowrap;
}
-->
 
-->
</style> 
 
 
</head>
 
<body>
<div class="monDiv" id="idDiv">Cognitis enim pilatorum caesorumque funeribus nemo deinde ad has stationes appulit navem, 
sed ut Scironis praerupta letalia declinantes litoribus Cypriis contigui navigabant, 
quae Isauriae scopulis sunt controversa.</div>
<div>
<input type="button" value="&lt;" onmousedown="gauche()" onmouseup="stopChrono()"/>
<input type="button" value="&gt;" onmousedown="droite()" onmouseup="stopChrono()"/>
</div>
 
</body>
</html>

12/05/2013, 12h50
Décibel

Super merci !!