Discussion :

[z3dj1]

Bonjour à tous,

Je vous écris pour vous faire part d'une petite mise à jour que j'aimerais réaliser sur un petit module Jquery fait par Texotela. Ce module permet d'afficher du texte dans un div et d'en changer toutes les X secondes avec un effet de Fade.

Le module marche parfaitement mais j'aimerais juste pouvoir passer à la news suivante sans attendre le chargement après les X secondes.

Voici le site Internet où vous pourrez trouver le module Jquery si cela peut aider certains : http://www.texotela.co.uk/code/jquery/newsticker/

Voici le code source :

//Code Javascript

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
jQuery.fn.newsTicker = jQuery.fn.newsticker = function(delay)
{
	return this.each(
		function()
		{
			if(this.nodeName.toLowerCase()!= "ul") return;
			delay = delay || 4000;
			var self = this;
			self.items = jQuery("li", self);
			// hide all items (except first one)
			self.items.not(":eq(0)").hide().end();
			// current item
			self.currentitem = 0;
			var doTick = function()
			{
				jQuery.newsticker(self);
			}
			setInterval(doTick,delay);
		}
	)
	.addClass("newsticker")
	.hover(
		function()
		{
			// pause if hovered over
			this.pause = true;
		},
		function()
		{
			// unpause when not hovered over
			this.pause = false;
		}
	);
}
jQuery.newsticker = function(el)
{
	// return if hovered over
	if(el.pause) return;
	// hide current item
	jQuery(el.items[el.currentitem]).fadeOut("slow",
		function()
		{
			jQuery(this).hide();
			// move to next item and show
			el.currentitem = ++el.currentitem % (el.items.size());
			jQuery(el.items[el.currentitem]).fadeIn("slow");
		}
	);
}
 
$(document).ready(
	function()
	{
		$("#news").newsTicker();
	}
);

//Code HTML

Code html :

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

1
2
3
4
5
6
            <ul id="news">
                <li><h2 class="back_ground">Test n°1<BR />Ceci est un test numéro 1</h2></li>
                <li><h2 class="back_ground">Test n°2<BR />Ceci est un test numéro 2</h2></li>
                <li><h2 class="back_ground">Test n°3<BR />Ceci est un test numéro 3</h2></li>
                <li><h2 class="back_ground">Test n°4<BR />Ceci est un test numéro 4</h2></li>
            </ul>

Avez-vous une idées chers professionnels du javascript / Jquery ? Par exemple créer une fonction suivante() qui permettrait de passer à la news qui suit...

Merci d'avance

[Watilin]

Salut,
il suffit de regarder un peu. Il n'y a qu'un setInterval, il appelle une fonction doTick qui est définie juste au-dessus, elle appelle jQuery.newsticker(self), et self est l'objet this, c'est-à-dire, dans le cas présent, l'objet $("#news") sur lequel le plugin a été appelé.

Donc voilà ta fonction suivante() :

Code :

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

jQuery.newsticker($("#news"));

[z3dj1]

Bah j'ai bien essayé ça mais ça ne fait rien..? ça marche pas...

Cela ne me fait rien du tout en fait

[Watilin]

Alors essaye plutôt ceci :

Code :

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

jQuery.newsticker(document.getElementById("news"));

Car en fait, self n'est pas l'objet $('#news') mais le contenu de cet objet, c'est-à-dire l'élément #news lui-même (la liste <ul>), à cause de cette fameuse itération explicite (this.each) qu'on est tenu d'utiliser quand on développe un plugin.

[z3dj1]

Arf ça marche pas non plus, merci de t'être penché sur mon soucis...

[z3dj1]

Avec le script javascript directement c'est pas plus simple pour vous ?!?

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
 
(function($) {
 
$.fn.newsTicker = $.fn.newsticker = function(delay)
{
	delay = delay || 4000;
	initTicker = function(el)
	{
		stopTicker(el);
		el.items = $("li", el);
		// hide all items (except first one)
		el.items.not(":eq(0)").hide().end();
		// current item
		el.currentitem = 0;
		startTicker(el);
	};
	startTicker = function(el)
	{
		el.tickfn = setInterval(function() { doTick(el) }, delay)
	};
	stopTicker = function(el)
	{
		clearInterval(el.tickfn);
	};
	pauseTicker = function(el)
	{
		el.pause = true;
	};
	resumeTicker = function(el)
	{
		el.pause = false;
	};
	doTick = function(el)
	{
		// don't run if paused
		if(el.pause) return;
		// pause until animation has finished
		el.pause = true;
		// hide current item
		$(el.items[el.currentitem]).fadeOut("slow",
			function()
			{
				$(this).hide();
				// move to next item and show
				el.currentitem = ++el.currentitem % (el.items.size());
				$(el.items[el.currentitem]).fadeIn("slow",
					function()
					{
						el.pause = false;
					}
				);
			}
		);
	};
	this.each(
		function()
		{
			if(this.nodeName.toLowerCase()!= "ul") return;
			initTicker(this);
		}
	)
	.addClass("newsticker")
	.hover(
		function()
		{
			// pause if hovered over
			pauseTicker(this);
		},
		function()
		{
			// resume when not hovered over
			resumeTicker(this);
		}
	);
	return this;
};
 
})(jQuery);

Y'a pas moyen de faire un ++$("#news").newsTicker ou un truc comme ça ?

[Watilin]

Ouaip, je l'avais récupéré déjà. Chez moi ça marche, ton problème doit être ailleurs...
Par contre il va y avoir un problème si l'utilisateur clique sur "suivant" à peu près en même temps que le passage "naturel" à la news suivante : visiblement le plugin n'est pas prévu pour ça, on se retrouve avec deux news affichées... A toi de voir si tu gardes ton idée ou pas.

Perso je trouve le plugin pas super bien foutu, tu pourrais en trouver un autre.