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

  FORUM HardWare.fr
  Programmation
  HTML/CSS

  Menu Dynamique JavaScript & Algorithme [Résolu]

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

Menu Dynamique JavaScript & Algorithme [Résolu]

n°749059
Dr Raf
Roaccutane® powered
Posté le 02-06-2004 à 16:25:43  profilanswer
 

Bonjour, :hello: ca ne fait pas longtemps que g démarrer le javascript et je suis en train de faire un menu dynamique pour un site, mais ne maitrisant pas encore assez bien le JS (et étant limité par le temps) je n'arrive pas à mettre en oeuvre mon "algo".
 
Voila le menu dynamique (comme le menu "démarrer" de windows), pouvant aller jusqu'à 4 sous-rubriques :
 

Code :
  1. |--1|--11|--111
  2. |   |    |--112
  3. M   |
  4. E   |--12
  5. N   |--13|--131
  6. U        |--132
  7. |
  8. |--2|--21
  9.     |--22


 
Voilà une catégorie, elles sont toutes prêtent, plus qu'à les masquées ou affichées:
 

Code :
  1. ...
  2. #cat11 {position: absolute; visibility: hidden; top: 0px; left: 140px;}
  3. ...
  4. </style>
  5. </head>
  7. <body>
  8. ...
  9. <div id=cat11>Lien</div>
  10. ...


 
l'algo. (funtion shOw())
 

Code :
  1. Si la catégorie survolée n'est pas parente de la derniere catégorie affichée alors :
  2. -> effacer les catégories supérieure au "niveau" en cours
  3. -> afficher les catégories enfantes de niveau : niveau en cours + 1


 
Alors voilà si vous pouviez m'aider de manière quelquonque, (un algo plus facile ou des pistes pour faire celui ci) ca me tirerais une épingle du pied  :)


Message édité par Dr Raf le 14-06-2004 à 10:55:56
mood
Publicité
Posté le 02-06-2004 à 16:25:43  profilanswer
 

n°749401
Dr Raf
Roaccutane® powered
Posté le 02-06-2004 à 19:47:05  profilanswer
 

Code :
  1. <script language="JavaScript">
  3. var cAtDisp = 'cat0';
  5. function shOw(cAt) {
  7. if (cAt != cAtDisp.slice(0,cAt.length)) {
  9. document.getElementById(id.length>cAt.length).style.visibility='hidden';
  10. document.getElementById(cAt!.slice(0,cAt.length+1)).style.visibility='visible';
  11. cAtDisp = 'cAt' + '1';
  13. }
  15. }
  17. </script>


 
 
bon c faux :o  mais l'iddée est là... personne pourrait me donner un coup de main ?  :??:  :)

n°749415
Hermes le ​Messager
Breton Quiétiste
Posté le 02-06-2004 à 19:54:51  profilanswer
 

Dr Raf a écrit :

Code :
  1. <
  2. if (cAt != cAtDisp.slice(0,cAt.length))
  4. </script>


 
 
bon c faux :o  mais l'iddée est là... personne pourrait me donner un coup de main ?  :??:  :)


 
Qu'est-ce que c'est que ça ?  :heink:  
 
fais une fonction et appelle là avec un onmouseover di diou... Et fait une autre fonction appelée par un oumouseout.  :o

n°749435
Dr Raf
Roaccutane® powered
Posté le 02-06-2004 à 20:06:27  profilanswer
 

c ske g fait.
 

Code :
  1. onmouseover="javascript:shOw('cat1');"


 
 
tu as compris ske je voulais faire ?


Message édité par Dr Raf le 03-06-2004 à 15:24:26
n°750046
Dr Raf
Roaccutane® powered
Posté le 03-06-2004 à 07:15:24  profilanswer
 

document.getElementById(id.length>cAt.length).style.visibility='hidden';
 
c ca ki foire, comment faire pour masquer toutes les cat avec un id plus long que la catégorie en cours ?
 
document.getElementById(cAt!.slice(0,cAt.length+1)).style.visibility='visible';
 
idem mais pour afficher toutes les cat avec un id qui commence pareil que celle en cours et 1 caractère en plus...  
 
 
 
 
personne pour m'aider ?


Message édité par Dr Raf le 03-06-2004 à 07:23:50
n°750566
Dr Raf
Roaccutane® powered
Posté le 03-06-2004 à 12:55:02  profilanswer
 

bon voila g reussi a pondre un script qui marche  (pour le onmouseover only pour l'instant) :o  
 

Code :
  1. <script language="JavaScript">
  3. var cAtDisp = 'cat9';
  5. function shOw(cAt)
  6. {
  8. <!-- Si catégorie selectionée n'est pas parente de la dernière affichée-->
  10. if ( cAt != cAtDisp.slice(0,cAt.length) )
  11. {
  13.  <!-- Masquer dernières catégories affichées -->
  15.  for( var i=(cAtDisp.slice(3,(cAtDisp.length))); i<=(cAtDisp.slice(3,(cAtDisp.length)))+8; i++ )
  16.  {
  18.   if ( document.all('cat' + i) ) { document.getElementById('cat' + i).style.visibility='hidden'; }
  20.  }
  22.  <!-- Afficher catégories enfantes -->
  24.  for( var i=((cAt.slice(3,(cAtDisp.length)))*10)+1; i<=((cAt.slice(3,(cAtDisp.length)))*10)+9; i++ )
  25.  {
  27.   if ( document.all('cat' + i) ) { document.getElementById('cat' + i).style.visibility='visible'; }
  29.  }
  31.  <!-- Mémoriser catégorie affichée -->
  33.  cAtDisp = cAt + '1';
  35. }
  37. }
  39. </script>


 

Code :
  1. onmouseover="javascript:shOw('cat selectionée')


 
seul hic il est quand meme assez lent.  :(  si vous avez des idées pour l'améliorer ou si vous pouvez me dire ce qui le ralenti...

n°750634
Dr Raf
Roaccutane® powered
Posté le 03-06-2004 à 13:27:28  profilanswer
 

voila g amélioré le script, g pu de probleme de 'lag'.
 

Code :
  1. <script language="JavaScript">
  3. var cAtDisp = 'cat9';
  5. function shOw(cAt)
  6. {
  8. <!-- Si catégorie selectionée n'est pas parente de la dernière affichée-->
  10. if ( cAt != cAtDisp.slice(0,cAt.length) )
  11. {
  13.  <!-- Masquer dernières catégories affichées -->
  15.  i = (cAtDisp.slice(3,(cAtDisp.length)));
  17.  while ( document.all('cat' + i) != null )
  18.  {
  20.   document.getElementById('cat' + i).style.visibility='hidden';
  21.   i++;
  23.  }
  25.  <!-- Afficher catégories enfantes -->
  27.  i = cAt.slice(3,(cAt.length)) + '1';
  29.  while ( document.all('cat' + i) != null )
  30.  {
  32.   document.getElementById('cat' + i).style.visibility='visible';
  33.   i++;
  35.  }
  37.  <!-- Mémoriser catégorie affichée -->
  39.  cAtDisp = cAt + '1';
  41. }
  43. }
  45. </script>


 
 
merci pour votre aide.  :)

n°750894
Dr Raf
Roaccutane® powered
Posté le 03-06-2004 à 15:19:35  profilanswer
 

oops problème => sur une arboressence à plus de 1 niveau ca foire parce que le script ne se rappel que du dernier niveau affiché.
 
comment je peux faire pour lister toutes les div 'visible' et masquer celles de mon choix ?

n°751829
Dr Raf
Roaccutane® powered
Posté le 04-06-2004 à 01:00:23  profilanswer
 

bon bah g finalement reussi.
 

Code :
  1. <script language="JavaScript">
  3. var timeOut;
  4. var cAtDisp = 'cat99';
  5. var cAtDisp1 = '';
  6. var cAtDisp2 = '';
  7. var cAtDisp3 = '';
  8. var cAtDisp4 = '';
  9. var cAtDisp5 = '';
  11. function apU(x)
  12. {
  14. switch(x)
  15. {
  17.  case 1: cAtDisp1 = ''; break;
  18.  case 2: cAtDisp2 = ''; break;
  19.  case 3: cAtDisp3 = ''; break;
  20.  case 4: cAtDisp4 = ''; break;
  21.  case 5: cAtDisp5 = ''; break;
  22.  default: document.write ( 'Erreur sur l\'argument de la fonction apU('+x+').' ); break;
  23. }
  25. }
  27. function shOw(cAt)
  28. {
  30. clearTimeout(timeOut);
  32. // Si catégorie selectionée n'est pas parente de la dernière affichée
  34. if ( cAt != cAtDisp.slice(0,cAt.length) || cAt.length + 1 != cAtDisp.length )
  35. {
  37.  // Masquer catégories affichées de niveau supérieur
  39.  for (var i=(cAt.slice(3,(cAt.length))).length; i<=5; i++ )
  40.  {
  42.   if ( eval('cAtDisp' + i) != '' )
  43.   {
  45.    count = 0;
  46.    while ( document.all('cat'+(parseInt(eval('cAtDisp' + i).slice(3,eval('cAtDisp' + i).length))+count)) )
  47.    {
  49.     document.getElementById('cat'+(parseInt(eval('cAtDisp' + i).slice(3,eval('cAtDisp' + i).length))+count)).style.visibility='hidden';
  50.     count++;
  52.    }
  54.    apU(i);
  56.   }
  58.  }
  60.  // Afficher catégories enfantes
  62.  i = cAt.slice(3,(cAt.length)) + '1';
  64.  while ( document.all('cat' + i) != null )
  65.  {
  67.   document.getElementById('cat' + i).style.visibility='visible';
  68.   i++;
  70.  }
  72.  // Mémoriser catégories survolées
  74.  switch( cAt.length )
  75.  {
  77.  case 4: cAtDisp1 = cAt + '1'; cAtDisp = cAt + '1'; break;
  78.  case 5: cAtDisp2 = cAt + '1'; cAtDisp = cAt + '1'; break;
  79.  case 6: cAtDisp3 = cAt + '1'; cAtDisp = cAt + '1'; break;
  80.  case 7: cAtDisp4 = cAt + '1'; cAtDisp = cAt + '1'; break;
  81.  case 8: cAtDisp5 = cAt + '1'; cAtDisp = cAt + '1'; break;
  82.  default: document.write ( 'Erreur sur l\'argument de la fonction shOw().' ); break;
  84.  }
  86. }
  88. }
  90. function UnshOw() { timeOut = setTimeout("closeAll()",500); }
  92. function closeAll()
  93. {
  95. for (var i=1; i<=5; i++ )
  96. {
  98.  if ( eval('cAtDisp' + i) != '' )
  99.  {
  101.   count = 0;
  102.   while ( document.all('cat'+(parseInt(eval('cAtDisp' + i).slice(3,eval('cAtDisp' + i).length))+count)) )
  103.   {
  105.    document.getElementById('cat'+(parseInt(eval('cAtDisp' + i).slice(3,eval('cAtDisp' + i).length))+count)).style.visibility='hidden';
  106.    count++;
  108.   }
  110.   apU(i);
  112.  }
  114. }
  116. cAtDisp = '';
  117. }
  119. </script>


 
 

Code :
  1. #cat1 {position: absolute; visibility: visible; top: 0px; left: 0px;}


 

Code :
  1. <div id=cat1><a href="#" onmouseover="javascript:shOw('cat1');" onmouseout="javascript:UnshOw();">blabla</a></div>


 
 
si ca peut servir à kelkun...
 
aller ++


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

  Menu Dynamique JavaScript & Algorithme [Résolu]

 

Sujets relatifs
[C] définition d'une structure dynamiqueProblème de fichiers / tableaux [RESOLU]
[PHP] Cookies VS Fonction dans une classe [Resolu][Perl] Regular expression "dynamique"
[JAVASCRIPT] Object Image() et tailles de celui-ci dans IE et FireFox[Résolu][Windows]Kill thread Python
[Résolu][Jar]Localisation de ressource[PHP / XML] Problème de fichier UTF-8 [Résolu]
problème de menu dynamique 
Plus de sujets relatifs à : Menu Dynamique JavaScript & Algorithme [Résolu]

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

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