Menu Dynamique JavaScript & Algorithme [Résolu]

Menu Dynamique JavaScript & Algorithme [Résolu] - HTML/CSS - Programmation

Marsh Posté le 02-06-2004 à 16:25:43    

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
Reply

Marsh Posté le 02-06-2004 à 16:25:43   

Reply

Marsh Posté le 02-06-2004 à 19:47:05    

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 ?  :??:  :)

Reply

Marsh Posté le 02-06-2004 à 19:54:51    

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

Reply

Marsh Posté le 02-06-2004 à 20:06:27    

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
Reply

Marsh Posté le 03-06-2004 à 07:15:24    

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
Reply

Marsh Posté le 03-06-2004 à 12:55:02    

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

Reply

Marsh Posté le 03-06-2004 à 13:27:28    

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.  :)

Reply

Marsh Posté le 03-06-2004 à 15:19:35    

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 ?

Reply

Marsh Posté le 04-06-2004 à 01:00:23    

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 ++

Reply

Sujets relatifs:

Leave a Replay

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