Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> ukrywanie div, ukrycie mam a chce zapamiętanie wartości
mateuszpi
post
Post #1





Grupa: Zarejestrowani
Postów: 140
Pomógł: 0
Dołączył: 11.09.2006
Skąd: Jaworzno

Ostrzeżenie: (0%)
-----

Witam
mam kod do ukrycia pewnego div-a (swoją drogą znaleziony u Was)
wszystko działa pięknie ale niestety po przejściu na inną stronę i powrocie to wszystko wraca do stanu początkowego a ja potrzebuje aby to co zostało ustawione było zapamiętane. zapewne trzeba użyć ciasteczek. prosze o pomoc i modyfikacje kodu:
[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2. <!--
  3. function pokazUkryj(id)
  4. {
  5.     document.getElementById(id).style.display = (document.getElementById(id).style.display == "none") ? "block" : "none";
  6. }
  7. -->
  8. </script>
  9.  
  10. <a href="javascript:pokazUkryj('menu_1')">Zwiń/Rozwiń</a>
  11. <div id="menu_1" style="display:none"><!--Powinno być ukryte...-->
  12. </div>
[HTML] pobierz, plaintext


z góry dzieki.
Go to the top of the page
+Quote Post
 
 Start new topic
Odpowiedzi
Fixer
post
Post #2





Grupa: Zarejestrowani
Postów: 123
Pomógł: 0
Dołączył: 24.10.2004
Skąd: TG

Ostrzeżenie: (0%)
-----

Przedstawiam gotowiec...

(IMG:http://img218.imageshack.us/img218/755/menuug7.jpg)

Zalety:
-zapisywanie/odczytywanie statusu przez cookie
-łatwa modyfikacja wyglądu stylem css
-szybka integracja ze stroną
-kompatybilność z przeglądarkami IE, FF

[HTML] pobierz, plaintext 
  1. <html>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
  6.  
  7. <title>Show/Hide + cookie</title>
  8.  
  9. <style type="text/css">
  10. <!--
  11. body,td,th {
  12. 	font-family: Verdana, Arial, Helvetica, sans-serif;
  13. 	color: #000000;
  14. }
  15. body {
  16. 	background-color: #FFFFFF;
  17. 	margin-left: 10px;
  18. 	margin-top: 10px;
  19. 	margin-right: 10px;
  20. 	margin-bottom: 10px;
  21. }
  22. a {
  23. 	font-family: Verdana, Arial, Helvetica, sans-serif;
  24. 	font-size: 12px;
  25. 	color: #FFFFFF;
  26. }
  27. a:link {
  28. 	text-decoration: none;
  29. }
  30. a:visited {
  31. 	text-decoration: none;
  32. 	color: #FFFFFF;
  33. }
  34. a:hover {
  35. 	text-decoration: none;
  36. 	color: #FFFFFF;
  37. }
  38. a:active {
  39. 	text-decoration: none;
  40. 	color: #FFFFFF;
  41. }
  42. .menu_naglowek {
  43. 	background-color: #820000;
  44.  
  45. 	PADDING-LEFT: 8px;
  46. 	PADDING-RIGHT: 8px;
  47. 	PADDING-TOP: 2px;
  48. 	PADDING-BOTTOM: 2px;
  49.  
  50. 	FONT-FAMILY: Verdana, Tahoma;
  51. 	text-align: center;
  52. 	FONT-SIZE: 10px;
  53. 	FONT-WEIGHT: bold;
  54. 	color: #FFFFFF;
  55. 	height: 18px;
  56. 	cursor: pointer;
  57. }
  58.  
  59. .menu_tresc {
  60. 	background-color: #FFFFFF;
  61.  
  62. 	BORDER-LEFT: 1px solid #820000;
  63. 	BORDER-RIGHT: 1px solid #820000;
  64. 	BORDER-TOP: 0px solid;
  65. 	BORDER-BOTTOM: 1px solid #820000;
  66.  
  67. 	PADDING-LEFT: 8px;
  68. 	PADDING-RIGHT: 8px;
  69. 	PADDING-TOP: 5px;
  70. 	PADDING-BOTTOM: 5px;
  71.  
  72. 	FONT-FAMILY: Verdana, Tahoma;
  73. 	FONT-SIZE: 10px;
  74. 	COLOR: #000000;
  75. }
  76. -->
  77. </style>
  78.  
  79. 	<script language="javascript">
  80.     function init()
  81.     {
  82.         var cookie = getCookie('collapse_obj');
  83.         if(cookie)
  84.         {
  85.             var values = cookie.split(',');
  86.  
  87.             for(var i = 0; i < values.length; i++)
  88.             {
  89.                 var itm = getItem(values[i]);
  90.  
  91.                 if(itm)
  92.                     itm.style.display = 'none';
  93.             }
  94.         }
  95.     }
  96.  
  97.     function makeCookie(name, value)
  98.     {
  99.         var cookie = name + '=' + escape(value) + ';';
  100.         document.cookie = cookie;
  101.     }
  102.  
  103.     function getCookie(name)
  104.     {
  105.         if(document.cookie == '')
  106.             return false;
  107.  
  108.         var firstPos;
  109.         var lastPos;
  110.         var cookie = document.cookie;
  111.  
  112.         firstPos = cookie.indexOf(name);
  113.  
  114.         if(firstPos != -1)
  115.         {
  116.             firstPos += name.length + 1;
  117.             lastPos = cookie.indexOf(';', firstPos);
  118.  
  119.             if(lastPos == -1)
  120.                 lastPos = cookie.length;
  121.  
  122.             return unescape(cookie.substring(firstPos, lastPos));
  123.         }
  124.  
  125.         else
  126.             return false;
  127.     }
  128.  
  129.     function getItem(id)
  130.     {
  131.         var itm = false;
  132.         if(document.getElementById)
  133.             itm = document.getElementById(id);
  134.         else if(document.all)
  135.             itm = document.all[id];
  136.         else if(document.layers)
  137.             itm = document.layers[id];
  138.  
  139.         return itm;
  140.     }
  141.  
  142.     function ShowHide(id)
  143.     {
  144.         itm = getItem(id);
  145.  
  146.         if(!itm)
  147.             return false;
  148.  
  149.         if(itm.style.display == 'none')
  150.             itm.style.display = '';
  151.         else
  152.             itm.style.display = 'none';
  153.  
  154.         ////////////////////
  155.  
  156.         cookie = getCookie('collapse_obj');
  157.         values = new Array();
  158.         newval = new Array();
  159.         add    = 1;
  160.  
  161.         if(cookie)
  162.         {
  163.             values = cookie.split(',');
  164.  
  165.             for(var i = 0; i < values.length; i++)
  166.             {
  167.                 if(values[i] == id)
  168.                     add = 0;
  169.                 else
  170.                     newval[newval.length] = values[i];
  171.             }
  172.         }
  173.  
  174.         if(add)
  175.             newval[newval.length] = id;
  176.  
  177.         makeCookie('collapse_obj', newval.join(','));
  178.  
  179.         return false;
  180.     }
  181.     </script>
  182.  
  183. </head>
  184.  
  185. <body onLoad="init()">
  186.  
  187. <table width="250" border="0" cellspacing="0" cellpadding="0">
  188.   <tr>
  189.     <td class="menu_naglowek" onclick="javascript:ShowHide('menu_1');"><a name="menu1" id="menu1">Menu1</a></td>
  190.   </tr>
  191.   <tr>
  192.     <td class="menu_tresc">
  193.  
  194.     <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" id="menu_1">
  195.       <tr>
  196.         <td height="20">nazwa1</td>
  197.       </tr>
  198.       <tr>
  199.         <td height="20">nazwa2</td>
  200.       </tr>
  201.     </table>
  202.  
  203.     </td>
  204.   </tr>
  205. </table>
  206.  
  207. <br />
  208. <table width="250" border="0" cellspacing="0" cellpadding="0">
  209.   <tr>
  210.     <td class="menu_naglowek" onclick="javascript:ShowHide('menu_2');"><a name="menu2" id="menu2">Menu2</a></td>
  211.   </tr>
  212.   <tr>
  213.     <td class="menu_tresc">
  214.  
  215.     <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" id="menu_2">
  216.       <tr>
  217.         <td height="20">nazwa1</td>
  218.       </tr>
  219.       <tr>
  220.         <td height="20">nazwa2</td>
  221.       </tr>
  222.     </table>
  223.  
  224.     </td>
  225.   </tr>
  226. </table>
  227.  
  228. </body>
  229. </html>
[HTML] pobierz, plaintext


Jeśli chcemy aby przy pierwszym otwarciu przeglądarki jakiś fragment był domyślnie ukryty to nieco modyfikujemy kod:
zamiast
[HTML] pobierz, plaintext 
  1. <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" id="menu_1">
[HTML] pobierz, plaintext

dajemy
[HTML] pobierz, plaintext 
  1. <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" id="menu_1" style="display: none;">
[HTML] pobierz, plaintext


Dodatkowo jak ktoś potrzebuje zastosować tutaj elemnt <DIV> zamiast id="nazwa"
to może to zrobic tak:
[HTML] pobierz, plaintext 
  1. <div id="nazwa" style="display: block;"> (zamiast block można też wpisać none dla zawartości ukrytej domyślnie)
  2. zawartość html która będzie się pokazywać/ukrywać
  3. </div>
[HTML] pobierz, plaintext


Z uwagi na to że na JS nie znam się za bardzo dlatego mam jeszcze do was jedno pytanie, jak przerobić tą fukcję JS powyżej, żeby można było dodać kolejny parametr mówiący o tym czy box ma być domyślnie zamknięty/otwarty po pierwszym otwarciu strony?

ShowHide('menu_2', 'true'); //jak true to otwarty a jak false to domyślnie zamknięty

PS. zmiany powinny nastąpić we funkcji init() i ShowHide() i jeśli mamy parametr false to tam gdzie było none dajemy block a tam gdzie block dajemy none

Dla kogos kto siedzi w JS to będzie prosta przeróbka, pomożecie zatem?

Ten post edytował Fixer 16.05.2008, 19:37:18
Go to the top of the page
+Quote Post

Posty w temacie
- mateuszpi   ukrywanie div   5.04.2008, 16:29:48
- - kubarek   No dobrze rozumujesz. Użyj ciasteczek A żeby zapa...   5.04.2008, 21:33:24
- - mateuszpi   albo ja nie rozumiem albo coś jest nie tak: [HTML]...   6.04.2008, 10:56:56
- - lord_t   Nie działa bo kubarek nie podał Ci rozwiązania na ...   6.04.2008, 11:59:55
- - mateuszpi   poszukałem na google i po twoich poradch skombinow...   6.04.2008, 12:38:38
- - kubarek   Jeszcze teraz nad tym myślałem trochę, więc wygląd...   6.04.2008, 20:22:30
- - Fixer   Przedstawiam gotowiec... Zalety: -zapisywanie/o...   16.05.2008, 19:36:10
- - DawPi   Witam, podczepię się pod wątek. Kod usera Fixer d...   22.09.2008, 22:57:02
- - tommy4   Spowodowane jest to parametrem href="#"....   23.09.2008, 07:52:05

« Następny starszy · JavaScript · Następny nowszy »
 

Reply to this topicStart new topic
1 Użytkowników czyta ten temat (1 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Przełącz na: Standardowy · Przełącz na: Linearny+ · Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 9.10.2025 - 00:03
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn