Scrollbar horizontale avec images

Version imprimable

27/04/2007, 15h12
Oluha

Scrollbar horizontale avec images

Salut

J'ai un peu honte de poster ça mais j'ai beau chercher sur le forum ou google, je ne trouve rien :oops:

Mon client m'emmerde à vouloir faire une scrollbar horizontale farfelue sur son site, mais pas le choix, faut faire. J'ai mis en pièce jointe la chose en question.

Seulement je trouve des codes pour faire 2 boutons "haut/bas" mais pas pour faire une scrollbar horizontale (donc droite/gauche) et qui plus est avec la barre de défilement au milieu.

Quelqu'un aurait un code tout fait pour ce genre de truc complètement inutile ? :aie:

Merci
27/04/2007, 22h05
dam_moreyllo

Bonjour !
Désolé j'ai pas de code tout fait à disposition, mais peut être que tu peux utiliser ce code par exemple (c'est le premier que j'ai trouvé, y en a peut être d'autres mieux faits) : http://www.biblioscript.com/dhtml/enc_defil.shtml
A mon avis, il suffit de lancer le défilement (a la fois de la barre de défilement mais aussi du contenu) vers la droite sur onmousedown de ton bouton droit et de l'arrêter sur onmouseup et pareil pour le bouton gauche !
Mais faudra faire un petit calcul pour que le défilement de la barre soit synchronisé avec celui du contenu.
Sinon t'a regardé au niveau des frameworks du style script.aculo.us, dojo, ... ?

Bon courage en tout cas !

bonjour,

quelque chose dans ce goût là ?

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta http-equiv="Content-Language" content="fr" />
 
<style type="text/css">
<!--
/* style conteneur pour affichage horizontal */
.conteneurH{
 width: 200px;;
 height: 80px;
 overflow: auto;
 border: ridge 2px #AAAAAA;
 padding: 5px;
}
 
/* style images pour affichage horizontal */
.horizontal{
 margin-left: 40px;
 margin-right: 40px;
 margin-top: 0px;
 margin-bottom: 0px;
 height: 50px;
 vertical-align: middle;
}
 
.btOver{
 font-weight: bold;
 cursor: pointer;
}
 
.btOut{
 font-weight: normal;
}
 
//-->
</style>
 
<script type="text/javascript">
<!--
//Tableau des images
var mesImages = new Array();
mesImages[0] = "i0.gif";
mesImages[1] = "i1.gif";
mesImages[2] = "i2.gif";
mesImages[3] = "i3.gif";
mesImages[4] = "i4.gif";
mesImages[5] = "i5.gif";
mesImages[6] = "i6.gif";
 
function diaporama()
{
 var i, elmt, c;
 
 c = document.getElementById("idConteneur");
 
     c.className = "conteneurH";
     elmt = document.createElement("nobr"); //ajout de la balise nobr pour éviter un retour à la ligne
     c.appendChild(elmt);
     c = elmt;
 
 
 for (i=0; i<mesImages.length; i++)
 {
   elmt = document.createElement("img");
   elmt.id = "idImage"+this.i;
   elmt.src = mesImages[i];
 
   elmt.className = "horizontal";
 
   c.appendChild(elmt);
 }
 
}
 
/************************************************/
var delai = "20", pas=5;
 
var timer=null;
var sW, cW, sL;
var obj = null;
var sens;
 
function timeScroll()
{
  sL = sL+sens;
  if (sL<=0 || sL+cW>=sW)
  {
    clearInterval(timer);
    timer = null;
  }
  else
    obj.scrollLeft = sL;
}
 
function scroll(bt, ev)
{
  obj = document.getElementById("idConteneur");
  //alert(obj.offsetWidth+" "+obj.scrollWidth+" "+obj.clientWidth+" "+obj.scrollLeft);
  sW = parseInt(obj.scrollWidth);
  cW = parseInt(obj.clientWidth);
  sL = parseInt(obj.scrollLeft);
 
  if (obj!=null && timer==null)
  {
 
    bt.className = "btOver";
 
    if (bt.id=="idGauche")
    {
     if (sL!=0)
     {
       sens = -1*pas;
       timer = setInterval("timeScroll()",delai);
     }
    }
 
    if (bt.id=="idDroite")
    {
     if (sL+cW<sW)
     {
       sens = 1*pas;
       timer = setInterval("timeScroll()",delai);
     }
    }
  }
}
 
function stopScroll(bt)
{
 bt.className = "btOut";
 
 clearInterval(timer);
 timer = null;
 
}
 
//-->
</script>
 
</head>
 
<body onload="diaporama()">
 
<div id="idConteneur"></div>
<div>
<span class="btOut" id="idGauche" onmouseover="scroll(this)" onmouseout="stopScroll(this)">&nbsp;Gauche&nbsp;</span>
<span class="btOut" id="idDroite" onmouseover="scroll(this)" onmouseout="stopScroll(this)">&nbsp;Droite&nbsp;</span>
</div>
 
</body>
 
</html>

survole les termes "gauche" et "droite" pour faire défiler.

Tu as 3 paramètres à déterminer :

la liste des images à faire défiler :

Code:

var mesImages = new Array();
la vitesse de défilement (en millisecondes), c'est une chaîne de caractères :
Code:

1 2 var delai = "20"
le pas du défilement (avancement du scroll en pixels):

Code:

var pas=5;

30/04/2007, 09h53
Oluha

@ptitskippy : ton script ne semble pas fonctionner sous Firefox

@auteur : ca me semble interressant, par contre il faudrait que je mette la scrollbar du navigateur en hidden mais du coup je n'ai pas la barre de défilement qu'ils m'ont mis dans la maquette :?
30/04/2007, 20h35
Auteur

1 pièce(s) jointe(s)
j'ai fait un scroll avec des images....

L'image de la barre fait 1px de large sur 20px de haut (les flèches font également 20px de haut).

donc si tu veux une barre de 160px de large :
Code:

1 2 3 width: 160px; height: 20px;
n'oublie pas de préciser la hauteur ;)
02/05/2007, 09h12
Oluha

ah super merci ! 8O
02/05/2007, 11h07
Auteur

Citation:

Envoyé par Oluha

ah super merci ! 8O

Pourquoi le 8O ?
02/05/2007, 11h15
Oluha

parce que je suis étonnée que tu te sois embêté à faire le code à ma place :oops:

Merci encore ;)
02/05/2007, 12h01
Auteur

Citation:

Envoyé par Oluha

parce que je suis étonnée que tu te sois embêté à faire le code à ma place :oops:

Merci encore ;)

:lol:

il faudra sans doute l'améliorer.... ;)