Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [jQuery] slideToggle with cookies
PiotrN
post 30.06.2010, 22:08:49
Post #1





Grupa: Zarejestrowani
Postów: 73
Pomógł: 0
Dołączył: 8.05.2010

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

Znalazłem:
http://www.shopdev.co.uk/blog/cookies-with...psible-layouts/

Demo:
http://www.shopdev.co.uk/blog/jquery-witho...okies-demo.html

Tylko problem w tym że ja chcę aby to się rozwijało tak jak w slideToggle (jQuery) - z animacją.

Wiem że w komentarzach coś jest, ale dla mnie niezbyt jasne.

Może mi ktoś pomóc?

Chciałbym mieć ten kod jQuery slideToggle z ciasteczkami:
[HTML] pobierz, plaintext 
  1. <script type="text/javascript"> 
  2. $(document).ready(function() {
  3.         $("p").hide();
  4.         $("h2").click(function() {
  5.                 $("p").slideToggle("slow");
  6.         });
  7. });
  8. </script> 
[HTML] pobierz, plaintext


Ten post edytował PiotrN 30.06.2010, 22:18:09
Go to the top of the page
+Quote Post
outsider
post 1.07.2010, 10:02:53
Post #2





Grupa: Zarejestrowani
Postów: 267
Pomógł: 36
Dołączył: 8.08.2008

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

Kod z demo z animacja:

Kod
$(document).ready(function() {
// LEFT COLUMN:
    // When the collapse button is clicked:
    $('.collapseLeft').click(function() {
        $('.collapseLeft').css("display","none");
        $('.expandLeft').css("display","block");
        $('#leftCol').animate( {height:"20px"},  {duration:400} );
    });
    // When the expand button is clicked:
    $('.expandLeft').click(function() {
        $('.expandLeft').css("display","none");
        $('.collapseLeft').css("display","block");
        $('#leftCol').animate( {height:"500px"},  {duration:500} );
    });
// RIGHT COLUMN:
    // When the collapse button is clicked:
    $('.collapseRight').click(function() {
        $('.collapseRight').css("display","none");
        $('.expandRight').css("display","block");
        $('#rightCol').animate( {height:"20px"},  {duration:400} );
    });
    // When the expand button is clicked:
    $('.expandRight').click(function() {
        $('.expandRight').css("display","none");
        $('.collapseRight').css("display","block");
        $('#rightCol').animate( {height:"500px"},  {duration:500} );
    });
});


W tym pierwszym linku masz gotowy kod z ciasteczkami, co za problem skopiowac i zmienic nazwy elemtow jesli masz inne ? Jak juz to wklej swoj kod.

Ten post edytował *OuTSideR* 1.07.2010, 10:05:59
Go to the top of the page
+Quote Post
PiotrN
post 1.07.2010, 12:35:24
Post #3





Grupa: Zarejestrowani
Postów: 73
Pomógł: 0
Dołączył: 8.05.2010

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

Nie działa

To z demo + Twoja funkcja
[HTML] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Without Cookies</title>
  6. <script type="text/javascript" language="javascript" src="jquery-1.2.3.min.js"></script>
  7. <script type="text/javascript" language="javascript"> 
  8. $(document).ready(function() {
  9. // LEFT COLUMN:
  10.     // When the collapse button is clicked:
  11.     $('.collapseLeft').click(function() {
  12.         $('.collapseLeft').css("display","none");
  13.         $('.expandLeft').css("display","block");
  14.         $('#leftCol').animate( {height:"20px"},  {duration:400} );
  15.     });
  16.     // When the expand button is clicked:
  17.     $('.expandLeft').click(function() {
  18.         $('.expandLeft').css("display","none");
  19.         $('.collapseLeft').css("display","block");
  20.         $('#leftCol').animate( {height:"500px"},  {duration:500} );
  21.     });
  22. // RIGHT COLUMN:
  23.     // When the collapse button is clicked:
  24.     $('.collapseRight').click(function() {
  25.         $('.collapseRight').css("display","none");
  26.         $('.expandRight').css("display","block");
  27.         $('#rightCol').animate( {height:"20px"},  {duration:400} );
  28.     });
  29.     // When the expand button is clicked:
  30.     $('.expandRight').click(function() {
  31.         $('.expandRight').css("display","none");
  32.         $('.collapseRight').css("display","block");
  33.         $('#rightCol').animate( {height:"500px"},  {duration:500} );
  34.     });
  35. });
  36. </script>
  37. <style> 
  38. body {
  39. 	background-color:#444444;
  40. 	position:relative;
  41. }
  42. #page {
  43. 	width:500px;
  44. 	margin:0 auto;
  45. 	text-align:center;
  46. 	background-color:#222222;
  47. 	padding:1px;
  48. }
  49. #leftCol {
  50. 	width:149px;
  51. 	margin-right:1px;
  52. 	height:500px;
  53. 	float:left;
  54. 	background-color:#666666;
  55. 	position:relative;
  56. }
  57. #rightCol {
  58. 	width:350px;
  59. 	height:500px;
  60. 	float:left;
  61. 	background-color:#333333;
  62. 	position:relative;
  63. }
  64. .expandLeft, .expandRight {
  65. 	width:11px; 
  66. 	height:11px;
  67. 	background:url(http://www.shopdev.co.uk/blog/expand.gif) no-repeat;
  68. 	position:absolute;
  69. 	right:5px;
  70. 	top:4px;
  71. 	display:none;
  72. }
  73. .collapseLeft, .collapseRight {
  74. 	width:11px; 
  75. 	height:11px;
  76. 	background:url(http://www.shopdev.co.uk/blog/collapse.gif) no-repeat;
  77. 	position:absolute;
  78. 	right:5px;
  79. 	top:4px;
  80. }
  81. </style>
  82. </head>
  83.  
  84. <body>
  85.     <div id="page">
  86.         <div id="leftCol">
  87.         <div class="collapseLeft"></div>
  88.         <div class="expandLeft"></div>
  89.         </div>
  90.         <div id="rightCol">
  91.         <div class="collapseRight"></div>
  92.         <div class="expandRight"></div>
  93.         </div>
  94.         <br clear="all" />
  95.     </div>
  96. </body>
  97. </html>
[HTML] pobierz, plaintext
Go to the top of the page
+Quote Post
outsider
post 1.07.2010, 13:55:30
Post #4





Grupa: Zarejestrowani
Postów: 267
Pomógł: 36
Dołączył: 8.08.2008

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

teraz sprawdzam u siebie i wszystko dziala. Masz w ogole jquery-1.2.3.min.js w folderze w ktorym masz powyzszy plik ?
Go to the top of the page
+Quote Post
PiotrN
post 1.07.2010, 16:00:15
Post #5





Grupa: Zarejestrowani
Postów: 73
Pomógł: 0
Dołączył: 8.05.2010

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

Już działa.
Nie zwróciłem uwagi że jest potrzebny plik jquery-1.2.3.min.js.
Dzięki *OuTSideR*.

Ten post edytował PiotrN 1.07.2010, 16:06:05
Go to the top of the page
+Quote Post
outsider
post 1.07.2010, 18:13:14
Post #6





Grupa: Zarejestrowani
Postów: 267
Pomógł: 36
Dołączył: 8.08.2008

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

nie zebym sie nazucal, ale jak problem uwaza sie za zamkniety to zeby bylo to widoczne klikasz na "pomogl" osobie ktora pomogla smile.gif

http://forum.php.pl/index.php?act=announce&f=14&id=4
Go to the top of the page
+Quote Post
« Następny starszy · Po stronie przeglądarki · 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 Wersja Lo-Fi Aktualny czas: 7.06.2024 - 05:51
Powered By IP.Board © 2024  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn