Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

> [jQuery] slideToggle with cookies
PiotrN
post
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
 
 Start new topic
Odpowiedzi
PiotrN
post
Post #2





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

Posty w temacie
- PiotrN   [jQuery] slideToggle with cookies   30.06.2010, 22:08:49
- - *OuTSideR*   Kod z demo z animacja: Kod$(document...   1.07.2010, 10:02:53
- - PiotrN   Nie działa To z demo + Twoja funkcja [HTML] pobie...   1.07.2010, 12:35:24
- - *OuTSideR*   teraz sprawdzam u siebie i wszystko dziala. Masz w...   1.07.2010, 13:55:30
- - PiotrN   Już działa. Nie zwróciłem uwagi że jest potrzebny ...   1.07.2010, 16:00:15
- - *OuTSideR*   nie zebym sie nazucal, ale jak problem uwaza sie z...   1.07.2010, 18:13:14

« Następny starszy · Po stronie przeglądarki · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 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: 15.10.2025 - 07:14
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn