Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
2381 connectés 

  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

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

n°482379
BenJ9002
Posté le 10-08-2003 à 13:19:38  profilanswer
 

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 :
  1. colRY = new Array(255,255,0,255,0,0) //Red to Yellow
  2. colYG = new Array(255,0,255,255,0,0) //Yellow to Green
  3. colGB = new Array(0,0,255,0,0,255)   //Green to Blue
  4. colBR = new Array(0,255,0,0,255,0)   //Blue to Red
  5. var base_hexa = "0123456789ABCDEF";
  7. function dec2Hexa(number)
  8. {
  9.    return base_hexa.charAt(Math.floor(number / 16)) + base_hexa.charAt(number % 16);
  10. }
  12. function RGB2Hexa(TR,TG,TB)
  13. {
  14.   return "#" + dec2Hexa(TR) + dec2Hexa(TG) + dec2Hexa(TB);
  15. }
  16. function createPanelName(dm,ta,FormName,InputName,TestName)
  17. {
  18.     //var var2;
  19. fm = dm + 10
  20. for (i=dm;i<fm+1;i++)
  21. {
  22.  r = Math.floor(ta[0] + (i-dm)*(ta[1]-ta[0])/(fm-dm))
  23.  g = Math.floor(ta[2] + (i-dm)*(ta[3]-ta[2])/(fm-dm))
  24.  b = Math.floor(ta[4] + (i-dm)*(ta[5]-ta[4])/(fm-dm))
  25.  codehex = r + '' + g + '' + b
  26.  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');
  27. }
  28. }


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+
mood
Publicité
Posté le 10-08-2003 à 13:19:38  profilanswer
 

n°482406
MagicBuzz
Posté le 10-08-2003 à 13:54:31  profilanswer
 

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 ?

n°482491
BenJ9002
Posté le 10-08-2003 à 14:59:48  profilanswer
 

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 :
  1. <form id="formProfil" name="formProfil" action="def_profil.php" method="POST">
  2. <table border="0">
  3.   <tr>
  4.     <td colspan="3" align="center">Couleur du fond d écran :</td></tr><tr>
  5.     <td colspan=3>
  6.       <table border="0" cellpadding="0" cellspacing="0" width="100%" height="100%"><tr>
  7. <script LANGUAGE="JavaScript">
  8. <!--
  9. createPanelName(0,colRY,"formProfil","fouyaya","test0" )
  10. createPanelName(10,colYG,"formProfil","fouyaya","test0" )
  11. createPanelName(20,colGB,"formProfil","fouyaya","test0" )
  12. createPanelName(30,colBR,"formProfil","fouyaya","test0" )
  13. //-->
  14. </script></tr></table>
  15.     </td>
  16.   </tr>
  17.   <tr>
  18.     <td width="54%"><input id="fouyaya" name="fouyaya" type="text" size="7" maxlength="7" value="#FFFFFF">
  19.     </td>
  20.     <td width="16%" bgcolor="#FFFFFF" id="test0" name="test0">&nbsp;</td>
  21.   </tr>
  22. </table>


---------------
Le topic des plongeurs  |  Le topic du routeur D-Link DSL-604+
n°482501
MagicBuzz
Posté le 10-08-2003 à 15:13:49  profilanswer
 

OK
 
<head>
<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()">
</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
n°482511
BenJ9002
Posté le 10-08-2003 à 15:24:05  profilanswer
 

:ouch:  
 

Code :
  1. <script type="text/javascript">
  2. <!--
  3. function creeMesQuatrePanels()
  4. {
  5. createPanelName(0,colRY,"formProfil","fouyaya","test0" ) 
  6. createPanelName(10,colYG,"formProfil","fouyaya","test0" ) 
  7. createPanelName(20,colGB,"formProfil","fouyaya","test0" ) 
  8. createPanelName(30,colBR,"formProfil","fouyaya","test0" ) 
  9. }
  10. //-->
  11. </script>
  12. </head>
  13. <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+
n°482542
BenJ9002
Posté le 10-08-2003 à 16:08:39  profilanswer
 

Code :
  1. <script type="text/javascript">
  2. <!--
  3. function creeMesQuatrePanels()
  4. {
  5. createPanelName(0,colRY,"formProfil","fouyaya","test0" ) 
  6. createPanelName(10,colYG,"formProfil","fouyaya","test0" ) 
  7. createPanelName(20,colGB,"formProfil","fouyaya","test0" ) 
  8. createPanelName(30,colBR,"formProfil","fouyaya","test0" ) 
  9. }
  10. //-->
  11. </script>
  12. </head>
  13. <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 :D )


---------------
Le topic des plongeurs  |  Le topic du routeur D-Link DSL-604+
n°482551
BenJ9002
Posté le 10-08-2003 à 16:27:42  profilanswer
 

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

Code :
  1. 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+
n°482583
MagicBuzz
Posté le 10-08-2003 à 17:20:16  profilanswer
 

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...

n°482595
BenJ9002
Posté le 10-08-2003 à 17:57:19  profilanswer
 

Je vais recadrer le problème maintenant :
http://benj9002.free.fr/temp/pano_couleur_perso.png
 
J'ai fait la ligne qui affiche les couleurs possibles en php :whistle:  
 
 

Code :
  1. <span class="gras">Définition des couleurs :</span>
  2. <table border="0">
  3.   <tr>
  4.     <td colspan="3" align="center">Couleur du fond d écran :</td></tr><tr>
  5.     <td colspan=3>
  6.       <table cellpadding="0" cellspacing="0" width="100%" height="100%">
  7.         <tr>
  8. <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>
  9. <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>
  10. <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>
  11. //...... pour chaque "case" cliquable de la couleur qui va bien.
  12.         </tr>
  13.       </table>
  14.     </td>
  15.   </tr>
  16.   <tr>
  17.     <td width="54%">
  18.       <input id="fouyaya" name="fouyaya" type="text" size="7" maxlength="7" value="#FFFFFF">
  19.     </td>
  20.     <td width="16%" bgcolor="#FFFFFF" id="test0">&nbsp;</td>
  21.   </tr>
  22. </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+
n°482596
MagicBuzz
Posté le 10-08-2003 à 18:01:48  profilanswer
 

this.style.bgColor

mood
Publicité
Posté le 10-08-2003 à 18:01:48  profilanswer
 

n°482599
MagicBuzz
Posté le 10-08-2003 à 18:02:19  profilanswer
 

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

n°482600
MagicBuzz
Posté le 10-08-2003 à 18:03:10  profilanswer
 

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
n°482605
BenJ9002
Posté le 10-08-2003 à 18:08:37  profilanswer
 

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

Code :
  1. <span class="gras">Définition des couleurs :</span>
  2. <table border="0">
  3. <tr>
  4.    <td colspan="3" align="center">Couleur du fond d écran :</td></tr><tr>
  5.    <td colspan=3>
  6.      <table cellpadding="0" cellspacing="0" width="100%" height="100%">
  7.        <tr>
  8. <td valign="bottom" height="100%" bgcolor="#ff0000">
  9. <img src="/trans1.gif" onClick="document.getElementById('fouyaya').value = '#ff0000'; document.getElementById('test0').setAttribute('#ff0000','bgcolor')" /></td>
  10. //...... pour chaque "case" cliquable de la couleur qui va bien.
  11.        </tr>
  12.      </table>
  13.    </td>
  14. </tr>
  15. <tr>
  16.    <td width="54%">
  17.      <input id="fouyaya" name="fouyaya" type="text" size="7" maxlength="7" value="#FFFFFF">
  18.    </td>
  19.    <td width="16%" bgcolor="#FFFFFF" id="test0">&nbsp;</td>
  20. </tr>
  21. </table>

 
 
:D 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 :)  
 http://benj9002.free.fr/temp/pano_couleur_perso.png


---------------
Le topic des plongeurs  |  Le topic du routeur D-Link DSL-604+
n°482607
MagicBuzz
Posté le 10-08-2003 à 18:13:41  profilanswer
 

obj.style.bgColor que je te dis :o

n°482609
BenJ9002
Posté le 10-08-2003 à 18:18:12  profilanswer
 

Code :
  1. echo("<td valign=\"bottom\" height=\"100%\" bgcolor=\"$codehex\">
  2. <img src=\"/trans1.gif\"
  3. onClick=\"document.getElementById('".$InputName."').value = '$codehex'; // ca ça marche
  4. document.getElementById('".$TestName."').obj.style.bgColor='$codehex' \" // C'est la syntaxe de ça que j'ai pas :/  
  5. /></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+
n°482611
MagicBuzz
Posté le 10-08-2003 à 18:25:58  profilanswer
 

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 ;))

n°482613
BenJ9002
Posté le 10-08-2003 à 18:29:50  profilanswer
 

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+
n°482614
BenJ9002
Posté le 10-08-2003 à 18:41:28  profilanswer
 

C'est bon comme syntaxe ?

Code :
  1. 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+
n°482616
BenJ9002
Posté le 10-08-2003 à 18:49:30  profilanswer
 

J'ai réussi :D  
 
Avec ça : document.getElementById('".$TestName."').bgColor='$codehex'
 
Chui trop content ! :sol:


---------------
Le topic des plongeurs  |  Le topic du routeur D-Link DSL-604+
n°482631
MagicBuzz
Posté le 10-08-2003 à 19:33:37  profilanswer
 

enlève le .obj

n°482632
MagicBuzz
Posté le 10-08-2003 à 19:33:58  profilanswer
 

NON :o
 
Remets le .style :o

n°482638
BenJ9002
Posté le 10-08-2003 à 19:36:29  profilanswer
 

MagicBuzz a écrit :

NON :o
 
Remets le .style :o


 
Si :p 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+
n°482641
MagicBuzz
Posté le 10-08-2003 à 19:40:09  profilanswer
 

C'est chelou ton truc... Parceque clairement, faut passer par l'objet .style normalement...
 
Argh !!!
Je viens de comprendre ! Horreur ! Gros proc :o
 
On n'utilise pas "bgColor" de la balise td, mais backgroundColor de l'objet style, qui permet de modifier le style à la volée :o
 
Evidement, si on part d'un code de sagouin, chuis pas prêt de pouvoir t'aider ;)

n°482645
BenJ9002
Posté le 10-08-2003 à 19:44:18  profilanswer
 

Ah ben oui évidement :p  
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+
n°482673
MagicBuzz
Posté le 10-08-2003 à 20:29:10  profilanswer
 

http://perso.wanadoo.fr/magicbuzz/color.htm
 
(rien ne me perturbe moi :D)
 
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:

n°482778
BenJ9002
Posté le 10-08-2003 à 21:43:50  profilanswer
 

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+
n°482987
antsite
Je me souviens
Posté le 11-08-2003 à 03:03:26  profilanswer
 

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)

n°483490
MagicBuzz
Posté le 11-08-2003 à 14:45:30  profilanswer
 

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 ;)

n°483506
antsite
Je me souviens
Posté le 11-08-2003 à 14:48:47  profilanswer
 

oui oui bon ca va  :D

mood
Publicité
Posté le   profilanswer
 


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  HTML/CSS

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

 

Sujets relatifs
Page d'info en français sur Mozilla?[Résolu] Impossible d'exécuter des javascript
Time Format [Resolu][Résolu] formulaire => données envoyés à fonction php ?
[Résolu] formulaire => données envoyés à fonction php ?[PERL][RESOLU] Tri multi-critères avec nb d'arguments variable
( log4j ) système de "chronomètrage" implémenté ?driver JDBC, Problème de ClassPath [Résolu]
[JS] menu en JavaScript + Frame [résolu][RESOLU] Evitez enumeral mismatch ?
Plus de sujets relatifs à : Système de couleurs personalisées avec JS compatible Mozilla [résolu]

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.096 secondes

Copyright © 1997-2022 Hardware.fr SARL (Signaler un contenu illicite / Données personnelles) / Groupe LDLC / Shop HFR