Cacher des liens ...

Cacher des liens ... - HTML/CSS - Programmation

Marsh Posté le 01-11-2005 à 19:01:41    

Hello!
Voilà j'ai un site avec une liste de liens qui s'allonge au fur et à mesure de mes rajouts > www.jofission.net (à voir dans la sidebar de droite).
J'aimerais libérer de l'espace dans cette colonne de droite afin de pouvoir rajouter d'autres choses (yen a jamais assez  :D  ), mais sans perdre l'intégralité de mes liens.
Je pensais donc faire un script en javascript pour "masquer" ces liens grâce à un "bouton" qui, lorsque on appuie dessus, montre tous mes liens.
 
Mais voilà je ne sais pas par quel bout commencer. Si vous avez une idée je vous en remercie.  :)  
 
Voir l'exemple de ce que je cherche à faire sur ce site >> http://feelfree.homelinux.com/ (sidebar de droite, Links)


---------------
The NeXt Vortex => www.nextvortex.net
Reply

Marsh Posté le 01-11-2005 à 19:01:41   

Reply

Marsh Posté le 02-11-2005 à 11:07:15    

ben tu affiche la source du site qui te plait et tu copie et/ou adapte le code a tes besoins...
 
en html sur le site fourni en lien:

Code :
  1. <ul>
  2. <h2>
  3. <a href='javascript:hl_openCloseOptions("list1","list1","0","/wp-content/plugins/hide_and_show" );'><img id='img_list1' src='/wp-content/plugins/hide_and_show/plus.png'>&nbsp;Linux</a>
  4. </h2>
  5. <ul id='list1' style='display:none;visibility:visible;'>
  6. <li>&nbsp;&nbsp;<a href='http://distrowatch.com/'>DistroWatch.com News</a></li><li>&nbsp;&nbsp;<a href='http://linuxfr.org/'>DLFP - Dépêches</a></li>
  7. <li>&nbsp;&nbsp;<a href='http://fedora.redhat.com'>fedora</a></li>
  8. etc...
  9. <br>
  10. </ul>
  11. <h2>
  12. <a href='javascript:hl_openCloseOptions("list2","list2","0","/wp-content/plugins/hide_and_show" );'><img id='img_list2' src='/wp-content/plugins/hide_and_show/plus.png'>&nbsp;Mac &#038; Apple</a>
  13. </h2>
  14. <ul id='list2' style='display:none;visibility:visible;'>
  15. <li>&nbsp;&nbsp;<a href='http://applematters.com/index.php/weblog/index/'>AppleMatters</a></li>
  16. <li>&nbsp;&nbsp;<a href='http://www.ipodlounge.com'>iPodlounge</a></li>
  17. etc...
  18. </ul>
  19. etc...
  20. </ul>


 
le javascript associé:

Code :
  1. function hl_getE(id)
  2. {
  3. if(document.getElementById) {
  4.  return document.getElementById(id);
  5. } else if(document.all) {
  6.  return document.all[id];
  7. } else return;
  8. }
  9. function hl_openClose(id,mode,dir)
  10. {
  11. element = hl_getE(id);
  12. img = hl_getE('img_'+id);
  13. if(element.style) {
  14.  if(mode == 0) {
  15.   if(element.style.display == 'block' ) {
  16.    element.style.display = 'none';
  17.    img.src = dir+'/plus.png';
  18.    img.alt='[+]';
  19.   } else {
  20.    element.style.display = 'block';
  21.    img.src = dir+ '/moins.png';
  22.    img.alt='[-]';
  23.   }
  24.  } else if(mode == 1) {
  25.   element.style.display = 'block';
  26.   img.src = dir+'/moins.png';
  27.   img.alt='[-]';
  28.  } else if(mode == -1) {
  29.   element.style.display = 'none';
  30.   img.src = dir+'/plus.png';
  31.   img.alt='[+]';
  32.  }
  33. }
  34. }
  35. function hl_createCookie(name,value) {
  36. document.cookie = name+'='+value+';path=/;';
  37. }
  38. function hl_readCookie(name) {
  39. var nameEQ = name + '=';
  40. var ca = document.cookie.split(';');
  41. for(var i=0;i < ca.length;i++) {
  42.  var c = ca[i];
  43.  while (c.charAt(0)==' ') c = c.substring(1,c.length);
  44.   if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
  45. }
  46. return null;
  47. }
  48. function hl_openCloseOptions(id,cookie_name,mode,dir)
  49. {
  50. if (mode != null) {
  51.  hl_openClose(id,mode,dir);
  52.  e = hl_getE(id);
  53.  if (e.style.display == 'block') {
  54.   cookie_value = '1';
  55.  } else {
  56.   cookie_value = '-1';
  57.  }
  58.  hl_createCookie(cookie_name,cookie_value);
  59. } else {
  60.  cookie = hl_readCookie(cookie_name);
  61.  if (!cookie) {
  62.   cookie = -1
  63.  }
  64.  hl_openClose(id,cookie);
  65. }
  66. }


 
comprend pas a quoi lui sert les cookies...
y a peut etre aussi des trucs important dans la feuille de style...
 
vive l'opensource car regarder (et surtout comprendre) est encore le meilleur moyen d'apprendre!


Message édité par mechkurt le 02-11-2005 à 11:09:33

---------------
D3
Reply

Marsh Posté le 02-11-2005 à 11:21:31    


Code :
  1. <script type="text/javascript">
  2. function showhide(blocid) {
  3.   var monbloc= document.getElementById(blocid);
  4.   if (!monbloc) return;
  5.   monbloc.style.display = (monbloc.style.display=="none" ) ? "block" : "none";
  6. }
  7. </script>


 
et le HTML

Code :
  1. <a href="#" onclick="showhide('monblocdelien')">afficher les liens</a>
  2. <div id="monblocdelien" style="display:none;">dfdfdfdf
  3. </div>


Message édité par gatsusat le 02-11-2005 à 11:25:00

---------------
Les CSS c'est bon mangez-en
Reply

Marsh Posté le 02-11-2005 à 11:26:11    

je me contente de lui dire que le site qui lui plait tant a son code en clair et que rien ne l'empeche de se baser dessus...
 
apres evidement j'aurais plutôt dut de l'envoyer chez alsacreation c'est surement plus simple et plus propre  ;)  
 
autant pour moi


Message édité par mechkurt le 02-11-2005 à 11:35:26

---------------
D3
Reply

Marsh Posté le 02-11-2005 à 11:31:33    

Merchi les gars c'est achement sympa.  :jap:


---------------
The NeXt Vortex => www.nextvortex.net
Reply

Sujets relatifs:

Leave a Replay

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