Système de couleurs personalisées avec JS compatible Mozilla [résolu]

Marsh Posté le 10-08-2003 à 13:19:38

Salut à tous,

Vous connaissez surement tous le système de couleurs personnalisées de ce forum (http://forum.hardware.fr/setperso.php3) et pour ceux qui n'utilisent pas IE, vous aurez remarqué que lorsqu'on essaye de changer la couleur en cliquant sur la barre de couleur au dessus du champ texte, on obtient undefin dans le champ texte.

J'ai cherché s'il n'existait pas un système idnetique dans le principe qui fonctionne aussi avec mozilla, sans succès.

Alors je vais essayer de le faire moi meme (malgré mes faibles connaissances en javasctipt) en me basant sur le script de ce forum.
Le problème avec mozilla viens du fait que dans ce code :

Code :

colRY = new Array(255,255,0,255,0,0) //Red to Yellow
colYG = new Array(255,0,255,255,0,0) //Yellow to Green
colGB = new Array(0,0,255,0,0,255) //Green to Blue
colBR = new Array(0,255,0,0,255,0) //Blue to Red
var base_hexa = "0123456789ABCDEF";
function dec2Hexa(number)
{
return base_hexa.charAt(Math.floor(number / 16)) + base_hexa.charAt(number % 16);
}
function RGB2Hexa(TR,TG,TB)
{
return "#" + dec2Hexa(TR) + dec2Hexa(TG) + dec2Hexa(TB);
}
function createPanelName(dm,ta,FormName,InputName,TestName)
{
//var var2;
fm = dm + 10
for (i=dm;i<fm+1;i++)
{
r = Math.floor(ta[0] + (i-dm)*(ta[1]-ta[0])/(fm-dm))
g = Math.floor(ta[2] + (i-dm)*(ta[3]-ta[2])/(fm-dm))
b = Math.floor(ta[4] + (i-dm)*(ta[5]-ta[4])/(fm-dm))
codehex = r + '' + g + '' + b
document.write('<td valign=\"bottom\" height=\"100%\" bgColor=\"' + RGB2Hexa(r,g,b) + '\"><img src=\"icones/trans1.gif\" var2=\"bgColor\" bgColor=\"' + RGB2Hexa(r,g,b) + '\" onClick=\"document.' + FormName + '.' + InputName + '.value = this.bgColor; ' + TestName + '.setAttribute(this.var2,this.bgColor)\"></td>\n');
}
}

lors du clic, la valeur FormName n'existe pas Faudrait-il faire une reconnaissance du navigateur pour donner le js qui va bien en fonction ?

En espérant que vous pourrez m'aider :jap:

Message édité par BenJ9002 le 10-08-2003 à 19:44:58

---------------
Le topic des plongeurs | Le topic du routeur D-Link DSL-604+

Reply

Marsh Posté le 10-08-2003 à 13:19:38

Reply

Marsh Posté le 10-08-2003 à 13:54:31

Il est déclaré où le form ?

Ton script, il est où ? Dans le head, dans le body ? Il est appelé quand ? Onclick ? Onload ? Avec une ligne à l'interrieur du body ?

Reply

Marsh Posté le 10-08-2003 à 14:59:48

En fait, ce code, c'est celui de joce qui ne fonctionne pas avec IE, mais j'aimerais réussir à l'adapter pour qu'il marche aussi avec mozilla.

Donc ce script est dans le body (essayé, ca marche avec IE)

Code :

<form id="formProfil" name="formProfil" action="def_profil.php" method="POST">
<table border="0">
<tr>
<td colspan="3" align="center">Couleur du fond d écran :</td></tr><tr>
<td colspan=3>
<table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%"><tr>
<script LANGUAGE="JavaScript">
<!--
createPanelName(0,colRY,"formProfil","fouyaya","test0" )
createPanelName(10,colYG,"formProfil","fouyaya","test0" )
createPanelName(20,colGB,"formProfil","fouyaya","test0" )
createPanelName(30,colBR,"formProfil","fouyaya","test0" )
//-->
</script></tr></table>
</td>
</tr>
<tr>
<td width="54%"><input id="fouyaya" name="fouyaya" type="text" size="7" maxlength="7" value="#FFFFFF">
</td>
<td width="16%" bgcolor="#FFFFFF" id="test0" name="test0"> </td>
</tr>
</table>

---------------
Le topic des plongeurs | Le topic du routeur D-Link DSL-604+

Reply

Marsh Posté le 10-08-2003 à 15:13:49

OK

<head>
<script type="text/javascript">

</script>
</head>
<body onload="creeMesQuatrePanels()">
</body>

Zou, emballez c'est pesé

PS: je garantie pas que ça marche, mais ça t'évitera d'autres problèmes.

Sinon, n'utilise pas document.objName.truc

Mais :

document.getElementById('objName').truc

Ca marche à partir de IE 5.5 et NS 6, et ça a l'avantage d'être standard. Utilise l'autre syntaxe en alternative, si document.getElementById == false

Message édité par MagicBuzz le 10-08-2003 à 15:14:18

Reply

Marsh Posté le 10-08-2003 à 15:24:05

:ouch:

Code :

<script type="text/javascript">
<!--
function creeMesQuatrePanels()
{
createPanelName(0,colRY,"formProfil","fouyaya","test0" )
createPanelName(10,colYG,"formProfil","fouyaya","test0" )
createPanelName(20,colGB,"formProfil","fouyaya","test0" )
createPanelName(30,colBR,"formProfil","fouyaya","test0" )
}
//-->
</script>
</head>
<body onload="creeMesQuatrePanels()">

Ca va pas géner que je fasse plusieurs zones (une pour le fond, une pour les bordures des tableaux, une pour les textes) ?

Bon, j'essaye :jap:

---------------
Le topic des plongeurs | Le topic du routeur D-Link DSL-604+

Reply

Marsh Posté le 10-08-2003 à 16:08:39

Code :

<script type="text/javascript">
<!--
function creeMesQuatrePanels()
{
createPanelName(0,colRY,"formProfil","fouyaya","test0" )
createPanelName(10,colYG,"formProfil","fouyaya","test0" )
createPanelName(20,colGB,"formProfil","fouyaya","test0" )
createPanelName(30,colBR,"formProfil","fouyaya","test0" )
}
//-->
</script>
</head>
<body onload="creeMesQuatrePanels()">

Ca marche pas ça Ca m'affiche rien et j'ai meme plus le reste de la page

Par contre si je vire le <body onload="creeMesQuatrePanels()"> j'ai ma page qui s'affiche (sans les panels bien sur )

---------------
Le topic des plongeurs | Le topic du routeur D-Link DSL-604+

Reply

Marsh Posté le 10-08-2003 à 16:27:42

Si je laisse les panels dans le tableau comme au départ, mais que je mets dans la fonction createPanelName :

Code :

document.write('<td valign=\"bottom\" height=\"100%\" bgcolor=\"' + RGB2Hexa(r,g,b) + '\"><img src=\"/trans1.gif\" var2=\"bgColor\" bgColor=\"' + RGB2Hexa(r,g,b) + '\" onClick=\"document.getElementById(\''+ InputName + '\').value = this.bgColor; document.getElementById(\'' + TestName + '\').setAttribute(this.var2,this.bgColor)\"></td>\n');

Ca ne fonctionne pas sous Mozilla : Par contre ça renvoie pas d'erreur dans la console JS
Tout ce que ça fait, ca écrit undefin dans la case :??:

---------------
Le topic des plongeurs | Le topic du routeur D-Link DSL-604+

Reply

Marsh Posté le 10-08-2003 à 17:20:16

Utilise :

document.getElementById('nomTag').innerHTML += val

=> Ca devrait écrire dans le tag spécifié. C'est plus propre que de faire un .write() sans trop savoir où ça écrit...

Reply

Marsh Posté le 10-08-2003 à 17:57:19

Je vais recadrer le problème maintenant :

J'ai fait la ligne qui affiche les couleurs possibles en php :whistle:

Code :

<span class="gras">Définition des couleurs :</span>
<table border="0">
<tr>
<td colspan="3" align="center">Couleur du fond d écran :</td></tr><tr>
<td colspan=3>
<table cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr>
<td valign="bottom" height="100%" bgcolor="#ff0000"><img src="/trans1.gif" bgColor="#ff0000" onClick="document.getElementById('fouyaya').value = this.bgColor; document.getElementById('test0').setAttribute(this.var2,this.bgColor)" var2="bgColor" /></td>
<td valign="bottom" height="100%" bgcolor="#ff1900"><img src="/trans1.gif" bgColor="#ff1900" onClick="document.getElementById('fouyaya').value = this.bgColor; document.getElementById('test0').setAttribute(this.var2,this.bgColor)" var2="bgColor" /></td>
<td valign="bottom" height="100%" bgcolor="#ff3300"><img src="/trans1.gif" bgColor="#ff3300" onClick="document.getElementById('fouyaya').value = this.bgColor; document.getElementById('test0').setAttribute(this.var2,this.bgColor)" var2="bgColor" /></td>
//...... pour chaque "case" cliquable de la couleur qui va bien.
</tr>
</table>
</td>
</tr>
<tr>
<td width="54%">
<input id="fouyaya" name="fouyaya" type="text" size="7" maxlength="7" value="#FFFFFF">
</td>
<td width="16%" bgcolor="#FFFFFF" id="test0"> </td>
</tr>
</table>

Et mon problème, c'est quand je clique sur une des cases, ca affiche undefin au lieu d'afficher le numero de la couleur

---------------
Le topic des plongeurs | Le topic du routeur D-Link DSL-604+

Reply

Marsh Posté le 10-08-2003 à 18:01:48

this.style.bgColor

Reply

Marsh Posté le 10-08-2003 à 18:01:48

Reply

Marsh Posté le 10-08-2003 à 18:02:19

this.bgColor, c'est un bug que Mozilla l'accepte, parceque c'est une merde qui a été pondue à l'époque de NetScape 4.x

Reply

Marsh Posté le 10-08-2003 à 18:03:10

Et...

PS: c'est pas ton formname qui est invalide, mais this.bgColor... Puisque la case se remplis bien mais avec une mauvaise valeur :sarcastic:

Message édité par MagicBuzz le 10-08-2003 à 18:03:25

Reply

Marsh Posté le 10-08-2003 à 18:08:37

:lol:

C'est marrant le js
J'ai tout changé mon code et ça marche (presque) :

Code :

<span class="gras">Définition des couleurs :</span>
<table border="0">
<tr>
<td colspan="3" align="center">Couleur du fond d écran :</td></tr><tr>
<td colspan=3>
<table cellpadding="0" cellspacing="0" width="100%" height="100%">
<tr>
<td valign="bottom" height="100%" bgcolor="#ff0000">
<img src="/trans1.gif" onClick="document.getElementById('fouyaya').value = '#ff0000'; document.getElementById('test0').setAttribute('#ff0000','bgcolor')" /></td>
//...... pour chaque "case" cliquable de la couleur qui va bien.
</tr>
</table>
</td>
</tr>
<tr>
<td width="54%">
<input id="fouyaya" name="fouyaya" type="text" size="7" maxlength="7" value="#FFFFFF">
</td>
<td width="16%" bgcolor="#FFFFFF" id="test0"> </td>
</tr>
</table>

maintenant, le input se remplit bien, mais j'ai pas (encore) réussi à mettre la case à la couleur qui est dans le input text

Et ensuite, j'ajouterais un test sur le input text pour que quand on le modifie, ça change aussi la couleur de la case à coté, mais quelque chose me dis que ca sera beaucoup plus simple à faire

---------------
Le topic des plongeurs | Le topic du routeur D-Link DSL-604+

Reply

Marsh Posté le 10-08-2003 à 18:13:41

obj.style.bgColor que je te dis

Reply

Marsh Posté le 10-08-2003 à 18:18:12

Code :

echo("<td valign=\"bottom\" height=\"100%\" bgcolor=\"$codehex\">
<img src=\"/trans1.gif\"
onClick=\"document.getElementById('".$InputName."').value = '$codehex'; // ca ça marche
document.getElementById('".$TestName."').obj.style.bgColor='$codehex' \" // C'est la syntaxe de ça que j'ai pas :/
/></td>\n" );

Message édité par BenJ9002 le 10-08-2003 à 18:18:29

---------------
Le topic des plongeurs | Le topic du routeur D-Link DSL-604+

Reply

Marsh Posté le 10-08-2003 à 18:25:58

Vi.

Mais par contre, je vois pas pkoi tu t'amuses à écrire ça en php, en js aussi ça marche très bien. Et ça sera à la fois plus rapide à charger (moins de données) et moins lourd pour le serveur (pas de boucle à faire inutilement, le client à un CPU aussi, il n'a qu'à s'en servir )

Reply

Marsh Posté le 10-08-2003 à 18:29:50

Ca c'est bon comme syntaxe ?
document.getElementById('".$TestName."').obj.style.bgColor='$codehex'

Parce que ça marche pas :sweat:

Pour le coup de faire en php ou js, ça change pas grand chose, déjà que mon serveur ne fout rien de rien, il peut bien faire une boucle de plus :whistle:
Mais surtout, je l'ai fait en php, pour mieux voir la sortie dans le source de ma page. Après je vais revenir au js dans ma version définitive ... une fois que j'aurais ma case de la couleur indiquée dans le champ texte.

---------------
Le topic des plongeurs | Le topic du routeur D-Link DSL-604+

Reply

Marsh Posté le 10-08-2003 à 18:41:28

C'est bon comme syntaxe ?

Code :

document.getElementById('".$TestName."').obj.style.bgColor='$codehex'

Parce que ça marche pas :sweat:

L'erreur c'est :
document.getElementById("test0" ).obj has no properties

Message édité par BenJ9002 le 10-08-2003 à 18:44:51

---------------
Le topic des plongeurs | Le topic du routeur D-Link DSL-604+

Reply

Marsh Posté le 10-08-2003 à 18:49:30

J'ai réussi

Avec ça : document.getElementById('".$TestName."').bgColor='$codehex'

Chui trop content ! :sol:

---------------
Le topic des plongeurs | Le topic du routeur D-Link DSL-604+

Reply

Marsh Posté le 10-08-2003 à 19:33:37

enlève le .obj

Reply

Marsh Posté le 10-08-2003 à 19:33:58

NON

Remets le .style

Reply

Marsh Posté le 10-08-2003 à 19:36:29

MagicBuzz a écrit :

NON

Remets le .style

Si Avec le .style ça marche pas (j'ai une erreur comme quoi fond n'est pas un objet), alors que sans le .style ça marche avec firebird et IE6 [:spamafote]

---------------
Le topic des plongeurs | Le topic du routeur D-Link DSL-604+

Reply

Marsh Posté le 10-08-2003 à 19:40:09

C'est chelou ton truc... Parceque clairement, faut passer par l'objet .style normalement...

Argh !!!
Je viens de comprendre ! Horreur ! Gros proc

On n'utilise pas "bgColor" de la balise td, mais backgroundColor de l'objet style, qui permet de modifier le style à la volée

Evidement, si on part d'un code de sagouin, chuis pas prêt de pouvoir t'aider

Reply

Marsh Posté le 10-08-2003 à 19:44:18

Ah ben oui évidement
Mais je vais rectifier tout ça ce soir : faire une jolie fonction qui me permettras d'ajouter d'autres couleurs à modifier, etc ...

En tous cas, merci pour ton aide :jap:

---------------
Le topic des plongeurs | Le topic du routeur D-Link DSL-604+

Reply

Marsh Posté le 10-08-2003 à 20:29:10

http://perso.wanadoo.fr/magicbuzz/color.htm

(rien ne me perturbe moi )

http://forum.zozoll-online.com/top [...] t=5843&i=1

Ca marche très bien.

Par contre, Moz, histoire de bien suivre les conneries préconisées par le W3C te retourne "rgb(ddd, ddd, ddd)" au lieu de "#hhhhhh" :sarcastic:

Reply

Marsh Posté le 10-08-2003 à 21:43:50

Mais si tu veux faire plusieurs panels chacun avec sa zone texte et sa case en dessous ?

---------------
Le topic des plongeurs | Le topic du routeur D-Link DSL-604+

Reply

Marsh Posté le 11-08-2003 à 03:03:26

document.getElementById('".$TestName."').obj.style.bgColor='$codehex'

il ne faut pas mettre obj, c'est quoi ce truc??
document.getElementById('".$TestName."').style.backgroundColor
(pour le style je sais pas, regarde dans msdn si tu trouves pas)

Reply

Marsh Posté le 11-08-2003 à 14:45:30

ANTSite a écrit :

document.getElementById('".$TestName."').obj.style.bgColor='$codehex'

il ne faut pas mettre obj, c'est quoi ce truc??
document.getElementById('".$TestName."').style.backgroundColor
(pour le style je sais pas, regarde dans msdn si tu trouves pas)

C bon, t'arrive après la tempête toi

Reply

Marsh Posté le 11-08-2003 à 14:48:47

oui oui bon ca va

Reply

Marsh Posté le

Reply

Système de couleurs personalisées avec JS compatible Mozilla [résolu]

Sujets relatifs:

Leave a Replay