script avec défilement vertical

Version imprimable

19/01/2009, 09h28
mdr_cedrick

script avec défilement vertical

Bonjour à tous

je post ici ne sachant pas trop où faire ma demande

je fais des recherches depuis ce matin et je ne trouve rien d'intéressant par rapport à ma recherche alors je viens vous demander si vous connaissez quelque chose dans ce genre.

j'ai des nouveautés (en réalité des screen de sites web) que je veux faire défiler verticalement (de bas en haut).
Or je ne veux pas un défilement continu. Une fois ma nouveauté apparue j'aimerai qu'elle se stop quelques instants pour qu'on puisse la regarder, puis elle disparait pour laisser la suivante arriver.
De plus lorsqu'une nouveauté est affichée, si l'on passe le curseur dessus j'aimerais qu'elle ne disparaisse pas tant qu'on a pas effectué le onmouseout

si vous connaissez ou avez déjà utilisé un script plus ou moins similaire je suis preneur

juste pour info j'utilise déjà jQuery pour d'autres chose mais ça n'utilise pas vraiment le comportement que je veux.

merci de votre aide

Salut,

Voici un script qui doit être assez proche de ton besoin, je te laisse
regarder et poser des questions si tu as de la peine à l'adapter

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
#newsbox { width: 200px; height: 200px; border: 1px solid black; position: relative; overflow: hidden; }
#newslist { position: absolute; padding: 0 0.5em; }
</style>
<script language="javascript" type="text/javascript">
 
var pos;
var speed = 1;
var pos_initial;
 
function startAnim() {
	var e = document.getElementById('newsbox');
	pos_initial = e.clientHeight + 10;
	pos = pos_initial;
	setInterval('anim()', 20);
}
function anim() {
	var e = document.getElementById('newslist');
	e.style.visibility = 'visible';
	e.style.top = Math.floor(pos) + 'px';
	pos = pos - speed;
	if(pos < -e.clientHeight) pos = pos_initial;
}
window.onload = function() {
  var e = document.getElementById('newsbox');
  e.onmouseover = function() { speed = 0; };
  e.onmouseout = function() { speed = 1; };
  startAnim()
};
</script>
</head>
 
<body>
<div id='newsbox'>
  <div id='newslist' style='visibility: hidden'>
    <h1>Titre 1</h1>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in </p>
    <h1>Titre 1</h1>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in </p>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in </p>
    <h1>Titre 1</h1>
	<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in </p>
  </div>
</div>
</body>
</html>

19/01/2009, 11h26
mdr_cedrick

merci beaucoup marcha
c'est exactement le comportement que je recherche, à une chose près c'est que j'aimerai que quand "titre 1" arrive en haut du <div> il se stop quelques secondes de manière à voir la chose (à savoir que pour moi le texte sera remplacé par une image)
19/01/2009, 11h34
marcha

Salut,

dans la fonction anim tu peux faire un test sur la variable pos
et modifier speed à 0 quand le décalage correspond à la hauteur
de ton image. puis tu lance un setTimeout sur une fonction qui
remettra speed à 1 après le délai souhaité
19/01/2009, 16h18
mdr_cedrick

j'ai pu obtenir ce que je voulais grâce à ton aide

à la seule chose près que j'aimerai que chaque image se stop or je n'ai que la première
car j'ai l'impression que le contenu du div est considéré comme un tout et non pas comme des éléments séparés
19/01/2009, 16h55
marcha

Salut,

Je crois que tu es sur la bonne voie. A mon avis
c'est juste pos % multiple

J'ai toujours une crainte sur l'utilisation du modulo
avec des nombre négatifs. Essaye éventuellement (-pos) % multiple
ou alors avec Math.abs()
19/01/2009, 17h03
mdr_cedrick

j'ai réussi à résoudre mon soucis entre temps
c'est effectivement pos % multiple
le négatif est bien gérer donc c'est impec
j'ai maintenant le comportement que je voulais
sans jQuery qui plus est !

énorme merci !
11/03/2009, 17h43
dalton31

Bonjour,

Ce script me conviendrait parfaitement.
Cependant, il faut attendre que l'intégralité du texte ait fini de défiler et disparaisse par le haut avant que le début du texte ne réaparaisse par le bas.
Comme j'envisage une zone de défilement relativement haute, j'aurais souhaité un enchaînement plus rapide.
J'ai modifié les valeurs de la ligne if(pos < -e.clientHeight) pos = pos_initial;
mais cela ne me satisfait pas complètement.
Y'a t'il un moyen d'obtenir un enchaînement sans aucun blanc ?

Merci par avance de votre aide.

Cordialement,

Cédric
12/03/2009, 08h40
marcha

Salut dalton31, et bienvenu sur le forum.

Pour éviter le blanc, c'est possible, mais ça se complique. Il faut travailler
avec deux blocs (clones) placé l'un en dessous de l'autre.

quand un bloc a complètement disparu, il faut le déplacer en dessous de
celui qui est en cours d'affichage et ainsi de suite.
17/03/2009, 20h40
zyongh

super

Super l'exemple, dommage qu'il ne fonctionne pas sous Firefox. Je ne pas Opera sur le PC que je squatte donc je n'ai pas pu tester.

En tout cas sous IE, c'est cool.
16/06/2009, 12h57
SanjeeOnP

Bonjour,

Citation:

Envoyé par mdr_cedrick

merci beaucoup marcha
c'est exactement le comportement que je recherche, à une chose près c'est que j'aimerai que quand "titre 1" arrive en haut du <div> il se stop quelques secondes de manière à voir la chose (à savoir que pour moi le texte sera remplacé par une image)

Je cherche à avoir la même chose.
Je débute en jquery et je n'arrive pas à retranscrire vos conseils en JS.
Quelqu'un peut m'aider?

Merci
17/03/2010, 17h19
artkap

J'aurais la même demande que Dalton :
Y aurais-t-il un moyen d'obtenir un enchaînement sans aucun blanc ?

Merci.
18/03/2010, 08h37
marcha

Salut,

oui, mais il faut 2 copies du contenu défilant.
quand la copie 1 a entièrement disparu de la zone
visible (la copie 2 est donc visible) il faut déplacer
la copie 1 après la copie 2 dans le DOM.

faire de même avec la copie 2 une fois qu'elle n'est
plus visible, etc...
18/03/2010, 09h43
danielhagnoul

Bonjour.

Marcha avait déjà donné la même réponse dans le message nº 9 : http://www.developpez.net/forums/m4102601-9/
21/03/2010, 17h30
bourvil

Moi aussi j'aimerais bien reussir a faire un defillement sans espace, j'ai essayer de faire ce que propose marcha mais c un peu confus.
Pouvez vous eclaircir tout ca?

merci d'avance

Salut,

Lors d'un défilement il faut placer le bloc à défiler après
la zone visible, le faire défiler jusqu'à ce qu'il la traverse
et en ressorte, puis le repositionner après et recommencer
comme ceci:
Code:

1 2 3 4 5 6 7 8 9 10 [ ]12345 [ 1]2345 [12]345 1[23]45 12[34]5 123[45] 1234[5 ] 12345[ ] [ ]12345
Le bloc formant "un seul morceau" on est obligé de laisser une zone
vide pour lui permettre d'être totalement ressorti avant de le déplacer
à nouveau dans sa position initiale.

Pour éviter la zone vide, on clone le bloc pour en faire un jumeau que
l'on place après lui:
Code:

1 2 3 4 5 6 7 8 9 10 [ ]1234512345 [ 1]234512345 [12]34512345 1[23]4512345 12[34]512345 123[45]12345 1234[51]2345 12345[12]345 [12]34512345 * une fois le premier bloc complètement sorti, on le déplace
voilà, j'espère que c'est plus clair ainsi :-)

EDIT: on part du principe que la taille de la zone visible est inférieur à la taille du bloc que
l'on fait défiler (sinon il pourrait être nécessaire de faire plusieurs clones)

14/12/2010, 12h02
piwaille_pym

script avec défilement vertical

Bonjour,
merci pour ton explication Marcha,
J'ai bien compris le fonctionnement, cependant tu ne dit pas comment faire pour cloner une div ?
14/12/2010, 13h50
marcha

Salut,

avec cloneNode
15/12/2011, 17h28
kamal111

bonjour mdr_cedrick
pouvez vous mettre le code complet modifié
j'ai besoin de la meme chose que toi et j'ai pas réussi a stopper le texte pour quelque instant
merci d'avance