Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jQuery] slideToggle with cookies
Forum PHP.pl > Forum > Po stronie przeglądarki
PiotrN
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:
  1. <script type="text/javascript">
  2. $(document).ready(function() {
  3. $("p").hide();
  4. $("h2").click(function() {
  5. $("p").slideToggle("slow");
  6. });
  7. });
  8. </script>
outsider
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.
PiotrN
Nie działa

To z demo + Twoja funkcja
  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. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  4. <title>Without Cookies</title>
  5. <script type="text/javascript" language="javascript" src="jquery-1.2.3.min.js"></script>
  6. <script type="text/javascript" language="javascript">
  7. $(document).ready(function() {
  8. // LEFT COLUMN:
  9. // When the collapse button is clicked:
  10. $('.collapseLeft').click(function() {
  11. $('.collapseLeft').css("display","none");
  12. $('.expandLeft').css("display","block");
  13. $('#leftCol').animate( {height:"20px"}, {duration:400} );
  14. });
  15. // When the expand button is clicked:
  16. $('.expandLeft').click(function() {
  17. $('.expandLeft').css("display","none");
  18. $('.collapseLeft').css("display","block");
  19. $('#leftCol').animate( {height:"500px"}, {duration:500} );
  20. });
  21. // RIGHT COLUMN:
  22. // When the collapse button is clicked:
  23. $('.collapseRight').click(function() {
  24. $('.collapseRight').css("display","none");
  25. $('.expandRight').css("display","block");
  26. $('#rightCol').animate( {height:"20px"}, {duration:400} );
  27. });
  28. // When the expand button is clicked:
  29. $('.expandRight').click(function() {
  30. $('.expandRight').css("display","none");
  31. $('.collapseRight').css("display","block");
  32. $('#rightCol').animate( {height:"500px"}, {duration:500} );
  33. });
  34. });
  35. body {
  36. background-color:#444444;
  37. position:relative;
  38. }
  39. #page {
  40. width:500px;
  41. margin:0 auto;
  42. text-align:center;
  43. background-color:#222222;
  44. padding:1px;
  45. }
  46. #leftCol {
  47. width:149px;
  48. margin-right:1px;
  49. height:500px;
  50. float:left;
  51. background-color:#666666;
  52. position:relative;
  53. }
  54. #rightCol {
  55. width:350px;
  56. height:500px;
  57. float:left;
  58. background-color:#333333;
  59. position:relative;
  60. }
  61. .expandLeft, .expandRight {
  62. width:11px;
  63. height:11px;
  64. background:url(http://www.shopdev.co.uk/blog/expand.gif) no-repeat;
  65. position:absolute;
  66. right:5px;
  67. top:4px;
  68. display:none;
  69. }
  70. .collapseLeft, .collapseRight {
  71. width:11px;
  72. height:11px;
  73. background:url(http://www.shopdev.co.uk/blog/collapse.gif) no-repeat;
  74. position:absolute;
  75. right:5px;
  76. top:4px;
  77. }
  78. </head>
  79.  
  80. <div id="page">
  81. <div id="leftCol">
  82. <div class="collapseLeft"></div>
  83. <div class="expandLeft"></div>
  84. </div>
  85. <div id="rightCol">
  86. <div class="collapseRight"></div>
  87. <div class="expandRight"></div>
  88. </div>
  89. <br clear="all" />
  90. </div>
  91. </body>
  92. </html>
outsider
teraz sprawdzam u siebie i wszystko dziala. Masz w ogole jquery-1.2.3.min.js w folderze w ktorym masz powyzszy plik ?
PiotrN
Już działa.
Nie zwróciłem uwagi że jest potrzebny plik jquery-1.2.3.min.js.
Dzięki *OuTSideR*.
outsider
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
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.