Discussion :

[Sayrus]

Bonjour,

Ca à l'air tout bête, mais je ne parviens pas à obtenir l'id de l'objet qui fait appel à colorpicker à l'aide de sa classe...

Voici l'html

Code :

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

<div id="color1" class="colorSelector"></div>

Voici le JQuery

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
$('.colorSelector').ColorPicker({
											
										
	onShow: function (colpkr) {
		        $(colpkr).fadeIn(500);
		        return false;
	},
	onHide: function (colpkr) {
			$(colpkr).fadeOut(500);
			return false;
				},

	onChange: function (hsb, hex, rgb) {
//ICI comment récupérer l'objet COURANT $('.colorSelector') car la il applique 
le changement sur toutes les classes pourtant class="colorSelector"
Je pensais le faire avec $(this) mais ça ne fonctionne pas comme ça...
			$('.colorSelector div').css('backgroundColor', '#' + hex);
			$('.colorSelector').parent().parent().find('input').val('#' + hex);
				}
});

C'est vraiment casse tête mais c'est peut être tout simple...

Merci!

[SpaceFrog]

l'objet survolé ne se trouve pas dans cette partie du code ...
il faut aller fouiller dans le code de l'addon

[Sayrus]

D'accord c'est ce que je fais depuis des heures en vain...
Je vais finir par trouver!!!

Merci

[Sayrus]

Alors voilà, j'avance...

J'ai trouvé comment modifier le script, en ajoutant une variable "myId" qui est alors appelé dans la fonction "onChange"

Ce qui me donne (je ne montre pas le code du .js car pas important mais le code d'appel):

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
$('.colorSelector').click(function(){
			
	var myElement=$(this).attr('id');
					
	$('#'+myElement).ColorPicker({
							
	       myId:myElement,
											
		onShow: function (colpkr) {
		       $(colpkr).fadeIn(500);			
			return false;
		},
		onHide: function (colpkr) {
			$(colpkr).fadeOut(500);
			return false;
		},
	
		onChange: function (hsb, hex, rgb, myId) {
						
			$('#'+myId).find('div').css('backgroundColor', '#' + hex);
			$('#'+myId).parent().parent().find('input').val('#' + hex);
		}
	});
});

Par contre, j'utilise la fonction "click", mais le colorpicker ne s'ouvre que la deuxième fois que je clic dessus et autant de fois que l'on veut après... J'ai déjà eu la blague avec colorbox, mais je ne comprends pas pourquoi il ne se déclenche pas au premier clic?

[SpaceFrog]

il est instancié avant ?

[Sayrus]

Et bien l'utilisation simple de colorpicker est $('#monID').ColorPicker();

Je fais appel à cela dans la boucle uniquement...

Comment l'instancier correctement en JQuery?

Comme ceci : $.ColorPicker ?

Merci.

[Sayrus]

Voilà, après pas mal de temps à chercher, j'ai enfin trouver une solution tant pour le passage d'un ID dynamique que pour mon problème de fonctionnement de la fonction "click" où le colorpicker ne s'exécutait qu'au 2e click...

En fait, il fallait effectuer un ".each()" pour instancier correctement chaque ID dynamique en fonction de la classe ".colorSelector"

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
$('.colorSelector').each(function(){
 
 
				var myElement=$(this).attr('id');
 
 
				$('#'+myElement).ColorPicker({
 
					myId:myElement,
 
					onShow: function (colpkr) {
						$(colpkr).fadeIn(500);
 
						return false;
					},
					onHide: function (colpkr) {
						$(colpkr).fadeOut(500);
 
						return false;
					},
 
					onChange: function (hsb, hex, rgb, myId) {
 
 
 
						$('#'+myId).find('div').css('backgroundColor', '#' + hex);
						$('#'+myId).parent().parent().find('input').val('#' + hex);
					}
				});