Je vous présente mon nouveau joujou : Un chti color-picker tout bête, mais qui peut rendre service tout de même.
 
Spéc :  
 
- JS entièrement externalisé, pas d'appel depuis le code HTML
- Possibilité d'avoir autant de color-picker qu'on veut dans la même page.
- Possibilité de gérer la transparence pour les applications modifiant les CSS par exemple.
- Compatible tout navigateur récent digne de ce nom.
 
Fonctionnement :
 
Le color-picker s'autolance après chargement de la page et examine le code HTML. S'il trouve un id="temoin-color-picker-X" (ou X est un numéro) il s'auto-fabrique et reste tapis dans l'ombre.
 
Un Hermes picker a besoin de 3 choses :
 
Un id 'input-color-picker-X'(pour recevoir le résultat en hexa --> obligatoirement un input)
Un id 'temoin-color-picker-X' (pour avoir un témoin de ce qui a été choisi --> obligatoirement une image transparente).
Un id 'emplacement-color-picker-X' (pour savoir où doit apparaître le color picker quand on l'appelle --> Obligatoirement un div).
 
ET c'est tout ! Aucun appel à une fonction JS d'aucune sorte.
 
 
Note : S'il trouve un id 'check-color-picker-X', il gère la transparence.    
 
 
Adresse où voir le bouzou : http://tousleschats.free.fr/hermes [...] icker.html

Magnifique ! Bravo c'est trés bien fait !

 
Merci.

pas a dire ça marche super bien
 
Par contre 2/3 questions sur le code js, par pur curiosité (c'est pas des critiques, mais vraiment des intérrogations):
- Pourquoi avoir choisi "d'écrire du html" plus que de construire tes noeuds via les fonctions?
- Pourquoi redefinir a chaque fois tous les attributs des styles au lieu d'utiliser des class interchangeables?
- Pourquoi ne pas avoir fait une class colorPicker, instanciée au besoin? Surtout que ton code est déjà très proche de celui d'une classe.
 
Voilou, c'est tout  
Sinon je le redis c'est terrib!

très bon

 
Très bonne question. C'est évidemment ce que j'ai commencé à faire au début. Mais ce con d'IE me fout SYSTEMATIQUEMENT les input à droite d'un bloc conteneur avec ce système. Seul IE fait ça (peut être que la version 7 corrige ça).
De plus, mine de rien, ce color-picker comprend bcp d'éléments. Mais je n'exclue pas de passer plus de temps sur le code pour tenter de tout comprendre.  
 

 
Parce que j'ai tout fait à l'arrache.    
 
Je reprendrai le code tranquillou prochainement.

Toutes ces explications se valent
 

Si tu fais un appendChild, le noeud ajouté sera toujours le "dernier" du conteneur.
Si tu as besoin de le mettre ailleurs tu peux de servir de insertBefore:

 
Merci bcp, je vais essayer ça et éventuellement reprendre toute la partie de génération du color-picker.

Très sympa, vraiment très sympa.

il est à moi il est à moi personne n'y j'y posetoute mes options dessus.
je le veux que pour moi ! Coupe tes source vite vite   j'achete  
Je vais vite de ce pas poser un brevet

Pas mal, mais y'a quelques bugs :
 
- si tu met le color picker a la droite de ta page, il va s'ouvrir encore plus à droite et provoquer un scroll, ce serait bien qu'il sache quand il va dépasser.
- parfois ca détecte pas mon lacher de souris et donc le slider continue à bouger alors que je clique plus.
 
Sinon c'est pas un bug, mais ce serait bien agréable de pouvoir cliquer sur la barre des sliders pour positionner directement le bouton a cet endroit plutot que devoir viser dessus puis le déplacer.

Merci pour le retour déjà (la version est en beta, elle n'est pas terminée )
 

 
Haha, effectivement, j'ai pas prévu le coup, c'est très facile à implémenter, je vais le faire...
 

 
Oui, j'imagine que tu as firefox. Je suis désolé, mais malheureusement, il semble qu'il n'y ai aucune solution pour ce problème. C'est un bug internet à firefox qui oublie les z-index quand tu bouges la souris et capte ce qui se trouve en dessous. Heureusement, mon script est quand même pas mal, puisque tu peux continuer à bouger et si tu cliques, ça va arrêter le truc.  
Cependant, si tu as une solution au problème...    

 
Oui, j'y avais pensé. Je n'ai pas encore pris de décision là dessus.

Rha ben avec la nouveautée conçernant l'ouverture en fonction de la position, je vais attendre avant de l'implenter sur mon site

 
Ben en fait, je sais pas trop quoi faire... Je peux bien sûr décaler l'apparition du color-picker en fonction du div parent qui l'abrite, mais je rappelle que ce div parent (relisez mon message du début) vous appartient. En clair, vous pouvez d'hors et déjà positionner le color picker où bon vous semble.

Plutot que de spécifier une zone ou il apparait, tu peut pas le créer en absolut positionné la ou il faut ?

 
Tu veux dire le positionner en absolute par rapport à l'image témoin ? Ouai, si c'est surement possible... je vais voir ça... Il est même possible de créer l'image de toutes pièces et de ne garder en dur (en HTML) donc que l'input et le checkbox (quand nécessaire).

comment ça marche ce bordel, tout ce que j'ai c'est 3 onglets pour choisir les couleurs, mais après j'en fais quoi

 
Ben tu choisis ta couleur et tu cliques sur valider. La couleur hexa s'affiche alors dans le input.
 
ça permet de sélectionner des couleurs dans le cadre par exemple d'une interface d'admin.