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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  DOM ... je seche !

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

DOM ... je seche !

n°1023562
freed102
Arayashiki
Posté le 24-03-2005 à 16:02:12  profilanswer
 

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:

mood
Publicité
Posté le 24-03-2005 à 16:02:12  profilanswer
 

n°1023564
rompi
Posté le 24-03-2005 à 16:03:30  profilanswer
 

trop ouf

n°1023565
FlorentG
Posté le 24-03-2005 à 16:03:53  profilanswer
 

Ouais, dingue

n°1023569
freed102
Arayashiki
Posté le 24-03-2005 à 16:09:13  profilanswer
 

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

n°1023577
esrevni
à contrario
Posté le 24-03-2005 à 16:12:16  profilanswer
 

ok, tiens nous au courant surtout ;)

n°1023585
freed102
Arayashiki
Posté le 24-03-2005 à 16:19:05  profilanswer
 

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

n°1023592
cosmoschtr​oumpf
dawa powered
Posté le 24-03-2005 à 16:30:43  profilanswer
 

toujours

n°1023594
esrevni
à contrario
Posté le 24-03-2005 à 16:31:10  profilanswer
 

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

n°1023596
cosmoschtr​oumpf
dawa powered
Posté le 24-03-2005 à 16:33:33  profilanswer
 

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 ?

n°1023599
freed102
Arayashiki
Posté le 24-03-2005 à 16:36:05  profilanswer
 

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
mood
Publicité
Posté le 24-03-2005 à 16:36:05  profilanswer
 

n°1023618
cosmoschtr​oumpf
dawa powered
Posté le 24-03-2005 à 16:49:54  profilanswer
 

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)

n°1023871
freed102
Arayashiki
Posté le 24-03-2005 à 18:06:06  profilanswer
 

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
n°1024074
freed102
Arayashiki
Posté le 24-03-2005 à 19:51:28  profilanswer
 

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

n°1024105
cosmoschtr​oumpf
dawa powered
Posté le 24-03-2005 à 20:26:39  profilanswer
 

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;

n°1037689
freed102
Arayashiki
Posté le 06-04-2005 à 16:17:55  profilanswer
 

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 !

n°1037694
freed102
Arayashiki
Posté le 06-04-2005 à 16:20:00  profilanswer
 

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

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

  DOM ... je seche !

 

Sujets relatifs
Comment faire des liens avec la DOM ?DOM addEventListener
DOM et screen.width / screen.heightMettre une image de fond derriere un tableau DOM
[DOM/XML/PHP] & dans texte = erreur de parsingPetit script utilisant DOM
[DOM/JavaScript] Traiter les tableaux d'éléments de form?Implementations de XPath et DOM
documentations DOMDOM pour firefox et ie6
Plus de sujets relatifs à : DOM ... je seche !

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

Copyright © 1997-2025 Groupe LDLC (Signaler un contenu illicite / Données personnelles)