Discussion :

[Décibel]

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

[Auteur]

Bonjour,

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[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...

[scandinave]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[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.

[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 ). 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

[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...

[rodolphebrd]

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

[scandinave]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

et change :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
maDiv.style.left = maDiv.style.left - decallage;

[scandinave]

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.

[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écibel]

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...

J'ai mis cela :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

    <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>

[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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

[Décibel]

Bon j'ai mis le code ainsi dans ma page

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

[Décibel]

A il y a une erreur :
TypeError: fg is null

[Auteur]

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

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[Décibel]

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

Merci beaucoup à vous tous !!

[Décibel]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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...

[Auteur]

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

Pour déplacer le contenu du div :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

[Décibel]

Super merci !!