Dans une fonction j'ai:J'aimerais en plus de td que la fonction gère la balise divCode:boutonElements=document.getElementsByTagName('td')
Comment faire pour la rajouter :? ?
Merci d'avance pour votre réponse :) !
Version imprimable
Dans une fonction j'ai:J'aimerais en plus de td que la fonction gère la balise divCode:boutonElements=document.getElementsByTagName('td')
Comment faire pour la rajouter :? ?
Merci d'avance pour votre réponse :) !
Aucune idée :? ?
tu fais un merge des deux appels ('div') et ('td') et tu traites le tableau de maniere transparente... :)
Ou là :oops: ...
ça veut dire quoi tout ça :( ?
çà s'écrit comment en JavaScript :? ?
Je sais pas si il y a plus léger :
Code:
1
2
3
4
5
6
7
8 function getDivOrTd() { divs = document.getElementsByTagName('div'); tds = document.getElementsByTagName('td'); for(i = 0 ; i < tds.length ; i++) { divs[divs.length] = tds[i]; } return divs; }
Intéressant :P !
Et comment puis-je faire pour que ça s'intègre à ce script externe :o ?
Avec la prise en charge de td ou div :) ?Code:
1
2
3
4
5
6
7
8
9
10
11
12 function bordure(bouton) { boutonElements=document.getElementsByTagName('td') for (b=0;b<boutonElements.length;b++){ if(boutonElements[b].className==bouton){ boutonElements[b].onmousedown=function(){this.style.borderStyle='inset';} //Activé boutonElements[b].onmouseup=function(){this.style.borderStyle='outset';} //Relaché boutonElements[b].onmouseout=function(){this.style.borderStyle='outset';} //Hors zone } } } window.onload = function(){bordure('bouton')};
J'ai essayé de l'inclure comme-çà, mais ça ne fonctionne pas :oops: ...Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24 function bordure(bouton) { { divs = document.getElementsByTagName('div'); tds = document.getElementsByTagName('td'); for(b = 0 ; b < tds.length ; b++) { divs[divs.length] = tds[b]; } return divs; } { if(divs[b].className==bouton){ divs[b].onmousedown=function(){this.style.borderStyle='inset';} //Activé divs[b].onmouseup=function(){this.style.borderStyle='outset';} //Relaché divs[b].onmouseout=function(){this.style.borderStyle='outset';} //Hors zone } if(tds[b].className==bouton){ tds[b].onmousedown=function(){this.style.borderStyle='inset';} //Activé tds[b].onmouseup=function(){this.style.borderStyle='outset';} //Relaché tds[b].onmouseout=function(){this.style.borderStyle='outset';} //Hors zone } } } window.onload = function(){bordure('bouton')};
8O
:roll:Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 function getDivOrTd() { divs = document.getElementsByTagName('div'); tds = document.getElementsByTagName('td'); for(i = 0 ; i < tds.length ; i++) { divs[divs.length] = tds[i]; } return divs; } function bordure(bouton) { boutonElements = getDivOrTd(); for (b=0;b<boutonElements.length;b++){ if(boutonElements[b].className==bouton){ boutonElements[b].onmousedown=function(){this.style.borderStyle='inset';} //Activé boutonElements[b].onmouseup=function(){this.style.borderStyle='outset';} //Relaché boutonElements[b].onmouseout=function(){this.style.borderStyle='outset';} //Hors zone } } } window.onload = function(){bordure('bouton')};
Ça fonctionne qu'avec div mais ça avance :) ....
faudrait-il mettre un return tds; aussi :o ?
Au temps pour moi, je n'avais pas testé avant de fournir le code. L'erreur venait de getElementsByTagName qui retourne une collection et pas un array et je ne sais pas comment ajouter un element à une collection. Du coup je passe par un tableau intermédiaire. Essaie le code suivant :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37 <div id="div_1">ggg</div> <table> <tbody> <tr><td id="td_1">ggg</td></tr> <tr><td id="td_2">ggg</td></tr> <tr><td id="td_3">ggg</td></tr> </tbody> </table> <div id="div_2">ggg</div> <div id="debug" style="border:1px solid red"> <script type="text/javascript"> function getDivOrTd() { ret = new Array; divs = document.getElementsByTagName('div'); for(i = 0 ; i < divs.length ; i++) { ret[ret.length] = divs.item(i); } tds = document.getElementsByTagName('td'); for(i = 0 ; i < tds.length ; i++) { ret[ret.length] = tds.item(i); } return ret; } document.open(); els = getDivOrTd(); for (i = 0 ; i < els.length ; i++) { document.write(els[i]+" : "+els[i].id+"<br>"); } document.close(); </script> </div>
Ca ne fonctionne pas dans mon *.js
Voilà le html dans ma page
J'ai besoin de l'id pour les positionement :? ....Code:<div id="gauche" class="bouton"><a href="index.php">DIV à Gauche</a></div><br />
Je peut pas plutôt utiliser class :( ?
l'id c'est juste pour l'exemple ! pas besoin d'id pour la fonction.
J'ai écris comme ça en mettant class à la place d'id et en mettant ' à la place de " :oops: ...Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26 function getDivOrTd() { ret = new Array; divs = document.getElementsByTagName('div'); for(i = 0 ; i < divs.length ; i++) {ret[ret.length] = divs.item(i);} tds = document.getElementsByTagName('td'); for(i = 0 ; i < tds.length ; i++) {ret[ret.length] = tds.item(i);} return ret; } document.open(); els = getDivOrTd(); for (i = 0 ; i < els.length ; i++) {document.write(els[i]+' : '+els[i].class+'<br>'); } document.close(); function bordure(bouton) { boutonElements=document.getElementsByTagName('td') for (b=0;b<boutonElements.length;b++){ if(boutonElements[b].className==bouton){ boutonElements[b].onmousedown=function(){this.style.borderStyle='inset';} //Activé boutonElements[b].onmouseup=function(){this.style.borderStyle='outset';} //Relaché boutonElements[b].onmouseout=function(){this.style.borderStyle='outset';} //Hors zone } } } window.onload = function(){bordure('bouton')};
Mais ça ne fonctionne toujours pas :? ...
Relis mieux ce que je t'ai proposé et utilise en vrai éditeur qui te permette de savoir où se termine une accolade ouvrante... 8O
J'ai essayé tel quel ce que tu ma proposé, tu ma dit essaye ça:Citation:
Envoyé par Mr N.
Donc j'ai collé ce code au millieu d'une page d'exemple :roll: ....Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37 <div id="div_1">ggg</div> <table> <tbody> <tr><td id="td_1">ggg</td></tr> <tr><td id="td_2">ggg</td></tr> <tr><td id="td_3">ggg</td></tr> </tbody> </table> <div id="div_2">ggg</div> <div id="debug" style="border:1px solid red"> <script type="text/javascript"> function getDivOrTd() { ret = new Array; divs = document.getElementsByTagName('div'); for(i = 0 ; i < divs.length ; i++) { ret[ret.length] = divs.item(i); } tds = document.getElementsByTagName('td'); for(i = 0 ; i < tds.length ; i++) { ret[ret.length] = tds.item(i); } return ret; } document.open(); els = getDivOrTd(); for (i = 0 ; i < els.length ; i++) { document.write(els[i]+" : "+els[i].id+"<br>"); } document.close(); </script> </div>
Et du coup ma page affiche çà 8O !? :
Je fait quoi avec le résultat obtenu :? ???Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28 ggg ggg ggg ggg ggg [object] : cadrepage [object] : div_1 [object] : div_2 [object] : debug [object] : [object] : [object] : [object] : [object] : [object] : [object] : [object] : [object] : [object] : [object] : [object] : [object] : [object] : [object] : [object] : td_1 [object] : td_2 [object] : td_3
J'ai utilisé Dreamweaver UltraEdit et NotePad2. Et à part dans NotePad2Citation:
Envoyé par Mr N.
qui affiche en rouge la fin ou le début d'une accolade séléctionné, je n'ai vue
aucune fonction de vérification d'accolade :? ...
J'ai vérifié manuellement, tout les accollades de fin ont une de début dans
ma fonction bordure, puisquelle fonctionne :) !
De toutes façons je crois que je n'ais pas postés la question dans le bon sens…
J'ai donc reformulée ma demande dans un autre poste qui correspond plus
Précisément à ma demande :oops: ...
http://www.developpez.net/forums/viewtopic.php?t=412960
Encore merci pour ta patience :o !
===================================================
Entre temps j'ai eu la solution sur un autre forum...
Il suffit simplement de répéter le contenu de la fonction avec ses accolades,
en modifiant la valeur du TagName à chaque fois. La fonction effectue alors
autant d'opérations qu'il à d'attributs :wink: !
*.css*.jsCode:
1
2 .bouton { background:#FAEA92 url(bgbtyr.jpg); border:4px outset; color:#FFFFFF; } td.bouton,a.bouton { padding:1px; border-color:white; }
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29 function bordure(bouton) { boutonElements=document.getElementsByTagName('td') for (b=0;b<boutonElements.length;b++){ if(boutonElements[b].className==bouton){ boutonElements[b].onmousedown=function(){this.style.borderStyle='inset';} //Activé boutonElements[b].onmouseup=function(){this.style.borderStyle='outset';} //Relaché boutonElements[b].onmouseout=function(){this.style.borderStyle='outset';} //Hors zone } } boutonElements=document.getElementsByTagName('div') for (b=0;b<boutonElements.length;b++){ if(boutonElements[b].className==bouton){ boutonElements[b].onmousedown=function(){this.style.borderStyle='inset';} //Activé boutonElements[b].onmouseup=function(){this.style.borderStyle='outset';} //Relaché boutonElements[b].onmouseout=function(){this.style.borderStyle='outset';} //Hors zone } } boutonElements=document.getElementsByTagName('a') for (b=0;b<boutonElements.length;b++){ if(boutonElements[b].className==bouton){ boutonElements[b].onmousedown=function(){this.style.borderStyle='inset';} //Activé boutonElements[b].onmouseup=function(){this.style.borderStyle='outset';} //Relaché boutonElements[b].onmouseout=function(){this.style.borderStyle='outset';} //Hors zone } } } window.onload = function(){bordure('bouton')};
Le principe consiste à rendre utilisable la fonction bordure Inset pour lesCode:
1
2
3
4
5
6
7
8
9 <table> <tr> <td class="bouton"><a href="index.php">Acceuil</a></td> </tr> </table> <div class="bouton"><a href="index.php">Acceuil</a></div> <a class="bouton" href="index.php">Acceuil</a>
version d'Internet Explorer ne supportant pas les style css hover
et active avec a, div et td :) !
Merci à PRoGRaFLaSH
Problème Résolu donc :o !
Duplication de code => :vomi:
C'est qui ces programmeurs de mes deux qui te conseillent de dupliquer ton code 8O :furax:
Merci Majesté, je sais où ne pas aller quand j'ai un problême :twisted:
Si il faut te macher le boulot =>
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31 function getDivOrTd() { ret = new Array; divs = document.getElementsByTagName('div'); for(i = 0 ; i < divs.length ; i++) { ret[ret.length] = divs.item(i); } tds = document.getElementsByTagName('td'); for(i = 0 ; i < tds.length ; i++) { ret[ret.length] = tds.item(i); } return ret; } function bordure(bouton) { boutonElements=getDivOrTd(); for (b=0;b<boutonElements.length;b++){ if(boutonElements[b].className==bouton){ boutonElements[b].onmousedown=function(){this.style.borderStyle='inset';} //Activé boutonElements[b].onmouseup=function(){this.style.borderStyle='outset';} //Relaché boutonElements[b].onmouseout=function(){this.style.borderStyle='outset';} //Hors zone } } } window.onload = function(){bordure('bouton')};
Wow! merci Mr Super N. :bravo: !Citation:
Envoyé par Mr N.
Voilà une solution qui à encore plus de gueule :P !
Et si je veux rajouter la gestion de <a> :) !Splendide :D !Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35 function getTdOrDivOrA() { ret = new Array; tds = document.getElementsByTagName('td'); for(i = 0 ; i < tds.length ; i++) { ret[ret.length] = tds.item(i); } divs = document.getElementsByTagName('div'); for(i = 0 ; i < divs.length ; i++) { ret[ret.length] = divs.item(i); } as = document.getElementsByTagName('a'); for(i = 0 ; i < as.length ; i++) { ret[ret.length] = as.item(i); } return ret; } function bordure(bouton) { boutonElements=getTdOrDivOrA(); for (b=0;b<boutonElements.length;b++){ if(boutonElements[b].className==bouton){ boutonElements[b].onmousedown=function(){this.style.borderStyle='inset';} //Activé boutonElements[b].onmouseup=function(){this.style.borderStyle='outset';} //Relaché boutonElements[b].onmouseout=function(){this.style.borderStyle='outset';} //Hors zone } } } window.onload = function(){bordure('bouton')};
Au final quel est la solution la plus rapide/stable lors de la navigation :o ?
La tienne qui utilise 2 fonctions :) ?
Ou celle de PRoGRaFLaSH qui lance 3 Operations dans 1 fonction :? ?
Tu oublie un critère : maintenable !Citation:
Envoyé par Lareine
Imagine que finalement le traitement appliqué à la bordure n'est plus le meme (changement de souleur, pointillé, grosseur, ...) Et bien dans un cas tu devras modifier trois ligne de code, alors que dans l'autre qu'une seule... Je te laisse deviner quel est le code le plus maintenable 8)
Pour la rapidité, je pense que dupliquer le code sera plus rapide, mais bon... L'ère des 486Mhz est révolue :lol:
vu que les questions de maintenance m'intéressent aussi, je prends la liberté de proposer mon grain de sel:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21 <script type="text/javascript"> var n = document.getElementsByTagName("*"); function actif(){ this.style.borderStyle="inset"; } function inactif(){ this.style.borderStyle="outset"; } for(i=0;i != n.length;i++){ if(n[i].className=="bouton"){ n[i].onmousedown=actif; n[i].onmouseup=inactif n[i].onmouseout=inactif } } </script>
Pas trop problèmatique en soit, puisque le style par defaut est définit dansCitation:
Envoyé par Mr N.
le *.css: Couleur de fond, Image de fond, Épaisseur de la bordure, Style de la
bordure par défaut (Outset), Couleur de la bordure :o ...
*.cssCode:.bouton { background:#FAEA92 url(bgbtyr.jpg); border:4px outset; color:#FFFFFF; }
Si je décide (chose peut probable) de changer les valeurs Inset/Outset, le tientCitation:
Envoyé par Mr N.
bien sûr :) !
Merci de ta franchise. J'ai un Celeron 1.2Ghz, mon autre PC est un PII 400MhzCitation:
Envoyé par Mr N.
et d'autres personnes de mon entourage surfe sur le web avec des machines
encore moins puissantes. Donc ça n'est pas si futile que ça de penser à optimiser
le code pour les utilisateurs qui ont des machines peu puissantes. Dans l'absolu,
ta fonction est plus classieuse, et peut aussi s'appliquer à d'autres fonctions
demandant la gestion de plusieurs attributs :wink: !
C'était un exemple parmi tant d'autres...Citation:
Envoyé par Lareine
N'importe quel traitement supplémentaire quelqu'il soit devra être dupliqué trois fois. L'expérience me montre que les copier-coller abusifs sont une vraie plaie dans la vie d'un developpeur...
Sinon conernant les 486, je me suis fourré dedans ! Je voulais parler des modèles 486, genre 486 SX25... Qui tournaient à... 25 Mhz. Au temps pour moi.
Ouf! Tu fais bien de préciser :P !Citation:
Envoyé par Mr N.
J'allais prendre de mauvaises habitudes dans mon code, en pensant bien faire
pour la rapidité de navigations des mes visiteurs les moins bien équipés :oops: ...
Interessant :o !Citation:
Envoyé par javatwister
Mais la tu utilise deux fonctions :? ....
Comment fais-tu pour déclarer actif et inactif dans:
si tu l'utilise dans un *.js :o ?Code:
1
2 } window.onload = function(){?nom?de?fonction?()};
Et ta ligne
Ça veut bien dire que ça capture toutes les balises de la page :? ?Code:var n = document.getElementsByTagName("*");
Ça ne risque t'il pas de pomper des ressources inutilement :? ???
oui, j'utilise 2 fonctions... et non 4, comme toi!
j'évite de recopier des routines, c'est tout! donc, une seule boucle pour récupérer les balises à activer, quel que soit leur type; et une seule fonction pour les événements mouseup et mouseout;
le résultat n'est que 2 fois moins long, c'est sûr :roll:
pour le lancement, aucun problème si tu places le script en fin de page! (.js ou pas);
si tu es une fana du window.onload, inclus l'ensemble du code dans une fonction! ça ne change rien;
Donc:ou avec mon code de départ à peine plus long :) ... :Code:
1
2
3
4
5
6
7
8
9
10
11
12
13 var n = document.getElementsByTagName('*'); function bordure(bouton){ for(i=0;i != n.length;i++){ if(n[i].className=='bouton'){ n[i].onmousedown=function(){this.style.borderStyle='inset';} //Activé n[i].onmouseup=function(){this.style.borderStyle='outset';} //Relaché n[i].onmouseout=function(){this.style.borderStyle='outset';} //Hors zone } } } window.onload = function(){bordure('bouton')};
La question que je me pose, quel sont les dés/avantages du sélecteur universel ('*')Code:
1
2
3
4
5
6
7
8
9
10
11
12 function bordure(bouton) { boutons=document.getElementsByTagName('*') for(b=0;b<boutons.length;b++){ if(boutons[b].className==bouton){ boutons[b].onmousedown=function(){this.style.borderStyle='inset';} //Activé boutons[b].onmouseup=function(){this.style.borderStyle='outset';} //Relaché boutons[b].onmouseout=function(){this.style.borderStyle='outset';} //Hors zone } } } window.onload = function(){bordure('bouton')};
par rapport à la fonction de Mr N. en terme de charge processeur :? ???
fais des tests :lol:Citation:
La question que je me pose, quel sont les dés/avantages du sélecteur universel ('*')
par rapport à la fonction de Mr N. en terme de charge processeur ???
Petit canaillou :lol: ! Tu n'en sais rien non plus :o !?Citation:
Envoyé par javatwister
De mon coté je n'ais pas vue de différence notable, à part le faite que du
coup je peut utiliser la fonction pour quasiment n'importe quel balise:
<table> <td> <div> <a> <img> <p> etc :lol: ....
M'amuse comme une tite folle avec ce nouveau joujou * :lefou: !
Bravo javatwister :bravo: !
Quelle idée de génie d'utiliser le sélecteur universel :D !
Ça roule Impec sous IE, Opera et Firefox. Jespère juste qu'il n'y à aucun
soucis de compatibilité avec d'autres navigateur :P !?
tu pourras pas avec IE 5.5; mais bon, on s'en fout hein!
pour tester, amuse-toi (mais c'est plutôt prise de tête) à évaluer le temps de traitement en plaçant 2 repères new date(), l'un en tête de fonction et l'autre à la fin;
une petite soustraction te donnera grosso modo la réponse pour ton système / ton navigateur;
et prends soin de charger au maximum la page avec des centaines de balises inutiles, sinon c'est pas drôle !
Oui et Non :? ! C'est possible qu'un visiteur surf avec la versionCitation:
Envoyé par javatwister
5.5 d'Internet Explorer à l'heure actuel :? ?!
Ok! Vais essayer çà :) !Citation:
Envoyé par javatwister