Skip navigation
Dooza (Steve)
Dooza (Steve)
Currently Being Moderated

Spry Tabbed Panels 2 - Remember Last Tab

Nov 16, 2010 8:37 AM

Using the Spry UI Tabbed Panels 2, has anyone found a way for the page to remember which tabbed was last viewed?

 

I can see that I can use the showPanel() method to set the panel, and I can use the getCurrentTabIndex() to retrieve the current tab index, but I am not sure what to do with them next.

 

I am thinking about maybe setting a cookie with the current tab index, but I don't know what to attach the onclick event to. Should I use a spry selector to add the onclick attribute to the a tag that is automatically generated?

 

Does anyone else have any clever ideas?

 

Cheers,


Steve

1665 Views   8 Replies   Latest reply: Brewster Jones, Aug 11, 2012 6:57 PM
 
Replies
  • Ben Pleysier
    Currently Being Moderated
    1. Ben Pleysier,
    Nov 16, 2010 3:02 PM   in reply to Dooza (Steve)
    Report

    Hi Steve,

     

    Have a look here http://go.spry-it.com/cookie with thanks to Arnout

     

    (the site was down at the time of posting, please be patient)

    http://go.spry-it.com/cookie

     

    Ben

     
    |
    Mark as:
  • Dooza (Steve)
    Currently Being Moderated
    2. Dooza (Steve),
    Nov 17, 2010 12:52 AM   in reply to Ben Pleysier
    Report

    Hi Ben,

    Thanks for the link. I had found another link to Arnouts Spry Cookie but assumed that since the link was dead that it was no longer available. I have emailed Arnout asking for the code, but not heard anything yet. After emailing him I found another site using the code so lifted it from there. Sadly I have not been able to get it to work with Spry UI yet. I will continue to try to get it working, I am not beaten yet!

     

    Cheers,

     

    Steve

     
    |
    Mark as:
  • Dooza (Steve)
    Currently Being Moderated
    3. Dooza (Steve),
    Nov 17, 2010 1:42 AM   in reply to Dooza (Steve)
    Report

    Once I found Arnouts correct SpryCookie.js I then managed to come up with this (with some help from another forum post):

     

    var cookie = Spry.Utils.Cookie("read","panel");
    TabbedPanels2.showPanel(cookie ? parseFloat(cookie) : 0)

     

    Spry.Utils.addUnLoadListener(function(){
        Spry.Utils.Cookie('create','panel',TabbedPanels2.getCurrentTabIndex() );
    });

     

    Not sure what has happened to Arnouts page, maybe his site is suffereing from the same problems that my servers are today, multiple routing issues in the UK. Anyone else having issues today?

     

    Cheers,

     

    Steve

     
    |
    Mark as:
  • Dooza (Steve)
    Currently Being Moderated
    4. Dooza (Steve),
    Nov 17, 2010 1:45 AM   in reply to Dooza (Steve)
    Report

    Next question

     

    How do I turn this into a plugin? I am sure others would benefit from being able to do this. Making it into a plugin would make it simpler to implment.

     

    Cheers,

     

    Steve

     
    |
    Mark as:
  • Brewster Jones
    Currently Being Moderated
    5. Brewster Jones,
    Aug 10, 2012 1:55 PM   in reply to Ben Pleysier
    Report

    I have been searching for an answer for this for sometime now.  The http://go.spry-it.com/cookie  is not working.  Any help/suggestions.  I want to go to the last tab looked at after a page refresh or change.  Any help would be appreciated.

     
    |
    Mark as:
  • Ben Pleysier
    Currently Being Moderated
    6. Ben Pleysier,
    Aug 10, 2012 2:52 PM   in reply to Brewster Jones
    Report

    Have a look here http://pleysier.com.au/sprycookie/

     

    Gramps

     
    |
    Mark as:
  • Brewster Jones
    Currently Being Moderated
    7. Brewster Jones,
    Aug 10, 2012 4:47 PM   in reply to Ben Pleysier
    Report

    Thanks Gramps... I found your previous post to this before as well.  I am just going nuts and know the cookie is not reading somewhere in this part of the code:

     

    var cookie = Spry.Utils.Cookie('read','tabbedpanels');

    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1",{defaultTab:cookie ? cookie : 0});

    Spry.Utils.addUnLoadListener(function(){

              Spry.Utils.Cookie('create','tabbedpanels',TabbedPanels1.getCurre ntPanelIndex());

    });

     

    I found another post that tweaked it some to:

    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", { defaultTab: cookies ? parseFloat(cookies) : 0 });

    but that was no good and made the whole tabgroup not work.

     

    The next question is... why am I using Spry?  LOL.  Man I would like to solve this issue.

     
    |
    Mark as:
  • Brewster Jones
    Currently Being Moderated
    8. Brewster Jones,
    Aug 11, 2012 6:57 PM   in reply to Ben Pleysier
    Report

    THANK YOU VERY MUCH GRAMPS!:  THIS DID WORK!

     

     

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Spry Accordion</title>
    <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet">
    </head>
    <body>
    <div id="TabbedPanels1" class="TabbedPanels">
      <ul class="TabbedPanelsTabGroup">
        <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>
        <li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
      </ul>
      <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent">Content 1</div>
        <div class="TabbedPanelsContent">Content 2</div>
      </div>
    </div>
    <script src="SpryAssets/SpryTabbedPanels.js"></script>
    <script>
    var Spry; if (!Spry) Spry = {}; if (!Spry.Utils) Spry.Utils = {};

    // We need an unload listener so we can store the data when the user leaves the page
    // SpryDOMUtils.js only provides us with a load listener so we create this function

    Spry.Utils.addUnLoadListener = function(handler /* function */)
    {
        if (typeof window.addEventListener != 'undefined')
            window.addEventListener('unload', handler, false);
        else if (typeof document.addEventListener != 'undefined')
            document.addEventListener('unload', handler, false);
        else if (typeof window.attachEvent != 'undefined')
            window.attachEvent('onunload', handler);
    };

    Spry.Utils.Cookie = function(type /* String*/, name /* String */, value /* String or number */, options /* object */){
        var name = name + '=';
           
        if(type == 'create'){
            // start cookie String creation
            var str = name + value;
           
            // check if we have options to add
            if(options){
                // convert days and create an expire setting
                if(options.days){
                    var date = new Date();
                    str += '; expires=' + (date.setTime(date.getTime() + (options.days * 86400000 /* one day 24 hours x 60 min x 60 seconds x 1000 milliseconds */))).toGMTString();
                }
                // possible path settings
                if(options.path){
                    str += '; path=' + options.path               
                }
                // allow cookies to be set per domain
                if(options.domain){
                    str += '; domain=' + options.domain;
                }
            } else {
                // always set the path to /
                str += '; path=/';
            }
            // set the cookie
            document.cookie = str;
        } else if(type == 'read'){
            var c = document.cookie.split(';'),
                str = name,
                i = 0,
                length = c.length;
           
            // loop through our cookies
            for(; i < length; i++){
                while(c[i].charAt(0) == ' ')
                    c[i] = c[i].substring(1,c[i].length);
                    if(c[i].indexOf(str) == 0){
                        return c[i].substring(str.length,c[i].length);
                    }
            }
            return false;
        } else {
            // remove the cookie, this is done by settings an empty cookie with a negative date
            Spry.Utils.Cookie('create',name,null,{days:-1});
        }
    };
    var cookie = Spry.Utils.Cookie('read','panel');
    //alert(cookie);
    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab: cookie ? parseFloat(cookie) : 0});
    Spry.Utils.addUnLoadListener(function(){
        Spry.Utils.Cookie('create','panel',TabbedPanels1.getCurrentTabIndex());
    });
    </script>
    </body>
    </html>

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points