texte qui défile

Version imprimable

texte qui défile

Bonjour à tous,

J'ai un code qui me permet de faire défiler du texte verticalement.
Jusqu'ici tout va bien.
Il marche pour un évenement un par un
On me demande de faire le défilement pour 2 evenements..
Et là je sèche
voici le code :

le jquery :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var headline_count;
var current_headline=1;
 
$(document).ready(function(){
  headline_count = $("div.headline").size();
  $("div.headline:eq("+current_headline+")").css('top', '5px');
  setInterval(headline_rotate,7000); //time in milliseconds et plus c'est petit plsu ça va vite
});
 
function headline_rotate() {
  old_headline = current_headline % headline_count;
  new_headline = ++current_headline % headline_count;
  $("div.headline:eq(" + old_headline + ")").css('top', '210px');
  $("div.headline:eq(" + new_headline + ")").show().animate({top: 1},"slow");     
}

le css :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 #scrollup {
	  position: relative;
	   overflow: hidden;
	   padding-left:5px;
	   height: 100px;
	   width: 210px;
 
	 }
	 .headline {
	   position: absolute;
	   top: 100px;
     	left: 5px;
	   height: 100px;
	   width:190px;
 
	 }

et le code xhtml :

Code:

1
2
3
4
5
6
7
8
 
<div id="scrollup">
<BOUCLE_agenda (EVENEMENTS){age_fin <0}{par date}{statut=publie}>
  <div class="headline"> 
 #TITRE
  </div>
  </BOUCLE_agenda>   
</div>

Je galère pas mal.
Donc je voudrais 2 évènements au lieu de 2..

merci beaucoup pour votre aide :aie:

31/10/2011, 17h51
SpaceFrog
le faire défiler deux par deux tu veux dire ?

Mets en deux dans le même conteneur

là ou les annonces sont géres par ce bout de code qui n'est pas du js ...
Code:

1 2 3 4 5 <BOUCLE_agenda (EVENEMENTS){age_fin <0}{par date}{statut=publie}> <div class="headline"> #TITRE </div> </BOUCLE_agenda>

voici le code jquery à remplacer :

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
<script type="text/javascript">
var headline_count;
var current_headline=0;
var current_headline2=1;
 
$(document).ready(function(){
  headline_count = $("div.headline").size();
  $("div.headline:eq("+current_headline+")").css('top', '5px');
  $("div.headline:eq("+current_headline2+")").css('top', '105px');
  setInterval(headline_rotate,7000); //time in milliseconds et plus c'est petit plsu ça va vite
});
 
function headline_rotate() {
  old_headline = current_headline % headline_count;
  old_headline2 = current_headline2 % headline_count;
  ++current_headline;
  ++current_headline2;
  new_headline = ++current_headline % headline_count;
  new_headline2 = ++current_headline2 % headline_count;
  $("div.headline:eq(" + old_headline + ")").css('top', '410px');
  $("div.headline:eq(" + old_headline2 + ")").css('top', '410px');
  $("div.headline:eq(" + new_headline + ")").show().animate({top: "5px"},"slow");
  $("div.headline:eq(" + new_headline2 + ")").show().animate({top: "105px"},"slow");
 
}
</script>

et là c'est bien 2 par 2!

Merci quand même pour ta réponse.

02/11/2011, 11h24
SpaceFrog

C'est une autre façon de faire plus gourmande, vu qu'elle modifie deux elements à la suite, au lieu d'un seul ...