Influencer un JavaScript à partir d'un second JavaScript

Version imprimable

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:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 <script type="text/javascript" id="vTicker">  $(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"> $('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:

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?

03/04/2013, 10h01
SpaceFrog

multiplier les balises script ne sert à rien
js est interprété chronologiquement...
de plus si tu utilises jquery pense au ready ...
03/04/2013, 10h05
Bovino

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

Code:

$('#news-container').vTicker('option', 'nomOption', 'valeurOption');
03/04/2013, 10h08
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:

1 2 3 $(document).ready(function() { // Handler for .ready() called. });
Which is equivalent to calling:
Code:

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:

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.
03/04/2013, 10h14
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é !
03/04/2013, 10h26
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 :mouarf:

Sinon par rapport à mon probleme, j'ai fais
Code:

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.
03/04/2013, 10h32
Bovino

Citation:

Envoyé par Doppleganger

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

Citation:

Envoyé par Doppleganger

Code:

<script type="text/javascript" id="vTicker"> 

Je dois pas savoir lire alors...

Citation:

Envoyé par Bovino

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

Code:

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

:roll:
03/04/2013, 10h42
Doppleganger
Citation:

Envoyé par Bovino

Je dois pas savoir lire alors...

:roll:

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:

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. :aie:
03/04/2013, 10h49
Bovino
Non, 'option' est littéral. Dans ton cas, ce serait

Code:

$('#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:

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...
03/04/2013, 11h30
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:

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.
03/04/2013, 11h38
Bovino

Citation:

Envoyé par Bovino

Si le plugin est écrit convenablement

Ce n'est manifestement pas le cas...

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:

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.