Boîte à défilement vertical

**Papapetch** · 09/08/2007, 16h28

Bonjour
Je cherche à faire défiler verticalement des éléments (images + textes) dans une fenêtre (clip). J'ai trouvé sur DevParadise des sources qui conviennent : http://www.devparadise.com/download/...cript/f630.php

Ce code fonctionne correctement sur IE6 mais ne marche pas sur Firefox2 (sauf si je supprime le doctype, ce qui n'est pas une solution).

Pouvez-vous m'indiquer une astuce pour débloquer ce problème ou me dire où trouver un code qui fonctionne dans les navigateurs "standard" ?

Info : le forum de DevParadise ne parait plus très vivant ..

Merci par avance

**Madfrix** · 09/08/2007, 18h08

Bonjour,

pourquoi ne pas faire plus simple et déplacer un div grâce à une fonction JS qui se réinitialise lorsque ce même div sort de ton cadre ?

Cela donnerait quelque chose de ce genre là :

Code :

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

1
2
 
document.getElementById("ton_div").style.top = X+"px";

avec X qui s'incremente dans une certaine mesure puis se réinitialise ensuite (boucle while).

Le tout serait exécuté toutes les Y millisecondes grâce à un setTimeout...

**Papapetch** · 10/08/2007, 12h27

Bonjour
Merci pour cette idée, ça parait en effet beaucoup plus simple.
Je fais des tests
Merci

**LexWizard** · 10/08/2007, 12h48

Salut,
Je ne comprend pas trop ce que tu cherches à faire, mais j'ai posté une source basic pour un defilement horizontal ici. Il te reste plus qu'à l'adapter pour un defillement vertical (donc "scrollLeft" devient "scrollTop"). Une fois arrivé au bout tu recommence en replacant à 0 le scrollTop.

Sinon il y a la balise <Marquee>
Exemple :

Code :

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

1
2
3
4
5
6
7
8
9
 
<MARQUEE DIRECTION="up" bgcolor="blue" width="42%">
<center>
  le Texte defil de bas en haut<br>
  le Texte defil de bas en haut<br>
le Texte defil de bas en haut<br>
<img src="url_de_ton_image">
</center>
</MARQUEE>

**Papapetch** · 10/08/2007, 14h23

J'ai essayé le code que tu m'as indiqué sous IE6 et Firefox2. Il correspond assez bien à ce que je veux faire mais dans les deux cas, les navigateurs se bloquent après avoir testé le scroll

Peux-tu me dire comment remettre ScrollTop à 0 ?

J'avais vu la balise marquee mais elle ne me semble pas standard (voir : http://www.blooberry.com/indexdot/html/supportkey/m.htm)

**LexWizard** · 10/08/2007, 14h59

Tiens j'ai refais un script pour ton cas :

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
60
61
 
<html>
<head>
<style type="text/css">
#scroll_box {
    height: 100px;
    width: 200px;
    overflow: hidden;
  }
</style>
<script type="text/javascript">
var PasRef  = 3;
var Scroll  = false;
var lastPos = null;
 
function StartScroll(id)
{
    if(!Scroll)
    {
        Scroll = true;
        Scrolling(PasRef, id);
    }
}
 
function StopScroll(){
    Scroll = false;
}
 
function Scrolling(pas, id)
{
    if(Scroll && document.getElementById(id))
    {
        document.getElementById(id).scrollTop += parseInt(pas);
 
        if(lastPos != null)
        {
            if(lastPos == document.getElementById(id).scrollTop)
            {
                document.getElementById(id).scrollTop = 0;
            }
        }
        setTimeout("Scrolling('"+ pas + "','" + id + "')",100);
        lastPos = document.getElementById(id).scrollTop;
    }
}
</script>
</head>
<body>
<a href="#" onclick="StartScroll('scroll_box');">Start Scroll</a>
<a href="#" onclick="StopScroll();">Stop Scroll</a>
<br>
<div id="scroll_box">
  <p>iciLeTexte</p>
  <p>iciLeTexte</p>
  <p>iciLeTexte</p>
  <p>iciLeTexte</p>
  <p>iciLeTexte</p>
  <p>iciLeTexte</p>
</div> 
</body>
</html>

Le problème, c'est que un fois arrivé en bas, il va remonté brusquement...

Edit: Tu peux mettre en haut et en bas du centeneur deux div dont leurs hauteur serait la hauteur du conteneur :

Code :

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

1
2
3
4
5
6
7
8
9
10
<div id="scroll_box" style="border:1px solid Black;">
   <div style="height:100px;"></div>
  <p>1</p>
  <p>2</p>
  <p>3</p>
  <p>4</p>
  <p>5</p>
  <p>6</p>
  <div style="height:100px;"></div>
</div>

**Papapetch** · 10/08/2007, 15h13

C'est vraiment super sympa, MERCI !

Maintenant ça fonctionne bien sur IE et sur Firefox .
En effet, si on pouvait avoir une boucle ce serait top du top

**Papapetch** · 11/08/2007, 22h57

Bonsoir
Comme je n'arrive pas à faire une boucle sans retour brusque au début, j'essaie de faire un défilement continu en inversant le sens de défilement quand on arrive en bas puis quand on revient en haut etc ... (je me suis basé sur ton premier exemple que j'ai modifié)
Pb : je n'arrive pas à mettre ça au point.

Voilà ce que j'ai écrit :

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
 
<STYLE>
#scroll_box {
    height: 200px;
    width: 450px;
    overflow: hidden;
  }
</STYLE>
<SCRIPT type="text/javascript">
	<!--
var PasRef = 12;
var Scroll = false;
var MemoSens = 1;
 
function StartScroll(Sens, id)
{
    Scroll = true;
    if(Sens > 0) 
		Scrolling(PasRef, id);
    else 
		Scrolling((PasRef * -1), id);
}
 
function Scrolling(pas, id)
{
    if(Scroll && document.getElementById(id))
    {
        var nv = document.getElementById(id).scrollTop + parseInt(pas);
 
        if(nv >=0)
        {
            setTimeout("Scrolling('"+ pas + "','" + id + "')",100);
            document.getElementById(id).scrollTop += parseInt(pas);
        }
		if(nv != document.getElementById(id).scrollTop){StopScroll();}
    }
}
 
function StopScroll(){
    Scroll = false;
	MemoSens = MemoSens * -1;
	StartScroll(MemoSens,'scroll_box');
}
	//-->

Ca démarre par :

Code :

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

1
2
 
<BODY onload="StartScroll(1,'scroll_box');">

Vois-tu où est le pb ?

**LexWizard** · 13/08/2007, 08h11

Tu as "juste" ça à faire :

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
<script type="text/javascript">
var PasRef  = 3;
var Scroll  = false;
var lastPos = null;
 
function StartScroll(id)
{
    if(!Scroll)
    {
        Scroll = true;
        Scrolling(PasRef, id);
    }
}
 
function StopScroll(){
    Scroll = false;
}
 
function Scrolling(pas, id)
{
    if(Scroll && document.getElementById(id))
    {
        document.getElementById(id).scrollTop += parseInt(pas);
        
        if(lastPos != null)
        {
            if(lastPos == document.getElementById(id).scrollTop)
            {
                pas = pas * -1;
            }
        }
        setTimeout("Scrolling('"+ pas + "','" + id + "')",100);
        lastPos = document.getElementById(id).scrollTop;
    }
}
</script>

Cette condition test si l'endroit où se trouve le scroll est le même que lors de la derniere position enregistré dans lastPos. Si la condition est true, alors on est au bout (en haut ou en bas) et on inverse le sens en faisant pas * -1.

Voila

**Papapetch** · 13/08/2007, 12h15

Bingo !
Merci beaucoup de ton aide

**Papapetch** · 13/08/2007, 13h30

Et flute !
Comme ça marche bien, j'ai ajouté un stop / start losque la souris passe sur la scrollbox :

Code :

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

<div id="scroll_box" onmouseover="StopScroll();" onmouseout="StartScroll('scroll_box');">

OK avec Firefox mais ça bug avec IE6.

Sans doute encore une particularité mais comment la traiter ?

En fait, le pas de scrolling s'inverse à chaque itération

**LexWizard** · 13/08/2007, 14h08

Envoyé par Papapetch

Et flute !
Comme ça marche bien, j'ai ajouté un stop / start losque la souris passe sur la scrollbox :

Code :

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

<div id="scroll_box" onmouseover="StopScroll();" onmouseout="StartScroll('scroll_box');">

OK avec Firefox mais ça bug avec IE6.

Sans doute encore une particularité mais comment la traiter ?

En fait, le pas de scrolling s'inverse à chaque itération

C'est quoi exactement le problème ? ça ne s'arrete pas ? ça commence pas ?
Parce que ça devrait fonctionner ça...Tu as d'autres balises dans ton div?
Si oui, dit toi que par exemple si tu as mis un tableau avec sa taille à 100% du div, ta souris va faire un "mouseover" sur ton tableau et pas ton div.

**Papapetch** · 13/08/2007, 14h46

C'est complètement fou : j'avais mis les alert pour sivre le déroulement et j'avais une inversion du pas après stop / start.

j'ai enlevé les alert pour t'envoyer le code et maintenant je n'ai plus la même chose mais la vitesse de défilement varie

Voici mon code :

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
60
61
62
63
64
<html>
<head>
<title>Test scroll vertical</title>
<style type="text/css">
#scroll_box {
    height: 200px;
    width: 450px;
    overflow: hidden;
  }
</style>
<script type="text/javascript">
var pas  = 12;
var Scroll  = false;
var lastPos = null;
 
function StartScroll(id) {
    if(!Scroll) {
        Scroll = true;
        Scrolling(pas, id);
		}
	}
 
function StopScroll(){
    Scroll = false;
	}
 
function Scrolling(pas, id) {
    if(Scroll && document.getElementById(id)) {
        document.getElementById(id).scrollTop += parseInt(pas);
        if(lastPos != null) {
            if(lastPos == document.getElementById(id).scrollTop) {
				pas = pas * -1;
				}
			}
        setTimeout("Scrolling('"+ pas + "','" + id + "')",100);
        lastPos = document.getElementById(id).scrollTop;
		}
	}
</script>
</head>
<body onload="StartScroll('scroll_box');">
<div id="scroll_box" onmouseover="StopScroll();" onmouseout="StartScroll('scroll_box');">
 
	<img style="width: 85px; height: 41px;"
		src="armoric.png" alt="armoric creations" />
	<strong>Bien plus que de la publicité "</strong>
	<br />
	.... juste notre savoir-faire en communication visuelle. Enseigne et signalétique - 
	<br />
	<img style="width: 60px; height: 60px;"
		src="A410.gif" alt="Transformation sous Photoshop" />
	<strong>Transformation sous Photoshop</strong>
	<br />
	R&eacute;aliser des d&eacute;formations spectaculaires avec l'outil transformation. 
	<br />
	<img style="width: 60px; height: 60px;"
		src="F624.gif" alt="WebExpert 5" />
	<strong>WebExpert 5</strong>
	<br />
	Premier &eacute;diteur HTML francophone, la nouvelle version de WebExpert 5 regorge de nouveaut&eacute;s, 
 
</div>
</body>
</html>

**LexWizard** · 13/08/2007, 14h52

Tiens copie ce script à la place du tiens.

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
<script type="text/javascript">
var pas  = 3;
var Scroll  = false;
var lastPos = null;
var timer = null;
function StartScroll(id)
{
    if(!Scroll)
    {
        Scroll = true;
        Scrolling(id);
    }
}
 
function StopScroll(){
    if(timer)
        clearTimeout(timer);
    Scroll = false;
}
 
function Scrolling(id)
{
    if(Scroll && document.getElementById(id))
    {
        document.getElementById(id).scrollTop += parseInt(pas);
        if(lastPos != null)
        {
            if(lastPos == document.getElementById(id).scrollTop)
            {
                pas = pas * -1;
            }
        }
        timer = setTimeout("Scrolling('" + id + "')",100);
        lastPos = document.getElementById(id).scrollTop;
    }
 
}
</script>