Plusieurs news défilantes sur une même page

**fixbraun** · 11/09/2009, 16h10

Bonjour à tous,

j'utilise le plugin disponible ici: http://plugins.jquery.com/project/vTicker

Il fonctionne très bien pour 1 news défilante. Cependant, j'aimerais avoir plusieurs "boîtes" avec du texte qui défile sur une même page. Or, quand j'essaye d'appeler le script plusieurs fois, cela ne fonctionne plus

Voici la fonction:

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
 
(function($){
$.fn.vTicker = function(options) {
	var defaults = {
		speed: 700,
		pause: 8000,
		showItems: 1
	};
 
	var options = $.extend(defaults, options);
 
	moveUp = function(obj, height){
    	first = obj.children('ul').children('li:first').clone(true);
    	obj.children('ul')
    	.animate({top: '-=' + height + 'px'}, options.speed, function() {
        	$(this).children('li:first').remove();
        	$(this).css('top', '0px');
        });
 
    	first.appendTo(obj.children('ul'));
	};
 
	return this.each(function() {
		obj = $(this);
		maxHeight = 0;
 
		obj.css({overflow: 'hidden', position: 'relative'})
			.children('ul').css({position: 'absolute', margin: 0, padding: 0})
			.children('li').css({margin: 0, padding: 0});
 
		obj.children('ul').children('li').each(function(){
			if($(this).height() > maxHeight)
			{
				maxHeight = $(this).height();
			}
		});
 
		obj.children('ul').children('li').each(function(){
			$(this).height(maxHeight);
		});
 
		obj.height(maxHeight * options.showItems);
 
    	interval = setInterval('moveUp(obj, maxHeight)', options.pause);
	});
};
})(jQuery);

Qui est appelée comme ceci:

Code :

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

1
2
3
$(document).ready(function(){
$('.myclass').vTicker();
});

**fixbraun** · 14/09/2009, 14h58

Personne n'a une petite idée ?

**bhinard** · 14/09/2009, 15h56

Envoyé par fixbraun

Personne n'a une petite idée ?

comment appelles tu les classes des autres "boites"? Je te donne ici le code pour une autre boite qui aurait la classe .classboite2

Code :

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

1
2
3
4
$(document).ready(function(){
$('.myclass').vTicker();
$('.classboite2').vTicker();
});

**fixbraun** · 14/09/2009, 19h45

J'ai déjà essayé cette possibilité mais seule la deuxième classe appelée fonctionne...

**bhinard** · 15/09/2009, 11h06

Envoyé par fixbraun

J'ai déjà essayé cette possibilité mais seule la deuxième classe appelée fonctionne...

peux tu poster le code entier de la page (html+js) ?

**fixbraun** · 15/09/2009, 11h47

Voilà la page html et le JS

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<title>TEST</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script src="script.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
	$('.myclass').vTicker();
	$('.myclass2').vTicker();
});
</script>
</head>
 
<body>
<div class='myclass'>
  <ul>
	<li>MESSAGE N°1</li>
	<li>MESSAGE N°2</li>
	<li>MESSAGE N°3</li>
	<li>MESSAGE N°4</li>
  </ul>
</div>
<hr />
<div class='myclass2'>
  <ul>
	<li>MESSAGE N°1</li>
	<li>MESSAGE N°2</li>
	<li>MESSAGE N°3</li>
	<li>MESSAGE N°4</li>
  </ul>
</div>
</body>
</html>

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
(function($){
$.fn.vTicker = function(options) {
	var defaults = {
		speed: 700,
		pause: 8000,
		showItems: 1
	};
 
	var options = $.extend(defaults, options);
 
	moveUp = function(obj, height){
    	first = obj.children('ul').children('li:first').clone(true);
    	obj.children('ul')
    	.animate({top: '-=' + height + 'px'}, options.speed, function() {
        	$(this).children('li:first').remove();
        	$(this).css('top', '0px');
        });
 
    	first.appendTo(obj.children('ul'));
	};
 
	return this.each(function() {
		obj = $(this);
		maxHeight = 0;
 
		obj.css({overflow: 'hidden', position: 'relative'})
			.children('ul').css({position: 'absolute', margin: 0, padding: 0})
			.children('li').css({margin: 0, padding: 0});
 
		obj.children('ul').children('li').each(function(){
			if($(this).height() > maxHeight)
			{
				maxHeight = $(this).height();
			}
		});
 
		obj.children('ul').children('li').each(function(){
			$(this).height(maxHeight);
		});
 
		obj.height(maxHeight * options.showItems);
 
    	interval = setInterval('moveUp(obj, maxHeight)', options.pause);
	});
};
})(jQuery);

Quand tu vois le résultat, seule myclass2 fonctionne et encore, les news ne défile pas du tout correctement...

Par contre, si tu retires...

Code :

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

1
2
3
4
5
6
7
8
9
 
<div class='myclass2'>
  <ul>
	<li>MESSAGE N°1</li>
	<li>MESSAGE N°2</li>
	<li>MESSAGE N°3</li>
	<li>MESSAGE N°4</li>
  </ul>
</div>

... cela fonctionne correctement pour myclass

J'aimerais donc faire fonctionner ces 2 "box de news" en mm temps...

**fixbraun** · 15/09/2009, 16h53

Il semblerait qu'il y ait un problème de boucle. En effet, quand on laisse la page pendant un petit temps, à chaque tour complet des news, chaque news est dédoublée.

Donc, après 4 tours par exemple, le deuxième <li> apparait 4 fois, de mm que le 3eme ...

Je n'en trouve toujours pas la raison :s

Plusieurs news défilantes sur une même page

jQuery

Discussions similaires

Partager

Partager