Boîte à défilement vertical

Version imprimable

09/08/2007, 16h28
Papapetch

Boîte à défilement vertical

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
09/08/2007, 18h08
Madfrix
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:

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...
10/08/2007, 12h27
Papapetch

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

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:

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>

10/08/2007, 14h23
Papapetch

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

:oops: 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)

Tiens j'ai refais un script pour ton cas :

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

Code:

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>

10/08/2007, 15h13
Papapetch

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

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:

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:

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

Vois-tu où est le pb ?

Tu as "juste" ça à faire :
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 <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 ;)

13/08/2007, 12h15
Papapetch

Bingo !
Merci beaucoup de ton aide :king:
13/08/2007, 13h30
Papapetch

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

Code:

<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
13/08/2007, 14h08
LexWizard

Citation:

Envoyé par Papapetch

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

Code:

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

:arf:

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

Voici mon code :

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

Tiens copie ce script à la place du tiens.

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

J'ai ajouté dedans l'annulation du timer lors de l'appelle à StopScroll pour evite la variation de la vitesse ;)

Chez moi ça marche très bien.

13/08/2007, 15h06
Papapetch

Et bien là c'est parfait dans les 2 navigateurs
Merci pour ta patience
13/08/2007, 15h08
LexWizard

Pas de problème ;) Si jamais tu apportes une autre modif et que ça ne marche pas, tu peux encore demander ;)