DOM ... je seche !

DOM ... je seche ! - HTML/CSS - Programmation

Marsh Posté le 24-03-2005 à 16:02:12    

bon j'arrete pas de lire des docs sur le DOM et "comment séparer le contenu de la forme" (etc etc) pour etre aux normes XHTML etc etc... blabla bla...
 
j'ai compris qu'il faut utiliser des addeventlistener ou des attachevents pour "capter" les evenements qui interviennent dans la page, j'ai compris qu'il faut "boucler" sur chaque élément de la page pour tester si l'evenement correspond avec l'objet dans la page...
 
... mais j'y arrive po !! :lol:
 
c'est dingue non ?  
 
 :pt1cable:

Reply

Marsh Posté le 24-03-2005 à 16:02:12   

Reply

Marsh Posté le 24-03-2005 à 16:03:30    

trop ouf

Reply

Marsh Posté le 24-03-2005 à 16:03:53    

Ouais, dingue

Reply

Marsh Posté le 24-03-2005 à 16:09:13    

... en fait c toujours mes histoires de parametres que j'arrive pas à faire passer... bef je vais fouiller encore un peu je pense

Reply

Marsh Posté le 24-03-2005 à 16:12:16    

ok, tiens nous au courant surtout ;)

Reply

Marsh Posté le 24-03-2005 à 16:19:05    

dites... ça vous arrive parfois d'avoir une tete² en sortant du taff ???

Reply

Marsh Posté le 24-03-2005 à 16:30:43    

toujours

Reply

Marsh Posté le 24-03-2005 à 16:31:10    

Au début oui, mais maintenant, je crois que je me suis fait complement bouffé par le systeme  :)

Reply

Marsh Posté le 24-03-2005 à 16:33:33    

quand tu parles de séparer le contenu, la présentation et le comportement, tu veux dire mettre juste un lien vers un script en haut de page, ne mettre aucun onclick ou quoi que ce soit, et que ça marche ?

Reply

Marsh Posté le 24-03-2005 à 16:36:05    

oui voila c un truc comme ça ! :) !
 
avec des trucs genre :
 
if (window.addEventListener) window.addEventListener("click",ActionColor,false);
  else if (window.attachEvent) window.attachEvent("click",ActionColor);
 
ma fonction actioncolor est en stade embryonnaire raté genre :
 

Code :
  1. function ActionColor(couleur,nom,div,input)
  2.   {
  3.    var coul = document.getElementById(''+div+'').cloneNode(true);
  4.    var listitems = coul.getElementsByTagName('li');
  5.    alert(listitems);
  6.    for (i=0;i<listitems.length;i++)
  7. {
  8.  
  9.     if(listitems[i].id) listitems[i].id = listitems[i].id;
  10. }
  11.  document.getElementById(''+input+'').appendChild(coul);
  12. alert(coul);
  13. //document.getElementById(input).value = couleur;
  14. el = document.getElementById(nom);
  15. el.style.backgroundColor=""+couleur+"";
  17. toggleDisplay(div);
  18. }


 
Le probleme c qu'il se passe absolument rien ! :lol: même mest alert() ne s'affichent pas !


Message édité par freed102 le 24-03-2005 à 16:40:20
Reply

Marsh Posté le 24-03-2005 à 16:36:05   

Reply

Marsh Posté le 24-03-2005 à 16:49:54    

hum, honnetement, je ne connais pas les eventlistener, mais je pense que tu te compliques la vie pour rien.
 
En faisant, au chargement de la page, une boucle qui vérifie tous les liens avec class="popup" par exemple, pour leur mettre un onclick pour ouvrir une popup :
 

Code :
  1. function tousLesLiensPopupEnPopup() {
  2.   // je ne sais plus comment retrouver le nombre de liens avec classe popup, c'est quelque chose avec getElementByClassName je crois, enfin, ca doit se trouver pas trop difficilement. Ensuite tu les mets dans un tableau, par exemple liensPopup
  3.   for (i=0;i<liensPopup.length;i++) {
  4.     liensPopup[i].onclick = "fonctionQuiOuvreUnePopup(this.href); return false;";
  5.   }
  6. }
  7. window.onload=tousLesLiensPopupEnPopup;


 
Voilà, c'est une fonction très certainement fausse, mais c'est dans l'idée (chez moi j'avais fait un truc dans le genre qui marche, je te filerais le code si ca t'intéresse)

Reply

Marsh Posté le 24-03-2005 à 18:06:06    

ouai ça peut etre une idée mais ce que j'arrive pas à faire c'est recuperer la valeur de l'objet cliqué !
 

Code :
  1. function addEvent(obj,evType,fn,capt) // ajoute un événement sans écraser l'éxistant.
  2. {
  3.  if(obj.addEventListener)
  4.  {
  5.  obj.addEventListener(evType,fn,capt);return true;// NS6+
  6.  }
  7.  else if(obj.attachEvent)
  8.  {
  9.  obj.attachEvent("on"+evType,fn); // IE 5+
  10.  }
  11.  else
  12.  {
  13.  return false;
  14.  }
  15. }
  19. function initColor()
  20. {
  21. D=document;
  22. var listitems = document.getElementsByTagName('li');
  23.    alert(listitems.id);
  24.    for (i=0;i<listitems.length;i++)
  25. {
  26.  
  27.     if(listitems[i].id)
  28. {
  29. listitems[i].id = listitems.id;
  30. alert(i);
  31. }
  32. }
  34. addEvent(listitems[i],"click",ActionColor);
  35. }


Message édité par freed102 le 24-03-2005 à 18:08:37
Reply

Marsh Posté le 24-03-2005 à 19:51:28    

finalement monsieur cosmoschtroumpt, j'ai suivi ton exemple ! j'ai melé ça un peu avec ma methode... et ça m'emmene quelquepart... c'est bon signe ! je sais pas si c "correct"... en tous cas ça a l'air de marcher !
 

Code :
  1. function list_items()
  2. {
  3. var list=document.getElementsByTagName('li');
  4.   for (i=0;i<list.length;i++)
  5.   {
  6.     list[i].onclick = function(){
  7. alert(this.id);
  8. }
  9.   }
  10. }
  11. addEvent(window,"load",list_items) ;
  14. function addEvent(obj,evType,fn,capt) // ajoute un événement sans écraser l'éxistant.
  15. {
  16.  if(obj.addEventListener)
  17.  {
  18.  obj.addEventListener(evType,fn,capt);// NS6+
  19.  return true;
  20.  }
  21.  else if(obj.attachEvent)
  22.  {
  23.  obj.attachEvent("on"+evType,fn); // IE 5+
  24.  }
  25.  else
  26.  {
  27.  return false;
  28.  }
  29. }

Reply

Marsh Posté le 24-03-2005 à 20:26:39    

alors comme je suis un ouf malade, je te mets le code que j'ai fait pour ma page perso à moi tout seul (oui parce qu'elle est même pas en ligne). Je m'étais même déchiré à mettre plein de commentaires partout pour me la péter en filant le code.
Y'a moyen de gravement l'optimiser mais je me suis pas penché dessus plus que ça une fois arrivé à ce stade.
 
 

Code :
  1. /******************************************
  2. * MENU A DEUX NIVEAUX                    *
  3. ******************************************
  4. * Auteur : Thomas Broust                 *
  5. * Homepage : http://cosmo0.free.fr/      *
  6. ******************************************
  7. * Gère un menu à deux niveaux qui        *
  8. * fonctionne par clic sur les éléments,  *
  9. * et non par survol. Cependant il est    *
  10. * très facile de changer les clics en    *
  11. * survols, il suffit de remplacer les    *
  12. * onclick en onmouseover.                *
  13. * Ce menu a été testé sur Firefox 1.0 et *
  14. * IE 6 SP1 et fonctionne parfaitement.   *
  15. ******************************************
  16. * Le menu doit avoir la syntaxe suivante *
  17. *                                        *
  18. * <a href="#" id="lienmenu1">menu 1</a>  *
  19. * <div id="menu1">                       *
  20. *   contenu du menu                      *
  21. * </div>                                 *
  22. *                                        *
  23. * Evidemment, n'importe quelles balises  *
  24. * conviennent, du moment qu'elles ont les*
  25. * bon IDs.                               *
  26. ******************************************
  27. * Pour marcher, modifier la variable     *
  28. * nbMenus en le nombre de menus.         *
  29. *****************************************/
  32. /******************************************
  33. * INITIALISATION DES VARIABLES           *
  34. *****************************************/
  37. // Modifier cette variable en fonction du
  38. // nombre de menus de votre page.
  39. var nbMenus = 3;
  41. for (i=1 ; i<=nbMenus ; i++) {
  42. eval("var listeAffichee" + i + ";" );
  43. }
  46. /******************************************
  47. * INITIALISER()                          *
  48. ******************************************
  49. * Appelée lors du chargement de la page, *
  50. * cette fonction a pour but de cacher les*
  51. * sous-menus, et d'activer les "onclick" *
  52. * des liens                              *
  53. *****************************************/
  55. function initialiser() {
  56. toutCacher();
  57. initLiens();
  58. }
  60. /******************************************
  61. * INITLIENS()                            *
  62. ******************************************
  63. * Affecte les comportements sur les      *
  64. * "onclick" des liens des menus          *
  65. *****************************************/
  67. function initLiens() {
  68. for(i=1 ; i<=nbMenus ; i++) {
  69.  document.getElementById("lienmenu" + i).numero = i;
  70.  document.getElementById("lienmenu" + i).onclick = function() {
  71.   afficherMenu(this.numero);
  72.  };
  73. }
  74. }
  76. /******************************************
  77. * TOUTCACHER()                           *
  78. ******************************************
  79. * Masque tous les menus et sous-menus    *
  80. *****************************************/
  82. function toutCacher() {
  83. for (i=1 ; i<=nbMenus ; i++) {
  84.  document.getElementById("menu" + i).style.display = "none";
  85.  eval("listeAffichee" + i + " = false;" );
  86. }
  87. }
  89. /******************************************
  90. * AFFICHERMENU(i)                        *
  91. ******************************************
  92. * Affiche les menus et sous-menus "i"    *
  93. * lors du clic sur les liens             *
  94. *****************************************/
  96. function afficherMenu(id) {
  97. if (eval("listeAffichee" + id)) {
  98.  document.getElementById("menu" + id).style.display = "none";
  99.  eval("listeAffichee" + id + " = false" );
  100. } else {
  101.  document.getElementById("menu" + id).style.display = "block";
  102.  eval("listeAffichee" + id + " = true" );
  103. }
  104. }
  106. window.onload=initialiser;

Reply

Marsh Posté le 06-04-2005 à 16:17:55    

vous y croyez à ça??? j'y suis arrivé !!!
d'une methode un peu bidouille j'ai l'impression (certes !!!) mais ça marche !!!! :lol:
 
look at my code :
 

Code :
  1. function list_items()
  2. {
  3. var list=document.getElementsByTagName('li');
  4.   for (i=0;i<list.length;i++)
  5.   { 
  6.     list[i].onclick = function(){
  7. var coul=this.id;
  8. var nom=this.parentNode.parentNode.parentNode.parentNode.parentNode.id;
  9. var nom2=nom.replace("div","" );
  10. var div=this.parentNode.parentNode.parentNode.id;
  11. var parentinputid=this.parentNode.parentNode.parentNode.id;
  12. var inputid="couleur"+nom2;
  13. nom=inputid+"1";
  14. ActionColor(coul,nom,div,inputid);
  15. return false;
  16. }
  17.   }
  18. }
  19. addEvent(window,"load",list_items) ;
  21. function ActionColor(couleur,nom,div,input)
  22.   {
  23.  document.getElementById(''+input+'');
  24. document.getElementById(input).value = couleur;
  25. el = document.getElementById(nom);
  26. el.style.backgroundColor=""+couleur+"";
  27. toggleDisplay(div);
  28. }


 
... truc de ouf !

Reply

Marsh Posté le 06-04-2005 à 16:20:00    

le probleme maintenant c'est que si je clique sur une "li" qui n'est pas une couleur.. ça provoque une erreur javascript ! lol ! :lol:
 
...de plus cela n'a pas l'air de fonctionner sur firefox :
 
el = document.getElementById(nom);  
el.style.backgroundColor=couleur;  


Message édité par freed102 le 06-04-2005 à 16:28:31
Reply

Sujets relatifs:

Leave a Replay

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