SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Saving state of collapsible panel using cookies

    Hi,

    I have this code for collapsing div below. What I want to achieve is that when I go back to the page, it would remember whether the div was collapsed(style.display = none) or expanded(style.display = block). Here is the collapse/expand script:

    Code:
    <script type="text/javascript">
    function toggleDiv(div){
    	  if(document.getElementById(div).style.display == 'none'){
    		document.getElementById(div).style.display = 'block';
    	  }else{
    		document.getElementById(div).style.display = 'none';
    	}
    }
    </script>
    This is the html code calling the toggle function:

    Code:
    <h3 class="hndle" onmousedown="toggleDiv('div0')">
    <span>Footer Options</span>
    </h3>
    <div id="div0">
    EXPANDED
    </div>
    I was hoping to use JQuery cookies, but I'm still a beginner with this. Please help, thanks!

  2. #2
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    document.body.onload not working

    Hello,

    I have this test code for saving state of collapsible panels using cookies:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script type="text/javascript">
    function toggleDiv(div,days){
     var obj=document.getElementById(div);
     obj.style.display=obj.style.display=='none'?'block':'none'
     document.cookie=div+'='+obj.style.display+';expires='+(new Date(new Date().getTime()+(days||-1)*86400000).toGMTString())+';path=/';
    }
    
    function cookie(nme){
      var re=new RegExp(nme+'[^;]+','i');
      if (document.cookie.match(re)){
       return document.cookie.match(re)[0].split("=")[1];
      }
      return null
     }
    
    function checkcookie(nme){
     if (cookie(nme)){
      document.getElementById(nme).style.display=cookie(nme);
     }
    }
    
    document.body.onload = checkcookie('div0');
    
    </script>
    </head>
    
    <body>
    <h3 class="hndle" onmousedown="toggleDiv('div0',1)">
    <span>Toggle 0</span>
    </h3>
    <div id="div0">
    <p>Expanded!</p>
    </div>
    </body>
    
    </html>
    My issue here is that the code:
    Code:
    document.body.onload = checkcookie('div0');
    does not work, but it works when I use this instead:
    Code:
    <body onload="checkcookie('div0');"
    I will be transferring this script to a CMS addon, so I will not have direct access to the body tag. This means that
    Code:
    <body onload="checkcookie('div0');"
    is not an option.

    Please help!

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by ben.errol View Post
    My issue here is that the code:
    Code:
    document.body.onload = checkcookie('div0');
    does not work, but it works when I use this instead:
    Code:
    <body onload="checkcookie('div0');"
    Something else might be overwriting that onload event.

    Do you have the ability to run a script from the end of the body?

    Such as like this:
    Code html4strict:
    <html>
    ...
    <body>
        ...
        <script src="script.js"></script>
    </body>
    </html>

    or like this:
    Code html4strict:
    <html>
    ...
    <body>
        ...
        <script type="text/javascript">
            // some script code here
        </script>
    </body>
    </html>

    Because then, you can just this script code from the end of the body:

    Code javascript:
    checkcookie('div0');
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Wow, I didn't think the answer could be so simple! Thanks so much, Paul!

    P.S. I tried running a script at the beginning of the body similar to what you did, but nothing worked that time. What was the difference between running a script at the end and start of the body?

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,526
    Mentioned
    83 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by ben.errol View Post
    I tried running a script at the beginning of the body similar to what you did, but nothing worked that time. What was the difference between running a script at the end and start of the body?
    When a script runs, nothing below the script exists yet. If the script tries to work with elements that are expected to be on the page, it won't find them.

    Putting the script at the end of the body achieves performance benefits for loading your web page, and it also allows your script to work with page element that occur before it.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Member
    Join Date
    Jun 2011
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ah, that makes sense. Thanks again Paul!


Bookmarks

Posting Permissions

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