Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    Regular Coder
    Join Date
    Dec 2008
    Posts
    117
    Thanks
    14
    Thanked 0 Times in 0 Posts

    jquery: cookie with collapsible menu

    Hi,

    I have different sets of list collapsible menu, ideally if a certain set is contracted then the cookie of that set list will be stored and it stays closed when you next visit or go to other pages.

    This is the code I modified from here http://ifohdesigns.com/blog/tutorial...e-with-cookies

    But the problem is all sets of menu will stay closed even if it is only a set is being clicked!

    Code:
    $("#menu_side h2").click(function(){
    
    	if ($(this).next().is(":hidden")) {
    	
    		$(this).next().slideDown("slow");
    		$(this).find("img").attr({src: "img_layout/bullet_expanded.png"});
    		$.cookie('showTop', 'collapsed');
    		return false;
    	
    	} else {
    	
    		$(this).next().slideUp("slow");
    		$(this).find("img").attr({src: "img_layout/bullet_contracted.png"});
    		$.cookie('showTop', 'expanded');
    		return false;
    	
    	}
      
    });
    
    
    // COOKIES
    var cookie = $.cookie('showTop');
    if (cookie == 'collapsed') {
    	 $("#menu_side h2").next().show("fast");
    	 $("#menu_side h2").find("img").attr({src: "img_layout/bullet_expanded.png"});
    }else {
    	$("#menu_side h2").next().hide("fast");
    	$("#menu_side h2").find("img").attr({src: "img_layout/bullet_contracted.png"});
    }
    How can I fix it...? it must be this bit is not correct??

    Code:
    // COOKIES
    var cookie = $.cookie('showTop');
    if (cookie == 'collapsed') {
    	 $("#menu_side h2").next().show("fast");
    	 $("#menu_side h2").find("img").attr({src: "img_layout/bullet_expanded.png"});
    }else {
    	$("#menu_side h2").next().hide("fast");
    	$("#menu_side h2").find("img").attr({src: "img_layout/bullet_contracted.png"});
    this is the html,

    Code:
    <div id="menu_side" class="right">
            <h2><a href="#"><img src="img_layout/bullet_expanded.png" title="bullet" alt="bullet" /></a> Comparative Areas</h2>
            <ul>
                <li><a href="#">GF 0: Visual Index  &laquo;</a></li>
                <li><a href="#">GF 1: Antarctica and Outsplay</a></li>
                <li><a href="#">GF 2: North West Atlantic & Pacific</a></li>
                <li class="last"><a href="#">GF 3: To the Tropics: North</a></li>
            </ul>
            
            <h2><a href="#"><img src="img_layout/bullet_expanded.png" title="bullet" alt="bullet" /></a> GF Tech (Ocean Earth)</h2>
            <ul>
                <li><a href="#">GF Tech 1: Water-Based Energy</a></li>
                <li><a href="#">GF Tech 2: Water Cycles Buildup</a></li>
                <li><a href="#">GF Tech 3: Return to Food Chain</a></li>
                <li class="last"><a href="#">GF Tech 4: Sediment Extraction</a></li>
            </ul>
            
            <h2><a href="#"><img src="img_layout/bullet_expanded.png" title="bullet" alt="bullet" /></a> Controversies</h2>
            <ul>
                <li><a href="#">Global Warming</a></li>
                <li><a href="#">Nuclear Power</a></li>
                <li><a href="#">Science Errors</a></li>
                <li><a href="#">River Damage</a></li>
                <li><a href="#">Ecological Taxes</a></li>        
            </ul class="last">
            
            <h2><a href="#"><img src="img_layout/bullet_expanded.png" title="bullet" alt="bullet" /></a> Applications</h2>
            <ul>
                <li><a href="#">Europe</a></li>
                <li><a href="#">Africa</a></li>
                <li><a href="#">East Asia </a></li>     
            </ul class="last">
            
            
            </div>
    this is the test site to see how it works...
    http://lauthiamkok.net/tmp/projects/globalfeed/home

    Let me know if u have any ideas... thanks!

    Best,
    Lau

  • #2
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    The accordions open and close fine here. None of your links point off-page so there's no way to test whether the open/close status works across pages.
    Are you a Help Vampire?

  • #3
    Regular Coder
    Join Date
    Dec 2008
    Posts
    117
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by tomws View Post
    The accordions open and close fine here. None of your links point off-page so there's no way to test whether the open/close status works across pages.
    hi, if u click on one of the set lists and refresh your browser then you can see how the cookie works ... thanks

  • #4
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    You're only setting a cookie with one value and using that one value to control all accordions. If you want to maintain the individual accordions' state, you're going to need to store several values or several cookies.
    Are you a Help Vampire?

  • #5
    Regular Coder
    Join Date
    Dec 2008
    Posts
    117
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by tomws View Post
    You're only setting a cookie with one value and using that one value to control all accordions. If you want to maintain the individual accordions' state, you're going to need to store several values or several cookies.
    oh i see! any starting point which I can modify code below further? (I assume this is the code I should make to store several values...?)

    Code:
    // COOKIES
    var cookie = $.cookie('showTop');
    if (cookie == 'collapsed') {
    	 $("#menu_side h2").next().show("fast");
    	 $("#menu_side h2").find("img").attr({src: "img_layout/bullet_expanded.png"});
    }else {
    	$("#menu_side h2").next().hide("fast");
    	$("#menu_side h2").find("img").attr({src: "img_layout/bullet_contracted.png"});
    thanks

  • #6
    Senior Coder tomws's Avatar
    Join Date
    Nov 2007
    Location
    Arkansas
    Posts
    2,644
    Thanks
    29
    Thanked 330 Times in 326 Posts
    That part is just opening/closing based upon the cookie value. You'll want to modify the cookie-setting part. I think it's in this function:
    Code:
    $("#menu_side h2").click(function(){
    I can't help with how to set multiple values since I've not done that myself. A quick glance at the documentation suggests that it needs to be one value per cookie, so the multiple cookie route may be necessary.

    Also, glancing again at that code, you're going to need to further modify it because you're only acting on the h2 elements as a whole rather than on individual h2 elements. Setting an id for each would be an easy way to address each, and then you can store and retrieve the status of each quite easily.
    Are you a Help Vampire?

  • #7
    Regular Coder
    Join Date
    Dec 2008
    Posts
    117
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by tomws View Post
    That part is just opening/closing based upon the cookie value. You'll want to modify the cookie-setting part. I think it's in this function:
    Code:
    $("#menu_side h2").click(function(){
    I can't help with how to set multiple values since I've not done that myself. A quick glance at the documentation suggests that it needs to be one value per cookie, so the multiple cookie route may be necessary.

    Also, glancing again at that code, you're going to need to further modify it because you're only acting on the h2 elements as a whole rather than on individual h2 elements. Setting an id for each would be an easy way to address each, and then you can store and retrieve the status of each quite easily.
    thank you at least I know where to start from. thanks!


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •