Discussion :

[will89]

Après des recherches infructueuses, je me tourne vers vous.
Voici mon problème : sur la page que voici il y a une galerie défilante d'articles. La barre horizontale (qui apparait grâce au overflow:auto de ma page CSS) permet de les faire défiler mais je voudrais aussi que le scrolling se fasse au survol des flèches roses sur les cotés. Si quelqu'un a une solution simple à mettre en place parce que moi j'en ai trouvé aucune. Et en plus le javascript et moi ça a jamais été trop ça.

Bref, I need help

Merci d'avance

[Capt. Flame]

Moi j'utiliserais le scrollLeft.

Sur un mouseover de la flèche tu pourrais créer un setInterval et, à interval régulier, modifier la valeur du scrollLeft.

[will89]

Merci pour cette réponse. Je pense que c'est une bonne piste mais c'est pas encore tout à fait ça. Du moins pas comme j'ai réussi à l'utiliser.

Je vous mets le code HTML :

Code :

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

1
2
3
4
5
6
7
8
 
<div id="arrow_left"><img src="./images/element_bloc/fleche_defilement_gauche.jpg" alt="Vers la gauche"
     onMouseOver="doScroll(10)" onMouseOut="stopScroll()" /></div>
<div id="arrow_right"><img src="./images/element_bloc/fleche_defilement_droit.jpg" alt="Vers la droite"
     onMouseOver="doScroll(-10)" onMouseOut="stopScroll()" /></div>
<div id="theImages">
   <?php echo $galerie ?>
</div>

sachant que le PHP echo $galerie remplit la div theImages avec un tableau de environ 3000 pixels de large...

Et voici le javascript :

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
 
<script type="text/javascript">
      var intervalID;
 
      function doScroll(speed)
      {
        intervalID = setInterval(scroll(speed), 10);
      }
 
      function scroll(speed)
      {
        var elem = document.getElementById("theImages");
        elem.scrollLeft = speed;
      }
 
      function stopScroll()
      {
        clearInterval(intervalID);
      }
</script>

Vous pouvez voir ce que ça me fait actuellement ici : monshowroom.

Et quand j'ouvre la console d'erreur Javascript, j'ai ce message d'erreur :
useless setInterval call (missing quotes around arguments ?)

[will89]

Bon en fait c'est bon c'est moi qui me plantais dans l'utilisation de scrollLeft...
Je vous remets le code pour ce qui en auraient besoin et merci à Capt. Flame pour ses pistes.

HTML :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
<div id="arrow_left">
  <img src="./images/element_bloc/fleche_defilement_gauche.jpg" alt="Vers la gauche"
       onmouseover="ScrollLeft()" onmouseout="stopScroll()" />
</div>
<div id="arrow_right">
  <img src="./images/element_bloc/fleche_defilement_droit.jpg" alt="Vers la droite"
       onmouseover="ScrollRight()" onmouseout="stopScroll()" />
</div>
<div id="theImages">
  <?php echo $galerie ?>
</div>

Javascript :

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
var intervalID;
 
function ScrollLeft()
{
  intervalID = setInterval("document.getElementById('theImages').scrollLeft -= 2", 30);
}
 
function ScrollRight()
{
  intervalID = setInterval("document.getElementById('theImages').scrollLeft += 2", 30);
} 
 
function stopScroll()
{
  clearInterval(intervalID);
}

Après il y a plus que quelques réglages sur la vitesse du défilement à faire et c'est bon.