Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: ukrywanie div
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
mateuszpi
5.04.2008, 16:29:48
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.
kubarek
5.04.2008, 21:33:24
No dobrze rozumujesz. Użyj ciasteczek winksmiley.jpg A żeby zapamiętać i odczytać, to coś w ten deseń:
Kod
// odczytywanie:
window.onload = function(){
    var stan = odczytajCiastko(id_elementu);
    pokazUkryj(id_elementu);
}

// zapisywanie:
pokazUkryj = function(id) {
   ...
   var stan = (document.getElementById(id).style.display == "none");
   zapiszCiastko(id_elementu, stan);
}
mateuszpi
6.04.2008, 10:56:56
albo ja nie rozumiem albo coś jest nie tak:
[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2. <!--
  3.  
  4. // odczytywanie:
  5. window.onload = function()
  6. {    
  7. var stan = odczytajCiastko(id_elementu);    
  8. pokazUkryj(id_elementu);
  9. }
  10.  
  11. // zapisywanie:
  12. pokazUkryj = function(id) 
  13. { 
  14. var stan = (document.getElementById(id).style.display == "none");   
  15. zapiszCiastko(id_elementu, stan);
  16. }
  17.  
  18.  
  19. function pokazUkryj(id)
  20. {
  21.     document.getElementById(id).style.display = (document.getElementById(id).style.display == "none") ? "block" : "none";
  22. }
  23.  
  24. -->
  25.  
  26. </script>
[HTML] pobierz, plaintext


i teraz wogóle nie działa nic. nawet odkryć ukrytego tekstu się nie da
lord_t
6.04.2008, 11:59:55
Nie działa bo kubarek nie podał Ci rozwiązania na tacy tylko podpowiedźsmile.gif nie masz funkcji odczytajCiastko i zapiszCiastko.
mateuszpi
6.04.2008, 12:38:38
poszukałem na google i po twoich poradch skombinowałem funkcję do odczytu i zapisu. wsadziłęm całość i nadal nic się nie da zrobić.

[HTML] pobierz, plaintext 
  1. <script type="text/javascript">
  2. <!--
  3.  
  4. function zapiszCiastko(nazwa, wartosc) {
  5. document.cookie = nazwa + "=" + escape(wartosc)
  6. }
  7.  
  8. function odczytajCiastko(nazwa) { //1
  9. if (document.cookie!="") { //2
  10. var toCookie=document.cookie.split("; "); //3
  11. for (i=0; i<toCookie.length; i++) { //4
  12.  var nazwaCookie=toCookie[i].split("=")[0]; //5
  13.  var wartoscCookie=toCookie[i].split("=")[1]; //6
  14.  if (nazwaCookie==nazwa) return unescape(wartoscCookie) //7
  15. }
  16. }
  17. }  
  18.  
  19.  
  20.  
  21. // odczytywanie:
  22. window.onload = function()
  23. {    
  24. var stan = odczytajCiastko(id_elementu);    
  25. pokazUkryj(id_elementu);
  26. }
  27.  
  28. // zapisywanie:
  29. pokazUkryj = function(id) 
  30. { 
  31. var stan = (document.getElementById(id).style.display == "none");   
  32. zapiszCiastko(id_elementu, stan);
  33. }
  34.  
  35.  
  36. function pokazUkryj(id)
  37. {
  38.     document.getElementById(id).style.display = (document.getElementById(id).style.display == "none") ? "block" : "none";
  39. }
  40.  
  41. -->
  42.  
  43. </script>
[HTML] pobierz, plaintext


czyba jednak musze poprosić o "tace" bo chyba nie dojde osobiście.
kubarek
6.04.2008, 20:22:30
Jeszcze teraz nad tym myślałem trochę, więc wygląda nieco inaczej, niż przedstawiłem w pierwszym poście. A więc tak ( zdania nie rozpoczyna się od 'a więc' winksmiley.jpg ):
Tworzysz funkcję pokazUkryj, z parametrem id, itd:
Kod
function pokazUkryj(id)
{
    var stan = (document.getElementById(id).style.display == "none");
    document.getElementById(id).style.display = stan ? "block" : "none";
    zapiszCiastko(id, !stan);
}

Pobiera stan elementu, czyli sprawdza czy element jest niewidoczny. Następnie zmienia ten stan i zapisuje już zmieniony do cookies ( stąd ten wykrzyknik w funkcji zapiszCiastko). Czyli zapisuje true, jeśli element nie jest widoczny albo false, jeśli jest widoczny. Odczytywanie wygląda zaś tak. Tworzysz funkcję, która wczytuje zapisany stan i na jego podstawie decyduje, czy element ma być widoczny, czy ukryty.
Kod
function odczytajStan(id){
    var stan = odczytajCiastko(id);
    document.getElementById(id).style.display = stan ? "block" : "none";
}


No i funkcja ładująca się na starcie:
Kod
window.onload = function(){
   var id = "id_elementu_ktory_ma_miec_wczytany_stan_na_starcie";
   odczytajStan(id);
}

Jeśli jest wiele takich elementów, to no problem, użyj tablicy:
Kod
window.onload = function(){
   var elementy = ["elem1", "elem2", "elem3"];
   for (var i = 0; i < elementy.length; i++) odczytajStan(elementy[i]);
}

Pisane z palca, więc mogą być pewne błędy, ale ogólnie idea jest właśnie taka smile.gif
Fixer
16.05.2008, 19:36:10
Przedstawiam gotowiec...



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?
DawPi
22.09.2008, 22:57:02
Witam,
podczepię się pod wątek.

Kod usera Fixer działa, jednak nie mam żadnej styczności z JS, a chciałbym poznać sposób na mój problem:

otóż będąc w jakimś miejscu strony innym niż sama góra ( suwak po prawej przesunięty maksymalnie w górę ) po kliknięciu na link:
Kod
<tr><td class="row1" colspan="2" valign="bottom"><b>Menu</b> <a href="#" onclick="javascript:ShowHide('menu__1');"><b>Menu</b></a>( {$who_o} )  <div id="menu__1" style="display: none;"><br />zawartosc</div>  </td></tr>


strona 'zwija' się na samą górę. Można to porównać do naciśnięcia buttona na tym forum.

Chciałbym by rozwinięcie/zwinięcie nie powodowało zmiany położenia na stronie.

Dzięki za wszystkie sugestie.
tommy4
23.09.2008, 07:52:05
Spowodowane jest to parametrem href="#".

[HTML] pobierz, plaintext 
  1. <tr><td class="row1" colspan="2" valign="bottom"><b>Menu</b> <a href="#" onclick="javascript:ShowHide('menu__1'); return false;"><b>Menu</b></a>( {$who_o} )  <div id="menu__1" style="display: none;"><br />zawartosc</div>  </td></tr>
[HTML] pobierz, plaintext


Musisz dodać return false, wtedy kliknięcie na link się nie wykona.

BTW:
Kod
onclick="javascript:ShowHide('menu__1');
=>
Kod
onclick="ShowHide('menu__1');


Po co mówić przeglądarce, że onclick trzeba wykonać przez javascript, skoro ona to wie? Użycie "java script:" jest uzasadnione, np. gdy

[HTML] pobierz, plaintext 
  1. <a href="javascript:alert('kliknalem');">asdf</a>
[HTML] pobierz, plaintext
, ale nawet tak się nie robi. winksmiley.jpg
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.