ukrywanie div, ukrycie mam a chce zapamiętanie wartości Opcje

[mateuszpi]

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 
<script type="text/javascript">
<!--
function pokazUkryj(id)
{
    document.getElementById(id).style.display = (document.getElementById(id).style.display == "none") ? "block" : "none";
}
-->
</script>
 
<a href="javascript:pokazUkryj('menu_1')">Zwiń/Rozwiń</a>
<div id="menu_1" style="display:none"><!--Powinno być ukryte...-->
</div>
[HTML] pobierz, plaintext 

z góry dzieki.

[kubarek]

No dobrze rozumujesz. Użyj ciasteczek 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]

albo ja nie rozumiem albo coś jest nie tak:

[HTML] pobierz, plaintext 
<script type="text/javascript">
<!--
 
// 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);
}
 
 
function pokazUkryj(id)
{
    document.getElementById(id).style.display = (document.getElementById(id).style.display == "none") ? "block" : "none";
}
 
-->
 
</script>
[HTML] pobierz, plaintext 

i teraz wogóle nie działa nic. nawet odkryć ukrytego tekstu się nie da

[lord_t]

Nie działa bo kubarek nie podał Ci rozwiązania na tacy tylko podpowiedź nie masz funkcji odczytajCiastko i zapiszCiastko.

[mateuszpi]

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 
<script type="text/javascript">
<!--
 
function zapiszCiastko(nazwa, wartosc) {
document.cookie = nazwa + "=" + escape(wartosc)
}
 
function odczytajCiastko(nazwa) { //1
if (document.cookie!="") { //2
var toCookie=document.cookie.split("; "); //3
for (i=0; i<toCookie.length; i++) { //4
 var nazwaCookie=toCookie[i].split("=")[0]; //5
 var wartoscCookie=toCookie[i].split("=")[1]; //6
 if (nazwaCookie==nazwa) return unescape(wartoscCookie) //7
}
}
}  
 
 
 
// 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);
}
 
 
function pokazUkryj(id)
{
    document.getElementById(id).style.display = (document.getElementById(id).style.display == "none") ? "block" : "none";
}
 
-->
 
</script>
[HTML] pobierz, plaintext 

czyba jednak musze poprosić o "tace" bo chyba nie dojde osobiście.

[kubarek]

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

Ten post edytował kubarek 6.04.2008, 20:28:04

[Fixer]

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 
<html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" />
 
<title>Show/Hide + cookie</title>
 
<style type="text/css">
<!--
body,td,th {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	color: #000000;
}
body {
	background-color: #FFFFFF;
	margin-left: 10px;
	margin-top: 10px;
	margin-right: 10px;
	margin-bottom: 10px;
}
a {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 12px;
	color: #FFFFFF;
}
a:link {
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	color: #FFFFFF;
}
a:hover {
	text-decoration: none;
	color: #FFFFFF;
}
a:active {
	text-decoration: none;
	color: #FFFFFF;
}
.menu_naglowek {
	background-color: #820000;
 
	PADDING-LEFT: 8px;
	PADDING-RIGHT: 8px;
	PADDING-TOP: 2px;
	PADDING-BOTTOM: 2px;
 
	FONT-FAMILY: Verdana, Tahoma;
	text-align: center;
	FONT-SIZE: 10px;
	FONT-WEIGHT: bold;
	color: #FFFFFF;
	height: 18px;
	cursor: pointer;
}
 
.menu_tresc {
	background-color: #FFFFFF;
 
	BORDER-LEFT: 1px solid #820000;
	BORDER-RIGHT: 1px solid #820000;
	BORDER-TOP: 0px solid;
	BORDER-BOTTOM: 1px solid #820000;
 
	PADDING-LEFT: 8px;
	PADDING-RIGHT: 8px;
	PADDING-TOP: 5px;
	PADDING-BOTTOM: 5px;
 
	FONT-FAMILY: Verdana, Tahoma;
	FONT-SIZE: 10px;
	COLOR: #000000;
}
-->
</style>
 
	<script language="javascript">
    function init()
    {
        var cookie = getCookie('collapse_obj');
        if(cookie)
        {
            var values = cookie.split(',');
 
            for(var i = 0; i < values.length; i++)
            {
                var itm = getItem(values[i]);
 
                if(itm)
                    itm.style.display = 'none';
            }
        }
    }
 
    function makeCookie(name, value)
    {
        var cookie = name + '=' + escape(value) + ';';
        document.cookie = cookie;
    }
 
    function getCookie(name)
    {
        if(document.cookie == '')
            return false;
 
        var firstPos;
        var lastPos;
        var cookie = document.cookie;
 
        firstPos = cookie.indexOf(name);
 
        if(firstPos != -1)
        {
            firstPos += name.length + 1;
            lastPos = cookie.indexOf(';', firstPos);
 
            if(lastPos == -1)
                lastPos = cookie.length;
 
            return unescape(cookie.substring(firstPos, lastPos));
        }
 
        else
            return false;
    }
 
    function getItem(id)
    {
        var itm = false;
        if(document.getElementById)
            itm = document.getElementById(id);
        else if(document.all)
            itm = document.all[id];
        else if(document.layers)
            itm = document.layers[id];
 
        return itm;
    }
 
    function ShowHide(id)
    {
        itm = getItem(id);
 
        if(!itm)
            return false;
 
        if(itm.style.display == 'none')
            itm.style.display = '';
        else
            itm.style.display = 'none';
 
        ////////////////////
 
        cookie = getCookie('collapse_obj');
        values = new Array();
        newval = new Array();
        add    = 1;
 
        if(cookie)
        {
            values = cookie.split(',');
 
            for(var i = 0; i < values.length; i++)
            {
                if(values[i] == id)
                    add = 0;
                else
                    newval[newval.length] = values[i];
            }
        }
 
        if(add)
            newval[newval.length] = id;
 
        makeCookie('collapse_obj', newval.join(','));
 
        return false;
    }
    </script>
 
</head>
 
<body onLoad="init()">
 
<table width="250" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="menu_naglowek" onclick="javascript:ShowHide('menu_1');"><a name="menu1" id="menu1">Menu1</a></td>
  </tr>
  <tr>
    <td class="menu_tresc">
 
    <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" id="menu_1">
      <tr>
        <td height="20">nazwa1</td>
      </tr>
      <tr>
        <td height="20">nazwa2</td>
      </tr>
    </table>
 
    </td>
  </tr>
</table>
 
<br />
<table width="250" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="menu_naglowek" onclick="javascript:ShowHide('menu_2');"><a name="menu2" id="menu2">Menu2</a></td>
  </tr>
  <tr>
    <td class="menu_tresc">
 
    <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" id="menu_2">
      <tr>
        <td height="20">nazwa1</td>
      </tr>
      <tr>
        <td height="20">nazwa2</td>
      </tr>
    </table>
 
    </td>
  </tr>
</table>
 
</body>
</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 
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" id="menu_1">
[HTML] pobierz, plaintext 

dajemy

[HTML] pobierz, plaintext 
<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 
<div id="nazwa" style="display: block;"> (zamiast block można też wpisać none dla zawartości ukrytej domyślnie)
zawartość html która będzie się pokazywać/ukrywać
</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

[DawPi]

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]

Spowodowane jest to parametrem href="#".

[HTML] pobierz, plaintext 
<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 
<a href="javascript:alert('kliknalem');">asdf</a>
[HTML] pobierz, plaintext 

, ale nawet tak się nie robi.

Ten post edytował tommy4 23.09.2008, 08:01:00