[JS] Fenetre déroulante (save)

Fenetre déroulante (save) [JS] - HTML/CSS - Programmation

Marsh Posté le 14-03-2008 à 21:12:45    

Bonjour !
 
J'ai crée une "fenetre déroulante" (je sais pas vraiment comment on apelle ca) avec dreamweaver : "CollapsiblePanelTab".
Voici le résultat : http://ihey.jeun.fr/index.htm (cliquez sur "voir le forum sous forum de liste/icone" )
 
Mais j'aimerais que une fois que l'utilisateur décide d'afficher l'un et de masquer l'autre, que sa sauvegarde son choix, qu'il n'ai pas a remaquer et reafficher a chaque fois qu'il actualise.
 
Est-ce possible ?
 
Voila le script d'une fenetre :

Code :
  1. <script src="http://warkopaka.free.fr/ifun/SpryCollapsiblePanel.js" type="text/javascript"></script>
  2. <link href="http://warkopaka.free.fr/ifun/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css">
  3. <div id="Index2" class="CollapsiblePanel">
  4.   <div class="CollapsiblePanelTab" tabindex="0">Tab</div>
  5.   <div class="CollapsiblePanelContent"><table width="100%" border="0" cellspacing="0" cellpadding="2" align="center">
  6. <tr>
  7. <td valign="bottom"><!-- BEGIN switch_user_logged_in --><span class="gensmall">{LAST_VISIT_DATE}<br>
  8. {CURRENT_TIME}<br>
  9. </span><!-- END switch_user_logged_in --><span class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</span></td>
  10. <td class="gensmall" align="right" valign="bottom"><!-- BEGIN switch_user_logged_in --><a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br>
  11. <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br>
  12. <!-- END switch_user_logged_in --><a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a></td>
  13. </tr>
  14. </table>
  15. <!-- BEGIN catrow --><!-- BEGIN tablehead -->
  16. <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="2">
  17. <tr>
  18. <th colspan="{catrow.tablehead.INC_SPAN}" nowrap="nowrap" width="100%"> {catrow.tablehead.L_FORUM} </th>
  19. <th nowrap="nowrap" width="50">{L_TOPICS}</th>
  20. <th nowrap="nowrap" width="50">{L_POSTS}</th>
  21. <th nowrap="nowrap" width="150">{L_LASTPOST}</th>
  22. </tr>
  23. <!-- END tablehead --><!-- BEGIN cathead -->
  24. <tr><!-- BEGIN inc -->
  25. <td class="{catrow.cathead.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46"></td>
  26. <!-- END inc -->
  27. <td class="{catrow.cathead.CLASS_CAT}" colspan="{catrow.cathead.INC_SPAN}" width="100%"><span class="cattitle"><a class="cattitle" title="{catrow.cathead.CAT_DESC}" href="{catrow.cathead.U_VIEWCAT}">{catrow.cathead.CAT_TITLE}</a></span></td>
  28. <td class="{catrow.cathead.CLASS_ROWPIC}" colspan="3" align="right"> </td>
  29. </tr>
  30. <!-- END cathead --><!-- BEGIN forumrow -->
  31. <tr><!-- BEGIN inc -->
  32. <td class="{catrow.forumrow.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46"></td>
  33. <!-- END inc -->
  34. <td class="{catrow.forumrow.INC_CLASS}" align="center" valign="middle" height="50"><img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}"></td>
  35. <td class="row1" onmouseover='this.className="row2"' onmouseout='this.className="row1"' colspan="{catrow.forumrow.INC_SPAN}" valign="top" width="100%" height="50"><span class="forumlink"><a class="forumlink" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a><br />
  36. </span> <span class="genmed">{catrow.forumrow.FORUM_DESC}</span>
  37. <span class="gensmall">
  38. <!-- BEGIN switch_moderators_links -->
  39. {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
  40. <!-- END switch_moderators_links -->
  41. {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</span></td>
  42. <!-- BEGIN forum_link_no -->
  43. <td class="row3" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.TOPICS}</span></td>
  44. <td class="row2" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.POSTS}</span></td>
  45. <td class="row3" onmouseover='this.className="row1"' onmouseout='this.className="row3"' align="center" valign="middle" nowrap="nowrap" height="50"><span class="gensmall">{catrow.forumrow.LAST_POST}</span></td>
  46. <!-- END forum_link_no --><!-- BEGIN forum_link -->
  47. <td class="row3" colspan="3" align="center" valign="middle" height="50"><span class="gensmall">{catrow.forumrow.forum_link.HIT_COUNT}</span></td>
  48. <!-- END forum_link --></tr>
  49. <!-- END forumrow --><!-- BEGIN catfoot -->
  50. <tr><!-- BEGIN inc -->
  51. <td class="{catrow.catfoot.inc.INC_CLASS}" width="46"><img src="{SPACER}" height="0" width="46"></td>
  52. <!-- END inc -->
  53. <td class="spaceRow" colspan="{catrow.catfoot.INC_SPAN}" height="1"><img src="{SPACER}" alt="" height="1" width="1"></td>
  54. </tr><!-- END catfoot --><!-- BEGIN tablefoot --></table><img src="{SPACER}" alt="" height="5" width="1"><!-- END tablefoot --><!-- END catrow --></div>
  55. </div>
  58. <script type="text/javascript">
  59. <!--
  60. var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {enableAnimation:false});
  61. var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("Index2", {enableAnimation:false, contentIsOpen:false});
  62. //-->
  63. </script>


Voici mon script JS : http://warkopaka.free.fr/ifun/SpryCollapsiblePanel.js

Reply

Marsh Posté le 14-03-2008 à 21:12:45   

Reply

Marsh Posté le 14-03-2008 à 22:02:26    

Écrire un cookie avec JS, le relire pour voir ce qui a été masqué/affiché.


---------------
-- Debian -- Le système d'exploitation universel | Le gras c'est la vie! | /(bb|[^b]{2})/
Reply

Marsh Posté le 14-03-2008 à 22:20:59    

Comment je fait ca ?

Reply

Marsh Posté le 14-03-2008 à 22:29:11    

Je ne saurais te donner meilleur lien que le suivant :
http://www.google.fr/search?hl=fr& [...] ie&spell=1
 
Si tu ne sais pas quoi en faire, c'est qu'à priori il te manque quelques bases en JS/HTML et dans ce cas je t'invite à te documenter à ce propos.


---------------
-- Debian -- Le système d'exploitation universel | Le gras c'est la vie! | /(bb|[^b]{2})/
Reply

Marsh Posté le 14-03-2008 à 23:21:54    

J'imagine qu'il ne faut pas rajouter grand chose dans mon script

Reply

Marsh Posté le 17-03-2008 à 13:38:44    

Il faut rajouter la création la lecture et l'écriture du cookie ainsi que les évènements qui les déclenchent.
Quand tu auras assimilé la doc, je te conseil de te faire un fichier js séparé avec les fonctions création écriture et lecture du cookie, comme ça y aura plus qu'à l'inclure la prochaine fois que tu veux utilisé des cookies (et pi c'est plus zolie ^^)

 

Sinon plutôt que toutes ces cochonneries juste pour faire apparaitre/disparaitre une fenêtre, un petit switch display:block <-> display:none css/javascript serait très rapide a mettre et beaucoup plus zoli aussi non? ^^

 

PS : si t'a rien compris c'est que effectivement il te manque les bases.


Message édité par vanish le 17-03-2008 à 13:39:42
Reply

Marsh Posté le 18-03-2008 à 21:39:37    

Le display:block je doit le mettre dans le css ou dans le fichier js ?

Reply

Sujets relatifs:

Leave a Replay

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