[JS][FireFox et IE, rendre enabled et disabled un div

[FireFox et IE, rendre enabled et disabled un div [JS] - HTML/CSS - Programmation

Marsh Posté le 15-12-2006 à 19:58:50    

Petit sous IE Mozilla IE.
Je cherche à rendre un div disabled.
Ca se fait facilement sou sIE avec mondiv.disabled="disabled", par contre ca ne passe pas sous mozilla :(.
Comment faire ?
 

Code :
  1. <html>
  2. <body>
  3. <head>
  4. <SCRIPT language="Javascript">
  5. function check(current,linkpanel)
  6. {
  7. if ( current.checked == false )
  8. {
  9.  linkpanel.disabled="disabled";
  10. }
  11. else
  12. {
  13.  linkpanel.disabled="";
  14. }
  15. }
  16. </SCRIPT>
  17. </head>
  18. <form>
  19. <input type="checkbox" name="CB" value="Checkbox_1" onclick="javascript:check(this,document.getElementById('Checkbox_1_Detail'));">Xavier
  20. <div id="Checkbox_1_Detail">
  21.   <input type=text id="grp" name="grp" value="TOTO">
  22.   <input type="checkbox">TOTO
  23.   <input type="checkbox">TITI
  24.   <input type=button value="Annuler">
  25. </div>
  26. </Form>
  27. </body>
  28. </html>


 
 
EDIT : il y avais d'autres pb, et j'ai remplacele document.all par un getElementsByName("nomDuComposant" ) cela retourne un Array de tous les composants ayant ce le nom "nomDuComposant", pour accéder à un élement suffit de faire getElementsByName("nomDuComposant" )[i].


Message édité par Clarkent le 16-12-2006 à 01:11:53
Reply

Marsh Posté le 15-12-2006 à 19:58:50   

Reply

Marsh Posté le 15-12-2006 à 20:13:43    

Bon on va commencer par demander des trucs simples:

  • IE4 et NS4, prière d'oublier ces merdes antédilluvienne
  • dégager les fonctions "checkbrowser" et "getObjectById", tu testes en début de script si document.getElementById existe et s'il n'existe pas le script ne s'exécute pas
  • Je ne veux plus voir de document.all dans ce code.
  • le code HTML est illisible, prière de le simplifier (de dégager toutes ces tables inutiles par exemple) et de le séparer du code Javascript


On verra la suite après.


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 15-12-2006 à 21:42:50    

masklinn a écrit :

Bon on va commencer par demander des trucs simples:

  • IE4 et NS4, prière d'oublier ces merdes antédilluvienne
  • dégager les fonctions "checkbrowser" et "getObjectById", tu testes en début de script si document.getElementById existe et s'il n'existe pas le script ne s'exécute pas
  • Je ne veux plus voir de document.all dans ce code.
  • le code HTML est illisible, prière de le simplifier (de dégager toutes ces tables inutiles par exemple) et de le séparer du code Javascript


On verra la suite après.


Je vais essayer d'epurer le code, mais c'est une page de test pour moi en fait :D.

Reply

Marsh Posté le 15-12-2006 à 21:49:02    

Justement, une page de test doit faire apparaître uniquement ce qui doit être testé :o


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 15-12-2006 à 22:00:44    

et bien c'est le tout, le html est la pour montrer l'action.
 
il y a interaction entre els checkbox, et la zone de saisie tout en haut ou c'est indiqué TOTO.
Il y a deux groupes les checbox TOTO_ et les checkbox checkbox_, et suivant celui qui est indique dans la textbox et bien les checkbox agissent comme des radio boutons.
 
si l'onclique sur la zone de titre enfin la bande grise qui délimite des sous partie et bien cette partie doit se réduire et se dérouler, le div est caché ou montré.
 
si l'on coche le premier checkbox et qu'on le decoche les deux chckbox suivante TOTO TITI sont disabled c'est en fait le div qui est disabled.
 
et ce comportement fonctionne tres bien sous IE mais pas du tout sous firefox :(.

Reply

Marsh Posté le 15-12-2006 à 22:01:13    

Tu peux donc prendre la page tel quelle et l'executer.


Message édité par Clarkent le 15-12-2006 à 22:03:29
Reply

Marsh Posté le 15-12-2006 à 22:15:51    

Clarkent a écrit :

et bien c'est le tout, le html est la pour montrer l'action.


Il y a beaucoup trop de HTML, la majorité inutile

Clarkent a écrit :

et ce comportement fonctionne tres bien sous IE mais pas du tout sous firefox :(.


Commences par faire ce que je t'ai demandé


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 15-12-2006 à 22:35:51    

je vois aps ce que tu veux que je vire en html qui rend cela illisible, c'est avec el html que j'interragis et il n y a que le html avec lequel j'interagis qui est présent dans la page.
 
je vais restreindre, au pire des cas ca ne fonctionnera plus tout seul :/, la au moins je suis sur que tout passe.

Reply

Marsh Posté le 15-12-2006 à 22:39:04    

j'ai enleve 5 &nbsp, je pense pas que ca aille loin.
Je ne vais pas enlever de checkbox ou des entetes vu que ce sont des elements qui interagissent avec le JS.
 
le reste je ne préfère pas l'enlever si quelqu'un veut se rendre compte par lui meme.
 
Il est tjs plus simple de comprendre un comportement quand celui ci est testable plutot qu'une methode qui ne marche pas du tout non ?

Reply

Marsh Posté le 15-12-2006 à 23:00:05    

Je parle des tables, elles servent à rien [:petrus75]

 

Dans ton code HTML, la partie utile est au mieux

Code :
  1. <form>
  2.    <input type=text name="grp" value="TOTO">
  3.    <a href="#">Recherche</a>
  4.    <div id="allcheckbox">
  5.        <p><input type="checkbox" name="CB" value="Checkbox_1">Xavier</p>
  6.        <div id="Checkbox_1_Detail">
  7.            <p><input type="checkbox">TOTO</p>
  8.            <p><input type="checkbox">TITI</p>
  9.            <p><input type=button value="Annuler">&nbsp;<input type=button value="Valider"></p>
  10.        </div>
  11.        <input type="checkbox" name="CB" value="Checkbox_2">Nicolas<br>
  12.        <input type="checkbox" name="CB" value="TOTO_1">Joelle<br>
  13.        <input type="checkbox" name="CB" value="Checkbox_4">Eric<br>
  14.        <input type="checkbox" name="CB" value="TOTO_2">Seb<br>
  15.        <input type="checkbox" name="CB" value="Checkbox_6">Philippe<br>
  16.    </div>
  17.    <div id="allresult">
  18.    </div>
  19. </form>

Message cité 1 fois
Message édité par masklinn le 15-12-2006 à 23:00:50

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 15-12-2006 à 23:00:05   

Reply

Marsh Posté le 15-12-2006 à 23:04:27    

masklinn a écrit :

Je parle des tables, elles servent à rien [:petrus75]
 
Dans ton code HTML, la partie utile est au mieux

Code :
  1. <form>
  2.    <input type=text name="grp" value="TOTO">
  3.    <a href="#">Recherche</a>
  4.    <div id="allcheckbox">
  5.        <p><input type="checkbox" name="CB" value="Checkbox_1">Xavier</p>
  6.        <div id="Checkbox_1_Detail">
  7.            <p><input type="checkbox">TOTO</p>  
  8.            <p><input type="checkbox">TITI</p>  
  9.            <p><input type=button value="Annuler">&nbsp;<input type=button value="Valider"></p>
  10.        </div>
  11.        <input type="checkbox" name="CB" value="Checkbox_2">Nicolas<br>
  12.        <input type="checkbox" name="CB" value="TOTO_1">Joelle<br>
  13.        <input type="checkbox" name="CB" value="Checkbox_4">Eric<br>
  14.        <input type="checkbox" name="CB" value="TOTO_2">Seb<br>
  15.        <input type="checkbox" name="CB" value="Checkbox_6">Philippe<br>
  16.    </div>
  17.    <div id="allresult">
  18.    </div>
  19. </form>



ha :/, bein merci, bein moi je pensais pas que la mise en page était inutile pour que ce soit compréhensible, mais il manque une table avec une colonne une cellule pour pouvoir cliquer dans celle ci et faire apparaitre ou disparaitre un div.

Reply

Marsh Posté le 15-12-2006 à 23:07:45    

j'ai réduis, est ce plus convenable ?

Reply

Marsh Posté le 15-12-2006 à 23:18:14    

j'ai supprimé un div et une fonction, un pote a trouvé la solution, c etait le fait de emttre jscript et non pas javascript, maintenant les chckbox genernt des erreurs que ce soit sous ie ou firefox, mais cela fonctionne tout de meme sous ie, il me faut comprendre mon erreur.

Reply

Marsh Posté le 15-12-2006 à 23:37:50    

getobjectbyid et la methode pour savoir si l'on etait sur un vieuxnavigateur est degagee.

Reply

Marsh Posté le 15-12-2006 à 23:51:54    

c'est le document.all qui pose problème entre autres :'(.

Reply

Marsh Posté le 16-12-2006 à 00:42:37    

oui document.all est spécifique à Internet Explorer (et a été remplacé par document.getElementById), et il reste un appel à getObjectById


Message édité par masklinn le 16-12-2006 à 00:46:18

---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 16-12-2006 à 00:47:47    

Bien maintenant que le code HTML a été un peu nettoyé, que veux tu que le script fasse exactement?
 
J'ai cru comprendre que la "checkbox_1" avait pour but de faire apparaître ou disparaître le div correspondant, les checkboxes en dessous vont enabler/disabler l'input text?


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 16-12-2006 à 01:01:11    

Masklinn, j'ai presque tout corrigé :), il me manque la propriété disabled d'une balise pour firefox.
 
Ici je veux rendre un div disabled en checkant ou non un checkbox, enfin j'ai tout le code sauf ce disabled.
 
sous ie on fait mondiv.disabled="disabled" et ca passe sur firefox non.
 
Je vais updater le code.

Reply

Marsh Posté le 16-12-2006 à 01:21:36    

A priori rendre un div disabled sous mozilla ce n'est pas possible :(.

Reply

Marsh Posté le 16-12-2006 à 05:37:42    

regarde la j'ai posé une question similaire et on m'a donc conseillé de faire ce quetu veux, rendre visible ou non un div  
ici  
http://forum.hardware.fr/hfr/Progr [...] 9356_1.htm

Reply

Marsh Posté le 16-12-2006 à 06:12:04    

Clarkent a écrit :

A priori rendre un div disabled sous mozilla ce n'est pas possible :(.


Et puis ca n'aurait pas de sens

Reply

Marsh Posté le 16-12-2006 à 11:12:58    

rendre visible invisible, aucun souci ;), mais pour moi cela a uneautre signification dans l'interface :p.
mais je vais m'arranger.
 
en quoi ca n'aurait pas de sens ? rendre les choses simple et pratique ca n'a pas de sens ? Si mon conteneur est disabled tout son contenu l'est aussi.
Mais il reste la solution compliquer de chercher tous les composants qui nous interessent et les rendre disabled, et cela aurait plus de sens faut il avoir une nomenclature qui puisse le permettre.

Reply

Marsh Posté le 16-12-2006 à 12:29:06    

Clarkent a écrit :

en quoi ca n'aurait pas de sens ? rendre les choses simple et pratique ca n'a pas de sens ? Si mon conteneur est disabled tout son contenu l'est aussi.


C'est pas comme ça que ça marche, seuls les éléments de formulaires peuvent être "disabled" et le DIV est un conteneur générique, et même si ton idée a, d'une certaine manière (discutable), du sens, ce que tu désires faire n'est ni prévu ni permis par la norme.
 
De fait, même le conteneur spécifique des formulaires (le fieldset) ne peut à ma connaissance être "disabled".

Clarkent a écrit :

Mais il reste la solution compliquer de chercher tous les composants qui nous interessent et les rendre disabled


Elle n'a en l'occurence rien de compliqué, ça va chercher dans les 5 lignes de js.


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 16-12-2006 à 18:36:45    

masklinn a écrit :

C'est pas comme ça que ça marche, seuls les éléments de formulaires peuvent être "disabled" et le DIV est un conteneur générique, et même si ton idée a, d'une certaine manière (discutable), du sens, ce que tu désires faire n'est ni prévu ni permis par la norme.
 
De fait, même le conteneur spécifique des formulaires (le fieldset) ne peut à ma connaissance être "disabled".
 
Elle n'a en l'occurence rien de compliqué, ça va chercher dans les 5 lignes de js.


pour rendre disabled les elements qui sont dedans s'ils sont fixes.
 
ces elements sont créés dynamiquement il peut y en avoir de 1 a N, N n'étant pas borné et la nomenclature de ces N existe déjà, et rien ne permet de dissocié les 1 à N d'une checbox d'une autre.
 
Faut voir que d'un point de vu hiérarchique il peut y avoir 1 à X checkbox ayant la possibilite de desactivé chacune 1 à N checkbox.
 
En JS je le vois pas en 5 Lignes, enfin je vais peut etre tenté le coup en renommant tout ca différement, mais cela me parait assez peu faisable avec la nomenclature actuelle, mais je vais me débrouiller ;).

Reply

Marsh Posté le 16-12-2006 à 19:27:02    

Code :
  1. function checkfromthiselm(elm, containerId) {
  2. var checkcontainer = document.getElementById(containerId);
  3. var allinputs = checkcontainer .getElementsByTagName('input');
  4. for (var i=0; i<allinputs.length; i++) {
  5.   allinputs[i]=x.disabled = elm.checked ? '' : 'disabled';
  6. }
  7. }


En 5 lignes [:petrus75]


Message édité par gatsu35 le 16-12-2006 à 19:35:05
Reply

Marsh Posté le 16-12-2006 à 20:26:49    

Voila, et en un peu moins lisible on peut aussi écrire

Code :
  1. function disableInputsIfChecked(elm, formContainerId) {
  2.      var inputs = document.getElementById(formContainerId).getElementsByTagName('input');
  3.      for(var i=0,len=inputs.length; i<len; ++i)
  4.             inputs[i].disabled = elm.checked;
  5. }


Et si on se permet l'utilisation de fonctions d'aide on peu arriver à

Code :
  1. function disableInputsIfChecked(elm, formContainerId) {
  2.      var inputs = $(formContainerId).getElementsByTagName('input');
  3.      map(inputs, function(input) { input.disabled = elm.checked; });
  4. }


:o


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 16-12-2006 à 21:36:43    

Oui mais pour la deuxieme version on a un code totalement illisible et seul quelqu'un qui est warrior ou qui a l'esprit tordu peut reprendre le code :o

Reply

Marsh Posté le 16-12-2006 à 21:49:31    

J'vois pas ce que ça a d'illisible [:petrus dei]


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 16-12-2006 à 21:54:05    

Moi j'arrive à comprendre, mais c'est pas tous les jours qu'on passe des fonctions en paramètre :o, et j'en connais qui pigerai pas ton code :/
 
Mais j'admet que c'est lisible là

Reply

Marsh Posté le 16-12-2006 à 22:10:41    

gatsu35 a écrit :

mais c'est pas tous les jours qu'on passe des fonctions en paramètre :o


Ca dépend qui, je fais ça en permanence perso :o


---------------
Stick a parrot in a Call of Duty lobby, and you're gonna get a racist parrot. — Cody
Reply

Marsh Posté le 17-12-2006 à 01:46:54    

je ne pensais pas une seconde qu'on pouvait avoir les elements d'un contenu dans un autre. Je ne pensaispas qu'on pouvait faire ca en html, je croyais meme avoir lu qu'on ne le pouvait pas, j'ai du mal comprendre, car vu que document c'est le container et qu'on y arrive y a pas de raison qu'on ne puisse pas :D.
 
Et bien merci, c'est vraiment sympa, j'ai appris un truc ou plutot corriger une grosse connerie que j'avais a l'esprit :D.

Reply

Marsh Posté le 17-12-2006 à 02:49:48    

masklinn a écrit :

Voila, et en un peu moins lisible on peut aussi écrire

Code :
  1. function disableInputsIfChecked(elm, formContainerId) {
  2.      var inputs = document.getElementById(formContainerId).getElementsByTagName('input');
  3.      for(var i=0,len=inputs.length; i<len; ++i)
  4.             inputs[i].disabled = elm.checked;
  5. }


Et si on se permet l'utilisation de fonctions d'aide on peu arriver à

Code :
  1. function disableInputsIfChecked(elm, formContainerId) {
  2.      var inputs = $(formContainerId).getElementsByTagName('input');
  3.      map(inputs, function(input) { input.disabled = elm.checked; });
  4. }


:o


je ne comprends pas du tout ta deuxieme methode, que fait le $ ainsi que la fonction map ?

Reply

Marsh Posté le 17-12-2006 à 10:35:49    

$ est un raccourci pour getElementById, tu lui passes une string ou une ref d'un élément et dans tout les cas il te retourne l'élément ou null s'il n'existe pas

Code :
  1. function $(obj) {
  2. if(typeof obj == "string" ) {
  3.  return document.getElementById(obj);
  4. } else {
  5.  return obj;
  6. }
  7. }


 
map est une fonction de filtrage qui execute au passage une fonction passée en parametre

Code :
  1. function map(arr, fun) {
  2. var out = [];
  3. for(var i=0; i<arr.length; ++i) {
  4.  out.push(fun(arr[i]));
  5. }
  6. return out;
  7. }

Reply

Marsh Posté le 17-12-2006 à 14:52:58    

merci.
excellent :D, je vais commencer a aimer ca le JS :D.

Reply

Marsh Posté le    

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed