Discussion :

[Doppleganger]

Je ne sais pas si le titre est clair, et si ce que je demande est réalisable, mais voilà ma question.

J'ai deux codes javascripts tel que.

Code javascript :

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
<script type="text/javascript" id="vTicker"> <!-- Initialisation des parametres pour le défilage automatique des articles -->	
	$(function(){
		$('#news-container').vTicker({ 
		speed: 500,
	   pause: 10000,
	   showItems: 1,
	   animation: 'fade',
	   mousePause: true,
	   height: 0,
	   direction: 'up'
		});
	});
	</script>
<script type="text/javascript" id="fleche"><!-- JavaScript permettant l'effet scrolling lorsque l'on clique sur une catégorie sur le menus de gauche -->
 
	$('a[href=#up]').click(function(){}
</script>

J'aimerais faire en sorte que le click(function(){} influe sur le javascript en haut.

J'ai tenté de faire

Code :

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

1
2
$('a[href=#up]').click(function(){
$('#news-container').vTicker({ direction :'down' }};

Mais les deux scripts rentre en conflict, lorsque je clique, cela n'écrase pas l'ancien.

Est ce que mon explication est convenable?

[SpaceFrog]

multiplier les balises script ne sert à rien
js est interprété chronologiquement...
de plus si tu utilises jquery pense au ready ...

[Bovino]

Si le plugin est écrit convenablement, la modification d'une option se fait avec :

Code :

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

$('#news-container').vTicker('option', 'nomOption', 'valeurOption');

[Doppleganger]

The .ready() method can only be called on a jQuery object matching the current document, so the selector can be omitted.
The .ready() method is typically used with an anonymous function:

Code :

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

1
2
3
$(document).ready(function() {
// Handler for .ready() called.
});

Which is equivalent to calling:

Code :

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

1
2
3
$(function() {
// Handler for .ready() called.
});

"Which is equivalent" ça veux dire que c'est la même chose non?


D'accords, bon si le javascript est executé à la suite, je dois pouvoir faire

Code :

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

1
2
if($('a[href=#up]').click)
direction:'down'

si j'ai bien compris?


Même si multiplier les balises scripts ne sert à rien, tant que c'est pas pénalisant je compte continuer à le faire, je peux attribuer un id à chaque balises et y apposer un commentaire afin de séparer chaque fonction, c'est quand même beaucoup plus lisible et plus ergonomique qu'un gros pavé à mon humble avis.

[Bovino]

Mouais... l'utilité de mettre un id sur une balise script est loin d'être limpide, mais pour ce qui est des commentaires HTML dans du code JavaScript, là c'est carrément déconseillé !

[Doppleganger]

Ah mais je ne met pas les commentaires à l'intérieur bien évidemment.

Donc vous vous ouvrez les balises script, et vous balancer tous vos javascripts à l'intérieur? Je sais pas, ça doit marcher mais je trouve ça un peu "brute", on me fait toujours la morale sur bien tout séparer et faire la différence entre deux choses différentes.
Tant qu'à faire je fait mon code html sur une seul ligne quoi

Sinon par rapport à mon probleme, j'ai fais

Code :

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

1
2
3
4
5
$('a[href=#up]').click(function(){
	$('#news-container').vTicker({ 
	   direction: 'down'
	});
});

Et le problème persiste, le code s’exécute en parallèle avec le premier, du coup les deux s’exécute en même temps et c'est le cafouillage total.

Le premier script permet de faire un effet de défilement, dans le premier j'ai indiquer la direction up, donc ça monte, sur le clique j'aimerais appliquer l'effet down.

[Bovino]

Ah mais je ne met pas les commentaires à l'intérieur bien évidemment.

Code :

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

<script type="text/javascript" id="vTicker"> <!-- Initialisation des parametres pour le défilage automatique des articles -->

Je dois pas savoir lire alors...

Si le plugin est écrit convenablement, la modification d'une option se fait avec :

Code :

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

$('#news-container').vTicker('option', 'nomOption', 'valeurOption')

[Doppleganger]

Je dois pas savoir lire alors...

Tu es sur que c'est considéré comme à l'intérieur?
Notepadd++ me l'indique en vert, et pas en noir.

option et nomoption sont identiques?

D'accords, alors j'ai mis

Code :

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

1
2
3
$('a[href=#up]').click(function(){	
	$('#news-container').vTicker('direction','down')	  
	});

Si je vous le demande à chaque fois si ce que j'ai fais est juste c'est pour savoir si l'erreur viens de moi ou si l'erreur est ailleurs, car le défilement a un comportement incompréhensible maintenant.

[Bovino]

Non, 'option' est littéral. Dans ton cas, ce serait

Code :

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

$('#news-container').vTicker('option', 'direction', 'down')

Sinon, oui, tout ce qui se trouve entre des balises <script> est considéré comme du JavaScript.

Et oui encore, l'erreur vient de toi car en utilisant

Code :

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

1
2
3
$('#news-container').vTicker({
    direction: 'down'
});

Tu redéfinis une instance du plugin sur le même élément mais avec des options contradictoires.
Ceci dit, un plugin bien codé devrait être capable de détecter cela...

[Doppleganger]

Bizarrement le sens de direction ne change pas, il n'y a que la vitesse de défilement qui accélère.

Lorsque je faisais

Code :

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

1
2
3
$('#news-container').vTicker({
    direction: 'down'
});

la direction était bien modifié, même si les scripts rentraient en conflit.

Je continue à chercher, je vous tiens au courant.

[Bovino]

Si le plugin est écrit convenablement

Ce n'est manifestement pas le cas...

[Doppleganger]

Bon je suis un peu désespéré, j'ai essayé toute sorte de combinaisons, je n'arrive pas à obtenir l'effet voulut.
De base, l'application permet de faire défiler une suite de texte.
J'aimerais donner la possibilité de faire défiler manuellement le texte en utilisant des boutons.

Voici le code du plugin pour les plus téméraires.

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
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
/*
* vertical news ticker
* Tadas Juozapaitis ( kasp3rito [eta] gmail (dot) com )
* http://www.jugbit.com/jquery-vticker-vertical-news-ticker/
*/
(function($){
$.fn.vTicker = function(options) {
	var defaults = {
		speed: 700,
		pause: 4000,
		showItems: 3,
		animation: '',
		mousePause: true,
		isPaused: false,
		direction: 'up',
		height: 0
	};
 
	var options = $.extend(defaults, options);
 
	moveUp = function(obj2, height, options){
		if(options.isPaused)
			return;
 
		var obj = obj2.children('ul');
 
    	var clone = obj.children('li:first').clone(true);
 
		if(options.height > 0)
		{
			height = obj.children('li:first').height();
		}		
 
    	obj.animate({top: '-=' + height + 'px'}, options.speed, function() {
        	$(this).children('li:first').remove();
        	$(this).css('top', '0px');
        });
 
		if(options.animation == 'fade')
		{
			obj.children('li:first').fadeOut(options.speed);
			if(options.height == 0)
			{
			obj.children('li:eq(' + options.showItems + ')').hide().fadeIn(options.speed).show();
			}
		}
 
    	clone.appendTo(obj);
 
 
 
	};
 
	moveDown = function(obj2, height, options){
		if(options.isPaused)
			return;
 
		var obj = obj2.children('ul');
 
    	var clone = obj.children('li:last').clone(true);
 
		if(options.height > 0)
		{
			height = obj.children('li:first').height();
		}
 
		obj.css('top', '-' + height + 'px')
			.prepend(clone);
 
    	obj.animate({top: 0}, options.speed, function() {
        	$(this).children('li:last').remove();
        });
 
		if(options.animation == 'fade')
		{
			if(options.height == 0)
			{
				obj.children('li:eq(' + options.showItems + ')').fadeOut(options.speed);
			}
			obj.children('li:first').hide().fadeIn(options.speed).show();
		}
	};
 
	return this.each(function() {
		var obj = $(this);
		var maxHeight = 0;
 
		obj.css({overflow: 'hidden', position: 'relative'})
			.children('ul').css({position: 'absolute', margin: 0, padding: 0})
			.children('li').css({margin: 0, padding: 0});
 
		if(options.height == 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);
		}
		else
		{
			obj.height(options.height);
		}
 
    	var interval = setInterval(function(){ 
			if(options.direction == 'up')
			{ 
				moveUp(obj, maxHeight, options); 
			}
			else
			{ 
				moveDown(obj, maxHeight, options); 
			} 
		}, options.pause);
 
		if(options.mousePause)
		{
			obj.bind("mouseenter",function(){
				options.isPaused = true;
			}).bind("mouseleave",function(){
				options.isPaused = false;
			});
		}
	});
};
})(jQuery);

J'ai essayé d’appeler MoveUp et obj.animate, lors d'un clique mais rien ne se produit. (Ou alors je l'appel mal)
En espérant une réponse pouvant me mettre sur une piste.
Bonne journée.