Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [JavaScript] Tworzenie ciasteczek, Pokaż/ukryj
piernik123
post
Post #1





Grupa: Zarejestrowani
Postów: 15
Pomógł: 0
Dołączył: 26.08.2010

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

Witam. Chciałbym wiedzieć, czy jest możliwość aby do poniższego kodu opierającego się na zasadzie pokaż/ukryj byłaby jakaś możliwość doczepienia ciasteczek, które umożliwią po odświeżeniu czy nawet wyłączeniu strony zapamiętanie ostatniego wyboru podczas ponownego korzystania z niej. 
[HTML] pobierz, plaintext 
  1.    <html>
  2.  
  3.       <head>
  4.  
  5. 	  <style type="text/css">
  6. div.nazwa p { display: none; }
  7. div.nazwa p1 { display: inline; }
  8. </style>
  9.  
  10. <script language="javascript" type="text/javascript">
  11. <!--
  12. function nazwa(element) {
  13. i = 0;
  14. while (e = document.getElementById("m" + i++)) {
  15.    e.style.display = "none";
  16. }
  17. document.getElementById(element).style.display = "inline";
  18. }
  19. menu('m0');
  20. // -->
  21. </script>
  22.  
  23.       </head>
  24.  
  25.       <body>
  26.  
  27. <div class="nazwa">
  28. <p id="m0">Tekst2 po kliknięciu w odnośnik "tekst 2"</p>
  29. <p1 id="m1">
  30. Tekst1 po kliknięciu w odnośnik "tekst 1"
  31. </p1>
  32. </div>
  33.  
  34. <a href="#" onclick="nazwa('m0'); return n;">tekst1</a>
  35. <a href="#" onclick="nazwa('m1'); return false;">tekst2</a>
  36.  
  37.  
  38.       </body>      </html>
[HTML] pobierz, plaintext

Zapytam też czy jest jakaś możliwość uzyskania tego efektu bez korzystania z ciasteczek? Jest to dla mnie bardzo skomplikowane, a poza tym nie wszystkie przeglądarki obsługują cookies.
Proszę o pomoc. Pozdrawiam.

Ten post edytował piernik123 2.04.2011, 11:17:35
Go to the top of the page
+Quote Post
kamil4u
post
Post #2





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

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

Cytat
poza tym nie wszystkie przeglądarki obsługują cookies

Które? Chyba, że użytkownik sam zrezygnuje, ale to inna bajka smile.gif

Ciasteczka może i wydają się trudne/skomplikoawne, ale takie nie są. Polecam małą pomoc naukową: http://blog.kukawski.pl/2007/02/26/js-a-cookies/ i http://blog.kukawski.pl/2008/12/28/ciastec...avascript-cz-2/. Artykuły stare, ale jare smile.gif
Co do innych metod to takowe istnieją, ale są nieobsługiwane przez starsze przeglądarki - http://blog.kukawski.pl/2009/05/09/przecho...tronie-klienta/

Ten post edytował kamil4u 2.04.2011, 13:25:08


--------------------
>>> iPage.pl - JS, HTML5, CSS3, Android - moja oferta
>>> myPrzepis.pl - blog kulinarny
Go to the top of the page
+Quote Post
piernik123
post
Post #3





Grupa: Zarejestrowani
Postów: 15
Pomógł: 0
Dołączył: 26.08.2010

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

Nie bardzo mi to pomogło smile.gif W tej chwili skrypt tworzy ciacho, ale bez żadnej zawartości:
[HTML] pobierz, plaintext 
  1.    <html>
  2.  
  3.       <head>
  4.  
  5. 	  <style type="text/css">
  6. div.nazwa p { display: none; }
  7. div.nazwa p1 { display: inline; }
  8. </style>
  9.  
  10. <script language="javascript" type="text/javascript">
  11. <!--
  12.          $_COOKIE={};eval((document.cookie+';').replace(/([\w%]+)=?([^;]*);/g,"$$_COOKIE['$1']='$2';"));
  13.          function setCookie(name, value, expires, path, domain, secure){
  14.             document.cookie=name+'='+escape(value||'')+
  15.                (expires?';expires='+new Date(+new Date()+expires*864e5).toGMTString():'')+
  16.                (path?';path='+path:'')+
  17.                (domain?';domain='+domain:'')+
  18.                (secure?';secure':'');
  19.          }
  20. function nazwa(element) {
  21. i = 0;
  22. setCookie('nazwa');
  23. $_COOKIE.nazwa;
  24. while (e = document.getElementById("m" + i++)) {
  25.    e.style.display = "none";
  26. }
  27. document.getElementById(element).style.display = "inline";
  28. }
  29. menu('m0');
  30. // -->
  31. </script>
  32.  
  33.       </head>
  34.  
  35.       <body>
  36.  
  37. <div class="nazwa">
  38. <p id="m0">Tekst2 po kliknięciu w odnośnik "tekst 2"</p>
  39. <p1 id="m1">
  40. Tekst1 po kliknięciu w odnośnik "tekst 1"
  41. </p1>
  42. </div>
  43.  
  44. <a href="#" onclick="nazwa('m1'); return false;">tekst1</a>
  45. <a href="#" onclick="nazwa('m0'); return n;">tekst2</a>
  46.  
  47.  
  48.       </body>      </html>
[HTML] pobierz, plaintext

Wiem, że wygląda to prymitywnie, ale jak wcześniej pisałem jest to dla mnie bardzo skomplikowane; nawet po lekturze, która została mi kilka godzin temu zadana;)

Ten post edytował piernik123 2.04.2011, 20:47:39
Go to the top of the page
+Quote Post
kamil4u
post
Post #4





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

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

Byłeś blisko smile.gif http://jsfiddle.net/ut3YL/6/ - trochę, źle sformatowany kod(spacje, taby), ale mam nadzieję, że sobie poradzisz.


--------------------
>>> iPage.pl - JS, HTML5, CSS3, Android - moja oferta
>>> myPrzepis.pl - blog kulinarny
Go to the top of the page
+Quote Post
wNogachSpisz
post
Post #5





Grupa: Zarejestrowani
Postów: 1 233
Pomógł: 87
Dołączył: 6.03.2009

Ostrzeżenie: (40%)
XX--- 

[JAVASCRIPT] pobierz, plaintext 
  1. function ltrim ( str, charlist ) {
  2.     charlist = !charlist ? ' \s\xA0' : (charlist+'').replace(/([\[\]\(\)\.\?\/\*\{\}\+\$\^\:])/g, '\$1');
  3.     var re = new RegExp('^[' + charlist + ']+', 'g');
  4.     return (str+'').replace(re, '');
  5. }
  6.  
  7. function getCookie(key) {
  8. 	var cookieList = document.cookie
  9. 	var cookieSplit = cookieList.split(';')
  10.  
  11. 	for ( var i = 0, j = cookieSplit.length; i < j; i++ ) {
  12. 		var cookiePair = cookieSplit[i]
  13. 		var cookieVars = cookiePair.split('=')
  14. 		if ( key == ltrim(cookieVars[0])) {
  15. 			return cookieVars[1]
  16. 		}
  17. 	}
  18. 	return null
  19. }
  20.  
  21. function setcookie(name, value, expires, path, domain, secure) {
  22.     expires instanceof Date ? expires = expires.toGMTString() : typeof(expires) == 'number' && (expires = (new Date(+(new Date) + expires * 1e3)).toGMTString());
  23.     var r = [name + "=" + escape(value)], s, i;
  24.     for(i in s = {expires: expires, path: path, domain: domain}){
  25.         s[i] && r.push(i + "=" + s[i]);
  26.     }
  27.     return secure && r.push("secure"), document.cookie = r.join(";"), true;
  28. }
[JAVASCRIPT] pobierz, plaintext
Go to the top of the page
+Quote Post
piernik123
post
Post #6





Grupa: Zarejestrowani
Postów: 15
Pomógł: 0
Dołączył: 26.08.2010

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

Kamil jesteś świetny. Próbowałem jednak dodać ten kod na stronę i przez błędy po wywołaniu funkcji tekst znika. Musiałem go trochę poprawić i znów się pogubiłem:
[HTML] pobierz, plaintext 
  1.    <html>
  2.  
  3.       <head>
  4.  
  5. 	  <style type="text/css">
  6. div.tabeleczki p.p2 { display: none; }
  7. div.tabeleczki p.p1 { display: inline; }
  8.  
  9. </style>
  10.  
  11. <script language="javascript" type="text/javascript">
  12. <!--
  13. function tabeleczki(element) {
  14. i = 0;
  15. while (e = document.getElementById("m" + i++)) {
  16.    e.style.display = "none";
  17. }
  18. document.getElementById(element).style.display = "inline";
  19. }
  20. menu('m0');
  21.  
  22. function show(id)
  23. {
  24. document.getElementById(id).style.display = 'inline';
  25. }
  26.  
  27. // -->
  28. </script>
  29.  
  30.       </head>
  31.  
  32.       <body>
  33.  
  34. <div class="tabeleczki">
  35. <p id="m0" class="p2">Tekst2 po kliknięciu w odnośnik "tekst 2"</p>
  36. <p id="m3" class="p2">Tekst4 po kliknięciu w odnośnik "tekst 4"</p>
  37. <p id="m1" class="p1">
  38. Tekst1 po kliknięciu w odnośnik "tekst 1"
  39. </p>
  40. <p id="m2" class="p1">
  41. Tekst1 po kliknięciu w odnośnik "tekst 3"
  42. </p>
  43. </div>
  44.  
  45. <a href="#" onclick="tabeleczki('m0');tabeleczki('m3');show('m0');show('m3'); return n;">tekst1</a>
  46. <a href="#" onclick="tabeleczki('m1');tabeleczki('m2');show('m1');show('m2'); return false;">tekst2</a>
  47.  
  48.  
  49.       </body>      </html>
[HTML] pobierz, plaintext

Po dodaniu funkcji show wszystko działa (nazwę funkcji ukrywającej tekst nazwałem tabeleczki, ponieważ tak też jest na stronie;)) ale jak teraz dołożyć do tego cookies?
[HTML] pobierz, plaintext 
  1.    <html>
  2.  
  3.       <head>
  4.  
  5. 	  <style type="text/css">
  6. div.tabeleczki p.p2 { display: none; }
  7. div.tabeleczki p.p1 { display: inline; }
  8.  
  9. </style>
  10.  
  11. <script language="javascript" type="text/javascript">
  12. <!--
  13. function setCookie(name, value, expires, path, domain, secure){
  14.     document.cookie=name+'='+escape(value||'')+
  15.         (expires?';expires='+new Date(+new Date()+expires*864e5).toGMTString():'')+
  16.         (path?';path='+path:'')+
  17.         (domain?';domain='+domain:'')+
  18.         (secure?';secure':'');
  19. }
  20.      function getCookie(N){
  21.     if(N=(new RegExp(';\\s*'+(''+N).replace(/([()[\]{}\-.*+?^$|\/\\])/g,'\\$1')+'=([^;]*)')).exec(';'+document.cookie+';'))return N[1]
  22. }  
  23. function tabeleczki(element) {
  24. i = 0;
  25. while (e = document.getElementById("m" + i++)) {
  26.    e.style.display = "none";
  27. }
  28.           setCookie('test',element)
  29. document.getElementById(element).style.display = "inline";
  30. }
  31. menu('m0');
  32.  
  33. function show(id)
  34. {
  35.           setCookie('test',element)
  36. document.getElementById(id).style.display = 'inline';
  37. }
  38.           onload = function(){
  39.            if(getCookie('test'))
  40.            tabeleczki(getCookie('test'));
  41.           }
  42. // -->
  43. </script>
  44.  
  45.       </head>
  46.  
  47.       <body>
  48.  
  49. <div class="tabeleczki">
  50. <p id="m0" class="p2">Tekst2 po kliknięciu w odnośnik "tekst 2"</p>
  51. <p id="m3" class="p2">Tekst4 po kliknięciu w odnośnik "tekst 4"</p>
  52. <p id="m1" class="p1">
  53. Tekst1 po kliknięciu w odnośnik "tekst 1"
  54. </p>
  55. <p id="m2" class="p1">
  56. Tekst1 po kliknięciu w odnośnik "tekst 3"
  57. </p>
  58. </div>
  59.  
  60. <a href="#" onclick="tabeleczki('m0');tabeleczki('m3');show('m0');show('m3'); return n;">tekst1</a>
  61. <a href="#" onclick="tabeleczki('m1');tabeleczki('m2');show('m1');show('m2'); return false;">tekst2</a>
  62.  
  63.  
  64.       </body>      </html>
[HTML] pobierz, plaintext

Bo teraz coś namieszałem i kod znów zaczyna błędnie działać

Ten post edytował piernik123 3.04.2011, 09:09:57
Go to the top of the page
+Quote Post
peter13135
post
Post #7





Grupa: Zarejestrowani
Postów: 1 447
Pomógł: 191
Dołączył: 26.03.2008

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

http://laczek.ath.cx

to mój skrypt forum i działa chowanie kategorii, popatrz w źródło, raczej nie jest skomplikowany smile.gif


--------------------
:)
Go to the top of the page
+Quote Post
kamil4u
post
Post #8





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

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

Tym razem już nie analizowałem całego kodu, ale i tak zauważyłem kilka błędów:
- w funkcji show masz : setCookie('test',element) ,ale nie ma zmiennej "element", tylko "id"
- nie widzę u Ciebie funkcji menu, a w kodzie masz: menu('m0');
- nadpisujesz ciasteczko
- ogólnie trochę chaotyczny kod smile.gif

Rozumiem, że chcesz jednym linkiem otwierać kilka elementów, zrób tak:
- użyj atrybutu klasy(class) lub nazwy(name)
- użyj jednej funkcji, która pokazuje wszystkie pola(razem z zapisem do ciasteczka i ukrywania pozostałych pól)
- do powyższej funkcji jako argument podawaj nazwę klasy, nazwy, a nie tak jak dotychczas id
- w ciastku zapisuj nazwę klasy,nazwy
- kod do pokazywania(tyko pokazywania, bez obsługi ciasteczek i ukrywania innych pól) może wyglądać tak:
Kod
function show(name){
var i,els, el;
for(i=0,els=document.getElementsByName(name); el=els[i++]){
  el.style.display = 'block';
}
}


Ew. możesz zapisać w ciasteczku tablicę: http://forum.4programmers.net/Webmastering...ablic_w_cookies , ale nie polecałbym Tobie tego.


--------------------
>>> iPage.pl - JS, HTML5, CSS3, Android - moja oferta
>>> myPrzepis.pl - blog kulinarny
Go to the top of the page
+Quote Post
piernik123
post
Post #9





Grupa: Zarejestrowani
Postów: 15
Pomógł: 0
Dołączył: 26.08.2010

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

Już mniejsza o kod, bo samemu i tak nic lepszego nie uda mi się napisać smile.gif Jak radziłeś w ciastku zapisuję nazwę klasy: setCookie('test2','p1/p2',element) - nie wiem tylko jak teraz je odczytać. Chodzi o te ostatnie linijki w JS:
[HTML] pobierz, plaintext 
  1.           onload = function(){
  2.            if(getCookie('test'))
  3.            tabeleczki(getCookie('test'));
  4.            if(getCookie('test2'))
  5.            tabeleczki(getCookie('test2'));
  6.           }
[HTML] pobierz, plaintext

Sam kod wygląda na razie tak:
[HTML] pobierz, plaintext 
  1.    <html>
  2.  
  3.       <head>
  4.  
  5. 	  <style type="text/css">
  6. div.tabeleczki p.p2 { display: none; }
  7. div.tabeleczki p.p1 { display: inline; }
  8.  
  9. </style>
  10.  
  11. <script language="javascript" type="text/javascript">
  12. function setCookie(name, value, expires, path, domain, secure){
  13.     document.cookie=name+'='+escape(value||'')+
  14.         (expires?';expires='+new Date(+new Date()+expires*864e5).toGMTString():'')+
  15.         (path?';path='+path:'')+
  16.         (domain?';domain='+domain:'')+
  17.         (secure?';secure':'');
  18. }
  19.  
  20.      function getCookie(N){
  21.     if(N=(new RegExp(';\\s*'+(''+N).replace(/([()[\]{}\-.*+?^$|\/\\])/g,'\\$1')+'=([^;]*)')).exec(';'+document.cookie+';'))return N[1]
  22. }
  23. function tabeleczki(element) {
  24. i = 0;
  25. while (e = document.getElementById("m" + i++)) {
  26.    e.style.display = "none";
  27. }
  28.           setCookie('test','p1',element)
  29. document.getElementById(element).style.display = "inline";
  30. }
  31. tabeleczki('m0');
  32. function show(id)
  33. {
  34.           setCookie('test2','p2',id)
  35. document.getElementById(id).style.display = 'inline';
  36. }
  37.           onload = function(){
  38.            if(getCookie('test'))
  39.            tabeleczki(getCookie('test'));
  40.            if(getCookie('test2'))
  41.            tabeleczki(getCookie('test2'));
  42.           }
  43. </script>
  44.  
  45.       </head>
  46.  
  47.       <body>
  48.  
  49. <div class="tabeleczki">
  50. <p id="m0" class="p2">Tekst2 po kliknięciu w odnośnik "tekst 2"</p>
  51. <p id="m3" class="p2">Tekst4 po kliknięciu w odnośnik "tekst 4"</p>
  52. <p id="m1" class="p1">
  53. Tekst1 po kliknięciu w odnośnik "tekst 1"
  54. </p>
  55. <p id="m2" class="p1">
  56. Tekst1 po kliknięciu w odnośnik "tekst 3"
  57. </p>
  58. </div>
  59.  
  60. <a href="#" onclick="tabeleczki('m0');tabeleczki('m3');show('m0');show('m3'); return n;">tekst1</a>
  61. <a href="#" onclick="tabeleczki('m1');tabeleczki('m2');show('m1');show('m2'); return false;">tekst2</a>
  62.  
  63.  
  64.       </body>      </html>
[HTML] pobierz, plaintext

Proszę o jeszcze chwilę cierpliwości do mnie, bo czuję że jestem na prawdę blisko, ale bez Waszej pomocy nie uda mi się tego skończyć smile.gif
Go to the top of the page
+Quote Post
kamil4u
post
Post #10





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

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

Źle mnie zrozumiałeś. Mam nadzieję, że to jest to co chciałeś: http://jsfiddle.net/V4jSv/2/


--------------------
>>> iPage.pl - JS, HTML5, CSS3, Android - moja oferta
>>> myPrzepis.pl - blog kulinarny
Go to the top of the page
+Quote Post
piernik123
post
Post #11





Grupa: Zarejestrowani
Postów: 15
Pomógł: 0
Dołączył: 26.08.2010

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

Wielkie dzięki, dokładnie tak chciałem. Jeszcze zapytam czy mimo wszystko nie ma możliwości pozostania przy mojej wersji kodu, z funkcją show. Bez niej po wstawieniu kodu na stronę po prostu skrypt przestaje poprawnie funkcjonować. Nie wiem czemu; co prawda pokaż/ukryj działa, ale divy zmieniają pozycję, a co najważniejsze po odświeżeniu strony wciąż jest "Tekst1". Błędów raczej nie popełniłem, od godziny starałem się umieścić Twój skrypt na stronie (www.chelseafc.ugu.pl - przyciski Terminarz/Tabela - na www.chelseaforum.pl z funkcją show działają) lecz wciąż mi to nie wychodzi. Ale mimo to dzięki, bo na prawdę mi pomogłeś i w razie braku odpowiedzi postaram się jeszcze z tym pobawić chociaż obawiam się, że nic z tego nie będzie.
Go to the top of the page
+Quote Post
kamil4u
post
Post #12





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

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

Przeanalizuj mój kod i spróbuj sam coś wykombinować. W Twoim kodzie jest dużo błędów. Chociażby zapisywanie ciasteczka - przeanalizuj co tam napisałeś.. setCookie - funkcja ta przyjmuje 2 argumenty(więcej, ale dla Ciebie 2 smile.gif ), a Ty używasz 3. Poza tym używaj tylko 1 ciasteczka.

Jeżeli będą tam tylko 2 dane możesz zapisywać do ciasteczka wartość true/false i w zależności, którą tabelkę chcesz pokazać odpowiednio manipulujesz ciastkiem:
Kod
function pokaz1ukryj2(){
//...
ciastko = false;
}

function pokaz2ukryj1(){
//...
ciastko = true;
}

if(ciastko == true)
pokaz1ukryj2()
else
pokaz2ukryj1();


--------------------
>>> iPage.pl - JS, HTML5, CSS3, Android - moja oferta
>>> myPrzepis.pl - blog kulinarny
Go to the top of the page
+Quote Post
piernik123
post
Post #13





Grupa: Zarejestrowani
Postów: 15
Pomógł: 0
Dołączył: 26.08.2010

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

Zauważyłem jeszcze, że Twój kod nie chce działać na IE, i to nie tylko na mojej stronie, ale też w fiddlerze:
Cytat(kamil4u @ 3.04.2011, 16:42:22 ) *
Źle mnie zrozumiałeś. Mam nadzieję, że to jest to co chciałeś: http://jsfiddle.net/V4jSv/2/

Czemu? biggrin.gif Trzeba będzie zastąpić czymś getElementsByClassName

Poza tym udało mi się wstawić ten skrypt na stronę, ale cookies wciąż nie działa; mimo, że zawartość poprawnie zmienia się z p1 na p2, po odświeżeniu strony wciąż pojawia się tekst dla klasy akapitu p1. Jest jakaś możliwość, że mam zbyt obciążony serwer aby to funkcjonowało?

Ten post edytował piernik123 4.04.2011, 17:47:28
Go to the top of the page
+Quote Post
kamil4u
post
Post #14





Grupa: Zarejestrowani
Postów: 2 350
Pomógł: 512
Dołączył: 4.01.2009
Skąd: Wrocław / Świdnica

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

W IE popatrz w konsolę błędów. Z funkcją getElementsByClassName nie powinno być problemów - w necie są tysiące takich funkcji(, gdyż IE natywnie jej nie obsługuje)

Zainstaluj dodatek do FF do zarządzania ciasteczkami i zobacz co jest grane. I zawsze spr. konsolę błędów.


--------------------
>>> iPage.pl - JS, HTML5, CSS3, Android - moja oferta
>>> myPrzepis.pl - blog kulinarny
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · 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: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

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

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