comprendre color picker

par **Berzemus** » 09 mai 2008, 13:23

cette idée est très intéressante, ça devrait marcher. par contre je ne connais pas cette syntaxe pour les tableaux et à la la 1ère ligne:
tableau = [ div1 : "couleur1", div2 : "couleur2", div3 : "couleur3" ];

Autant pour moi, c'était uniquement pour représenter un tableau, pas pour faire du code valide.

En JS, ça aurait plutôt donnée quelque chôse comme ça:

Code : Tout sélectionner

var tableau = {div1:"couleur1",div2:"couleur2",div3:"couleur3"};

ben tiens, c'est quasi pareil

Content pour toi d'avoir trouvé.

par **Invité** » 09 mai 2008, 12:46

j'ai fini par trouver la réponse à mon problème sur ce site en anglais.
Un codeur qui a modifié un peu le script du color picker pour pouvoir avoir plusieurs instances sur la même page.
J'ai rien compris mais ça marche:

http://www.itsjustpoison.com/blog/2007/ ... or-picker/

par **Invité** » 09 mai 2008, 10:59

cette idée est très intéressante, ça devrait marcher. par contre je ne connais pas cette syntaxe pour les tableaux et à la la 1ère ligne:

tableau = [ div1 : "couleur1", div2 : "couleur2", div3 : "couleur3" ];

je reçois l'erreur:

Missing ] after element list

par **Berzemus** » 09 mai 2008, 10:15

quid d'un simple tableau, du genre:

tableau = [ div1 : "couleur1", div2 : "couleur2", div3 : "couleur3" ]

Sur lequel une et une seule fontion exécute et attribue la couleur:

Code : Tout sélectionner

function mkColor(tableau)
  { 
  for (key in tableau)
    {
    $S(key).background='#'+tableau[key];
    }
  }

Avec une fonction pour attribuer les valeurs au tableau:

Code : Tout sélectionner

function attribue(div,v)
   {
   tableau[div] = v;
   }

Ensuite, pour chaque "picker", il ne fait que changer la valeur dans le tableau:

Code : Tout sélectionner

<div id="colorbox1" onclick="javascript="attribue('div1',v);"></div> 
<div id="colorbox2" onclick="javascript="attribue('div2',v);></div> 
<div id="colorbox3" onclick="javascript="attribue('div3',v);></div>

Mais a mon avis, cette dernière devrait se faire dans le code du plugin, puisque c'est lui à ce que je vois qui gère la passation des valeurs et le calcul de "v".

par **Invité** » 09 mai 2008, 09:58

dites moi si c'est toujours pas très clair...

par **Invité** » 08 mai 2008, 17:47

en gros, ça revient à trouver un moyen de passer l'id du div à la fonction mkColor.
Si cette fonction ne s'exécutait pas en permanence avec un settimeout, ça serait simple: il suffirait de passer l'id du div à la fonction sur événement onclick, comme ceci:

<div id="colorbox1" onclick="javascript:mkColor(this.id, v)></div> 
<div id="colorbox2" onclick="javascript:mkColor(this.id, v)></div> 
<div id="colorbox3" onclick="javascript:mkColor(this.id, v)></div>

Le problème, c'est que cette fonction s'exécute en permanence. Je ne vois donc pas comment faire pour identifier le div auquel je dois envoyer la couleur choisie dans le colorpicker.

par **Invité** » 08 mai 2008, 17:39

Oui c'est vrai, je récapitule brièvement.
Le div suivant reçoit et affiche la couleur choisie dans un colorpicker:

<div id="colorbox"></div>

La fontion js suivante s'exécute en permanence pour mettre à jour la couleur du div

function mkColor(v){ 

$S('colorbox').background='#'+v; 
}

v est la couleur passée en paramètres de la fonction. la valeur de v vien du colorpicker.

Si je veux mettre 3 colorpicker dans une même page, je dois commencer comme ceci en html:

<div id="colorbox1"></div>
<div id="colorbox2"></div>
<div id="colorbox3"></div>

Jusque là ça va.
Et là je bloque. Comment modifier la fonction mkColor(v) pour qu'elle puisse gérer les 3 divs?

par **Berzemus** » 08 mai 2008, 10:09

ça tourne en rond la.. tu peux faire un sujet détaillé sur ce qui cause problème, avec les bouts de code, pour qu'on puisse s'y retrouver ?

Il me semble qu'il y a une mauvaise compréhension quelque part, mais difficile de dire ou elle se trouve.

par **Invité** » 07 mai 2008, 15:08

aaarf, g peux pas faire ça...ça dupliquerait x fois la fonction avec un nom identique.

par **Invité** » 07 mai 2008, 15:01

bon, le seul moyen que j'ai trouvé pour l'instant est de faire un array avec tous mes id et de boucler dessus pour appliquer la fonction avec un gestionnaire d'événement.
Je vais tester ça, si quelqu'un a une suggestion plus optimisée...

par **Invité** » 07 mai 2008, 14:54

juste un mot pour confirmer que mkColor() s'execute bien en permanence.
si je mets un alert dans la fonction, je me retrouve avec une boucle infinie.

par **Invité** » 07 mai 2008, 14:07

la seule solution pour avoir plusieurs instances sur la même page est elle de mettre autant de fois mkColor() qu'il y a de colorpicker, en changeant manuellement l'id du div récepteur de couleur à chaque fois?

par **Invité** » 07 mai 2008, 14:03

si, il semble y avoir un timeout.
Voici le code complet. Je n'avais pas posté l'inclusion du script et le div qui affiche le color jack.

<style type="text/css">
  @import url(<?php echo $mosConfig_live_site; ?>/administrator/components/com_monoslideshow/includes/colorJack/plugin.css);
</style>

<script src="<?php echo $mosConfig_live_site; ?>/administrator/components/com_monoslideshow/includes/colorJack/plugin.js" type="text/javascript"></script>

<div id="plugin" onmousedown="HSVslide('drag','plugin',event)" style="TOP: 140px; LEFT: 430px; Z-INDEX: 20;">
 <div id="plugHEX" onmousedown="stop=0; setTimeout('stop=1',100);">F1FFCC</div><div id="plugCLOSE" onmousedown="toggle('plugin')">X</div><br>
 <div id="SV" onmousedown="HSVslide('SVslide','plugin',event)" title="Saturation + Value">
  <div id="SVslide" style="TOP: -4px; LEFT: -4px;"><br /></div>
 </div>
 <form id="H" onmousedown="HSVslide('Hslide','plugin',event)" title="Hue">
  <div id="Hslide" style="TOP: -7px; LEFT: -8px;"><br /></div>
  <div id="Hmodel"></div>
 </form>
</div>
<div id="colorbox" style="width: 300px; height: 200px; border: 1px solid gray; padding: 10px; background-color: #F1FFCC">
  <script type="text/javascript">
function mkColor(v){

$S('colorbox').background='#'+v;
}

loadSV(); updateH('F1FFCC');

  </script>
</div>


<p><a href="javascript:toggle('plugin')">Show/ hide Color Picker</a></p>

par **Ryle** » 07 mai 2008, 13:47

En l'occurence, $S() correspond à l'attribut style de l'élément. C'est $() (comme sous jquery) qui te retourne l'élément l'id est passé en paramètre :

function $(v) { return(document.getElementById(v)); }
function $S(v) { return($(v).style); }

Quant à ta fonction, il ne me semble pas qu'il y ait ni d'interval, ni de timeout dans ce script. Ta fonction ne s'exécute donc pas en permanence, mais seulement lorsqu'elle est appellée explicitement. Il te suffit donc lors de l'appel à mkColor() d'indiquer l'id de l'élément dont tu souhaites changer la couleur

par **Invité** » 07 mai 2008, 12:42

complément d'info:
d'après le développeur, $S('colorbox') est un raccourci équivalent à getelementbyid('colorbox')

comprendre color picker

Répondre

Étendre la vue Revue du sujet : comprendre color picker