Partage

Affichage Palette de Couleur JS

13 juin 2018 à 10:09:22

Bonjour à tous !

je travaille en ce moment sur une mini palette de couleur en HTML/CSS/JS, et je rencontre un problème que je n'arrive pas à résoudre ! :/

À chaque passage de la souris sur une des couleurs, le petit carré est mis à jour avec la nouvelle couleur !

Lorsque je clique sur une de ces couleurs, ma palette disparaît mais réapparaît juste après

Quelqu'un aurait-il une idée svp?

Merci d'avance !

https://codepen.io/anon/pen/OEgXJW

Pouce bleu à celui qui vous a aidé! Poster votre code : balise </> ! lire les règles générales, charte de bonne conduite :)

Lamecarlate

13 juin 2018 à 10:14:29

Bonjour,

question naïve : pourquoi ne pas utiliser un input de type "color", qui ouvre, sur les navigateurs qui l'implémentent, le sélecteur de couleurs natif au système ?

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Maestro974

13 juin 2018 à 12:11:08

Bonjour @Lamecarlate !

Merci déjà de ta réponse !

Hum, tout simplement parce que j'implémente déjà des input type color sur ma page c pour ça !

Pouce bleu à celui qui vous a aidé! Poster votre code : balise </> ! lire les règles générales, charte de bonne conduite :)

Lamecarlate

13 juin 2018 à 12:40:08

Bin pourquoi ne pas l'utiliser dans ce cas précis ?

Pas d'aide concernant le code par MP, le forum est là pour ça :)

Maestro974

13 juin 2018 à 12:55:45

Parce que le responsable a demandé à ce que j'implémente d'une manière différente un système de couleurs personnalisé ! :/

Edit: Le responsable m'a réexpliqué il y a un instant ce qu'il attendait. En fait, il faut implémenter un jeu de couleurs personnalisé et plus esthétique que le input type color puisque celui-ci n'est pas beau.

Mais du coup, en m'ayant dit tout ça, mon code est incomplet, vu que je propose plusieurs couleurs, mais un seul choix possible.

Comment je peux faire en sorte de proposer un dégradé de plusieurs couleurs à la fois??

Edit de nouveau : J'ai essayé d'avancer un peu sur mon problème d'une autre façon cette fois, mais malheureusement je n'arrive pas à afficher ce que je souhaite !

J'arrive bien à générer un dégradé de couleur (grâce à linear-gradient) à chaque clic sur le carré.

Le problème est que je n'arrive pas à afficher dans mon picker (petit modal) sous forme de mini picker les dégradés de couleur :/

En gros, avoir ce résultat, mais cette fois avec des dégradés de couleur, ce qui correspond à la ligne 8 dans mon code

https://codepen.io/anon/pen/zazWzX

Edit: en refaisant un point ce matin avec le responsable, il s'est rendu compte qu'il m'avait mal expliqué le résultat à avoir !

En même temps, quand on parle de palette de couleur, ou dégradés de couleur, on pense généralement aux nombreuses palettes de couleurs dispo sur internet ayant un vaste choix de couleurs possibles x)

Du coup, ce qu'il attend, c'est d'avoir plusieurs jeux de couleurs ! (Ex: {rouge,vert,bleu}, {bleu, jaune, blanc}....)

Mais je ne vois pas vraiment comment générer ça :/

-
Edité par Maestro974 14 juin 2018 à 9:08:53

Pouce bleu à celui qui vous a aidé! Poster votre code : balise </> ! lire les règles générales, charte de bonne conduite :)

leo_sky

14 juin 2018 à 14:57:55

Ok pour le premier problème c'étais simple juste dans le html d'enlever le display none

<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  </head>
  <body>
    <div>
      <label>Palette de couleur 
			  <input type="text" name="custom-color" placeholder="#FFFFFF" id="pickcolor" class="call-picker" title="Cliquer ici pour ajouter une couleur">
				<div class="color-holder call-picker"></div>
				<div class="color-picker" id="color-picker"></div>
			</label>
    </div>
  </body>
</html>

Puis dans le js dans $body click de mettre fadeIn a la place de fadeOut

var colorList = [ '000000', '993300', '333300', '003300', '003366', '000066', '333399', '333333', '660000', 'FF6633', '666633', '336633', '336666', '0066FF', '666699', '666666', 'CC3333', 'FF9933', '99CC33', '669966', '66CCCC', '3366FF', '663366', '999999', 'CC66FF', 'FFCC33', 'FFFF66', '99FF66', '99CCCC', '66CCFF', '993366', 'CCCCCC', 'FF99CC', 'FFCC99', 'FFFF99', 'CCffCC', 'CCFFff', '99CCFF', 'CC99FF', 'FFFFFF' ];

var picker = $('#color-picker');

for (var i = 0; i < colorList.length; i++ ) 
{
  picker.append('<li class="color-item" data-hex="' + '#' + colorList[i] + '" style="background-color:' + '#' + colorList[i] + ';"></li>');
}

$('body').click(function () 
                {
  picker.fadeIn();
});

$('.call-picker').click(function(event) {
  event.stopPropagation();
  picker.fadeIn();
  picker.children('li').hover(function() {
    var codeHex = $(this).data('hex');

    $('.color-holder').css('background-color', codeHex);
    $('#pickcolor').val(codeHex);
  });
});

Voila maintenant je regarde pour les degradé...

C'est du Grand Mendez

Maestro974

14 juin 2018 à 15:34:22

Slt @EmmanuelRebstock !

merci déja de ta réponse

J'ai pu réaliser le jeu de couleurs comme souhaite !

https://codepen.io/anon/pen/wXqqLZ

Le problème est que j'aimerai dynamiser un peu tout ce script, surtout au niveau du tableau, qui est écrit en dur :/

De plus à chaque fois que je ferme le modal et que je le ré ouvre juste après, un deuxième, troisième.... tableau, et ainsi de suite apparaît ! :/

Quelqu'un aurait une idée pour résoudre le problème et dynamiser mon script?

Merci d'avance !

Pouce bleu à celui qui vous a aidé! Poster votre code : balise </> ! lire les règles générales, charte de bonne conduite :)

leo_sky

14 juin 2018 à 15:54:47

Coucou ayez j'ai finit aussi, je donne les trois fichiers ameliorez qui sont sur codePen

html

<html>
  <head>
	<meta charset="utf-8"/>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<link rel="stylesheet" type="text/css" href="appli.css" />
  </head>
  <body>
    <div>
      <label>Palette de couleur 
			  <input type="text" name="custom-color" placeholder="#FFFFFF" id="pickcolor" class="call-picker" title="Cliquer ici pour ajouter une couleur">
				<div class="color-holder call-picker"></div>
				<div class="color-picker" id="color-picker"></div>
			</label>
    </div>
	 <script src="appli.js"></script>
  </body>
</html>

css

input.call-picker
{
  border: 1px solid #AAA;
  color: #666;
  text-transform: uppercase;
  outline: none;
  padding: 10px;
  width: 85px;
}

.color-picker
{
  width: 180px;
  background: #F3F3F3;
  height: 115px;
  padding: 5px;
  border: 5px solid #fff;
  box-shadow: 0px 0px 3px 1px #DDD;
  position: absolute;
  left: 100px;
}

.color-holder
{
  background: #ffffff;
  cursor: pointer;
  border: 1px solid #AAA;
  width: 40px;
  height: 36px;
  margin-left: 280px;
  margin-top: -40px;
}

.color-picker .color-item 
{
  cursor: pointer;
  width: 15px;
  height: 15px;
  list-style-type: none;
  float: left;
  margin: 2px;
  border: 1px solid #DDD;
  margin-left: 3px;
}

.color-picker .color-item:hover 
{
  border: 1px solid #666;
  opacity: 0.8;
  -moz-opacity: 0.8;
  filter:alpha(opacity=8);
}

et enfin le js la ou j'ai apporter les modification, je suis plus douer en js sans jquery mais bon cela fonctionne tous bien comme prévu.

var colorList = [ '000000', '993300', '333300', '003300', '003366', '000066', '333399', '333333', '660000', 'FF6633', '666633', '336633', '336666', '0066FF', '666699', '666666', 'CC3333', 'FF9933', '99CC33', '669966', '66CCCC', '3366FF', '663366', '999999', 'CC66FF', 'FFCC33', 'FFFF66', '99FF66', '99CCCC', '66CCFF', '993366', 'CCCCCC', 'FF99CC', 'FFCC99', 'FFFF99', 'CCffCC', 'CCFFff', '99CCFF', 'CC99FF', 'FFFFFF' ];

var tabLength = colorList.length;

var picker = $('#color-picker');

var colorDeux, colorTrois, colLi, colData;

for (var i = 0; i < colorList.length; i++ ) 
{
	colorDeux = getRandomInt(), colorTrois = getRandomInt();
	colLi = 'linear-gradient(#'+colorList[i] +', #'+colorList[colorDeux]+', #'+colorList[colorTrois]+')';
	colData = '#'+colorList[i]+', #'+colorList[colorDeux]+', #'+colorList[colorTrois];
  picker.append('<li class="color-item" data-hex="' + colData + '" style="background:' + colLi + ';"></li>');
}

$('body').click(function () 
                {
  picker.fadeIn();
});

$('.call-picker').click(function(event) {
  event.stopPropagation();
  picker.fadeIn();
  picker.children('li').hover(function() {
    var codeHex = $(this).data('hex');
	codeCol = 'linear-gradient('+codeHex+')';
	console.log(codeHex, codeCol);

    $('.color-holder').css('background', codeCol);
    $('#pickcolor').val(codeHex);
  });
});

function getRandomInt() 
{
  return Math.floor(Math.random() * Math.floor(tabLength));
}

Application

Voila je vais aller a mes codes(je travaille sur extension au site optimages.fr) mais je repasserait plus tard sur le forum, donc tous fonctionne lors du hover et lors du click.

Bonne journée

C'est du Grand Mendez

Maestro974

14 juin 2018 à 16:00:56

@EmmanuelRebstock merci infiniment ! :waw:

Ça va me permettre de générer tes modifs autre part dans le site, vu que j'en aurai besoin sur une autre page !

Je sais pas si tu as eu le temps de voir le nouveau codepen que j'avais mit dans mon dernier post?

Edit: Problème corrigé pour le soucis d'affichage en boucle de mon tableau lorsque je générais mon jeu de couleurs !

Je devais rajouter une condition pour vérifier l'état de mon picker, s'il était vide ou non ! et en fonction générer le tableau de couleurs!

Cependant, je pense que mon code peut-être optimisé en JS afin de générer le tableau par exemple en JS (insertRow(), insertCell()), quelqu'un aurait des idées svp?

https://codepen.io/anon/pen/wXqqLZ

-
Edité par Maestro974 15 juin 2018 à 16:03:47

Pouce bleu à celui qui vous a aidé! Poster votre code : balise </> ! lire les règles générales, charte de bonne conduite :)

leo_sky

15 juin 2018 à 19:02:25

Salut maestro je passe en coup de vent car beaucoup de boulot aujourd’hui.

A tu déjà vu ce tuto: tu peut crée une palette personnaliser dynamique avec dégradées intégrez.

https://openclassrooms.com/courses/une-palette-de-couleurs

voila au cas ou je repasserais par la i will come back

et oui j'ai vu le new code sur code pen...

-
Edité par leo_sky 15 juin 2018 à 19:03:04

C'est du Grand Mendez

Maestro974

15 juin 2018 à 21:05:23

Slt !

Ah d'accord ok, pas de soucis tkt

Oui, j'avais déjà vu ce tuto depuis un moment, mais je souhaitais quelque chose d'un peu plus esthétique xd

Ahah d'acc ça marche, merci en tout cas !

Pouce bleu à celui qui vous a aidé! Poster votre code : balise </> ! lire les règles générales, charte de bonne conduite :)

Maestro974

18 juin 2018 à 10:07:38

Re-bonjour !

http://jsfiddle.net/Los4jyzp/8/

j'ai refait mon tableau pour qu'il crée de façon plus dynamique !

J'ai un tout petit problème lorsque je parcours mon tableau multidimensionnel, j'aimerai créer des li en forme de couleurs, en fonction de la taille de chaque tableau contenu dans celui-ci, le problème est que j'ai du me tromper quelque part dans la syntaxe, il m'affiche les mêmes couleurs.

Par exemple, comme je définis 4 lignes de jeu de couleurs, le 1er jeu de couleurs devrait contenir 3 li ayant chaque couleur de ce tableau (["#f94545", "#2E8B57", "#191919"]

et à chaque ligne, on passe au tableau suivant...

D'autre part, je n'arrive pas à lorsque je clique sur "Choisir ce jeu de couleurs", faire en sorte que en fonction du jeu de couleurs choisi, que ce jeu de couleurs soit attribué sur les input type color

Edit: J'y suis presque arrivé à résoudre mon problème !

Le seul truc c que lors du clic sur le bouton Choisir, uniquement la dernière couleur du jeu sera affecté aux différents inputs !

Et je ne vois pas trop pourquoi :/

https://jsfiddle.net/Los4jyzp/21/

-
Edité par Maestro974 18 juin 2018 à 18:49:03

Pouce bleu à celui qui vous a aidé! Poster votre code : balise </> ! lire les règles générales, charte de bonne conduite :)

leo_sky

18 juillet 2018 à 2:15:24

Salut je viens un peu tardivement alors ces inputs doivent fonctionner depuis?

C'est du Grand Mendez

Maestro974

18 juillet 2018 à 15:02:15

Slt,

ahaha ouais c pas grave !

Oui c bon, j'ai pu régler mon problème depuis!

Pouce bleu à celui qui vous a aidé! Poster votre code : balise </> ! lire les règles générales, charte de bonne conduite :)

leo_sky

22 juillet 2018 à 17:10:36

cool

C'est du Grand Mendez

Maestro974

24 juillet 2018 à 14:53:31

Ahah yep!

Pouce bleu à celui qui vous a aidé! Poster votre code : balise </> ! lire les règles générales, charte de bonne conduite :)