PALETTE DE COULEUR
rayman223
Messages postés
24
Date d'inscription
dimanche 9 décembre 2007
Statut
Membre
Dernière intervention
7 avril 2013
-
29 août 2010 à 22:16
acheseb - 28 avril 2013 à 16:41
acheseb - 28 avril 2013 à 16:41
Cette discussion concerne un article du site. Pour la consulter dans son contexte d'origine, cliquez sur le lien ci-dessous.
https://codes-sources.commentcamarche.net/source/52225-palette-de-couleur
https://codes-sources.commentcamarche.net/source/52225-palette-de-couleur
28 avril 2013 à 16:41
12 août 2011 à 23:19
12 août 2011 à 23:05
27 mai 2011 à 00:28
26 mai 2011 à 20:00
var selectionRange
ensuite dans la fonction coulfade
var couleur=document.getElementById("chiffre").value;
if (window.getSelection) {
window.getSelection().removeAllRanges();
window.getSelection().addRange(selectionRange);
}
else {
selectionRange.select();
}
document.execCommand('foreColor',false,couleur);
et pour finir il faudra un peut modifier la fonction initcoul au tout debut
function initcoul(){
if(document.getElementById('genecoul')==null){
if (window.getSelection){
selectionRange = window.getSelection ();
selectionRange = selectionRange.getRangeAt(0);
}
else {
selectionRange = document.selection.createRange();
}
creation('div','body','id','genecoul');
creation('div','genecoul','id','genebar')
......
et en theorie le probleme sera reglé
par contre pour le backgroundColor la syntaxe est bonne pour m'en persuader j'ai fait un essais qui c'est avéré concluant le probleme doit venir d’ailleurs
26 mai 2011 à 11:21
en plus je veux modifier la couleur de background d'un div en utilisant cette palette normalement je dois faire comme suit
document.getElementByID(id_iv).style.backgroundColor=document.getElementById('chiffre').value;
je l'ai mi ici
if(this.prog<=0 && this.sens=='moins'){
var couleur=document.getElementById("chiffre").value;
document.getElementById(id_iv).style.backgroundColor=couleur;
document.getElementById('genecoul').parentNode.removeChild(document.getElementById('genecoul'));
return false;
}
mais ca marche pa
je l'ai mis aussi a la fin de initcoul et sa marche pa aussi
25 mai 2011 à 22:57
selectionner un element
sinon il y a un autre problème c'est quand on clic sur la croix on perd le focus sur le texte selectionné donc rien ne se produit j'ai trouver une astuce simple pour palier a ce probleme c'est au lieux de mettre une image on met un bouton avec comme fond la croix et les bordures a zero car les boutons ne retire pas le focus
il faut donc faire une modif dans la fonction initcoul
cette ligne
creation('div','genecoul','class','bout','onclick','initcoul()');
je met un bouton a la place d'un div elle devient
creation('button','genecoul','class','bout','onclick','initcoul()');
et enfin dans le css je modifie la class bout de la sorte
.bout{
position:absolute;
background:url(fermer.png) no-repeat center;
left:387px;
top:-17px;
height:20px;
width:20px;
cursor:pointer;
border:0px;
et pour la fonction coulfade la syntaxe est bien celle ci
if(this.prog<=0 && this.sens=='moins'){
var couleur=document.getElementById("chiffre").value;
document.execCommand('foreColor',false,couleur);
document.getElementById('genecoul').parentNode.removeChild(document.getElementById('genecoul'));
return false;
}
sinon j'ai fait l'essai et sa fonctionne chez moi
25 mai 2011 à 17:43
<link rel="stylesheet" type="text/css" href="res/palette.css"/>
<script language="javascript" type="text/javascript" src="res/palette2.js"></script>
<script src="_html5detect.js"></script>
<!--<script>initcoul();</script>-->
selectionner un element
<script>isItemSupported("document.execCommand", true)</script>
et j'ai changé la fonction coulfade comme suit
function coulfade(element,sens,vitesse){
if(arguments.length>=1){
this.el=typeof (arguments[0])=='string' ? document.getElementById(arguments[0]).style : document.getElementById(element.id).style;
this.sens=arguments[1];
this.setvit=arguments[2];
this.sens=='plus' ? this.prog=0 : this.prog=1;
}
this.sens=='plus' ? this.prog+=0.1 : this.prog-=0.1;
if(parseInt(navigator.userAgent.substring(30,31))<=8){
this.el.filter = 'alpha(opacity='+(this.prog*100)+')';
}
else{
this.el.opacity=this.prog;
}
if(this.prog>=1 && this.sens=='plus'){
return false;
}
if(this.prog<=0 && this.sens=='moins'){
var couleur=document.getElementById("chiffre").value;
document.execCommand('ForeColor', false,couleur);
document.getElementById('genecoul').parentNode.removeChild(document.getElementById('genecoul'));
return false;
}
setTimeout('coulfade()',this.setvit);
}
et ci dessous le contenu du fichier _html5edit.js
//http://html5demo.braincracking.org v0.1 by MadsenFr
/*******************************************************************************
* Librairie de détection automatique du support HTML5 et autres.
* N'est pas infaillible, car il existe des faux positifs ainsi que des faux négatifs.
******************************************************************************/
/*
* Détecte le support d'une balise instanciée, par reconnaissance du type d'objet créé :
* tag : nom de la balise à tester qui doit être instanciée au préalable dans le document.
*/
function isTagSupported(tag){
eltTag = document.getElementsByTagName(tag)[0];
// alert(tag+" :\n\n"+eltTag); // Débug.if (eltTag "[object HTMLUnknownElement]" || eltTag null){
document.write('
');
eltMsg = document.getElementById(tag);
eltMsg.innerHTML = "<" + tag + "> non supportée par votre navigateur !";
eltMsg.className = "ko";
}
}
/*
* Détecte le support d'un attribut, par interrogation des attributs possibles pour une balise instanciée :
* tag : nom de la balise.
* attr : nom de l'attribut à tester.
*/
function isAttributeSupported(tag, attr){
eltTag = document.getElementsByTagName(tag)[0];
// for (i in eltTag) document.write("
"+i); // Débug.
if (!(attr in eltTag)){
document.write('
');
eltMsg = document.getElementById(attr);
eltMsg.innerHTML = attr + " non supporté par votre navigateur !";
eltMsg.className = "ko";
}
}
/*
* Détecte le support d'un attribut spécifié dans une balise instanciée, par interrogation de la valeur de l'objet créé :
* id_name : id/name de la balise.
* attr : nom de l'attribut à tester.
* [ref] : valeur à laquel l'attribut a été initialisé (valeur de retour attendu de "eval", utilisé pour ).
*/
function isAttributeSpecified(id_name, attr, ref){
try{
attrVal = eval("document.getElementById(""+id_name+"")."+attr);
}catch(e){
attrVal = eval("document.getElementsByName(""+id_name+"")[0]."+attr);
}
// alert(attr+"/"+id_name+" :\n\n"+attrVal); // Débug.
if (!ref) {
sup = attr;
ref = attrVal;
}
else
sup = attr + "=" + ref;
if (!attrVal || attrVal != ref){
document.write('
');
eltMsg = document.getElementById(attr+ref);
eltMsg.innerHTML = sup + " non supporté par votre navigateur !";
eltMsg.className = "ko";
}
}
/*
* Détecte le support d'un item (objet ou methode) JavaScript :
* item : objet/fonction à tester.
* [isFunc] : booleen pour indiquer si c'est une fonction (true) ou un object (false, par defaut).
* [ref] : valeur à laquel l'objet à été initialisé (valeur de retour attendu de "eval", utilisé pour designMode).
*/
function isItemSupported(item, isFunc, ref){
value = eval(item);
// alert(item+" :\n\n"+value); // Débug.
if (!ref)
ref = value;
if (!value || value != ref){
document.write('
');
eltMsg = document.getElementById(item);
eltMsg.innerHTML = item.slice(item.lastIndexOf('.')+1) + (isFunc?"()":"")
+ " non supporté" + (isFunc?"e":"") + " par votre navigateur !";
eltMsg.className = "ko";
}
}
25 mai 2011 à 17:24
if(this.prog<=0 && this.sens=='moins'){
var couleur=document.getElementById("chiffre").value
document.execCommand('ForeColor', false,couleur)
document.getElementById('genecoul').parentNode.removeChild(document.getElementById('genecoul'));
return false;
}
et surtout ne pas mettre de guillemets au tour de la variable couleur sinon elle est considere comme une chaine de caractère
25 mai 2011 à 16:54
en fait j'insere un text puis je selectionne un texte et je clique sur un bouton couleur qui affiche la palette de coul mais en fermant la palette la couleur ne chnage pas pourtant j'ai bien mi
document.execCommand('ForeColor', false,'document.getElementById("chiffre").value' ); à la fin de la fonction initcoul()
25 mai 2011 à 16:34
document.getElementById("chiffre").value
ps: retelecharge le zip car je vient de le rendre compatible pour ie9
25 mai 2011 à 14:48
4 févr. 2011 à 01:15
31 août 2010 à 13:50
il n'y aura pas besoin d'en changer surtout qu' avec ie8 je n'ai pas rencontre de problemes c'est plus avec ie 6 et 7 que j'en ai rencontre il faut avouer que hormis le fait que ie 8 ne supporte pas le html 5 il fonctionne bien
pour en revenir a l'erreur que ie envoi j'ai pas reussi a regle le probleme j'ai donc reflechi a une autre facon de concevoir le script ce qui est un bien car j'ai pu ameliore tout ca alors qu'il falait cliquer sur l'arcenciel (endroit ou intervenait l'erreur)pour selectionner une couleur il suffit maitenant de deplacer la souris et apres avoir tester tout ca testes il n'y a plus d'erreur qui apparait.
++
30 août 2010 à 13:54
Message : 'childNodes.0' a la valeur Null ou n'est pas un objet.
Ligne : 13
Caractère : 1
Code : 0
URI : file:///Y:/Tests/Palette_couleur/palette/res/palette.js
Depuis IE8 , on a ces erreurs JS dans la puspart des sites maintenant,
sans arrêt.
Merci pour tout conseil vis à vis de IE8.
Ne me dites pas de changer de navigateur.
Il ya des entreprises qui ont une stratégie "microsoft" et qui imposent ce navigateur à tous leurs employés.
Merci, Pierre.
30 août 2010 à 00:00
29 août 2010 à 22:21
29 août 2010 à 22:16
Juste une petite chose, est-il possible de modifier le positionnement de la palette par rapport au bouton ? ou c'est un div en position absolu ?