Spry Widget Tabbed Browsing

Posted on 2012-09-18
Last Modified: 2012-09-28

I have a question in regards to tabbed browsing widget found in Dreamweaver CS6 Spry features.

I have setup tabbed browsing and it seems to work okay except for one little thing. When I click on a link under any of the tabs >1 and then hit the (back) button to return to previous page to click on another link, it always returns me to the first tab.

I would like it to stay on the tab that I have selected when I return from a link I have clicked open.

To make it really easy to understand my problem, please visit the page I am working on right now;

click on any one of the Chapters >1 and then click a link below. Now go Page Back and observe it has returned to the 1st tab. This is frustrating when I want to view mulitple documents in Chapter 3 but have to keep clicking back on the chapter 3 tab.

Thanks for looking!
Question by:zbox
    LVL 70

    Accepted Solution

    First off, don't use Spry.  Adobe has discontinued development of it and you should really switch to JQuery which features a number of tabbed panel widgets that makes life a lot easier and provides the functionality you want.

    Spry doesn't support remembering which tabbed panel was last loaded.  You have to add a javascript cookie or server-side session to store that information and write it back to the Spry constructor when the page is loaded again.  The documentation is here:

    The constructor would look like this:

    <script type="text/javascript">
       var tp1 = new Spry.Widget.TabbedPanels("myTabbedPanels",{defaultPanel:<?php echo $_SESSION['lastclick']; ?>, duration:200, tabHoverClass:'red'});  

    And you would have to figure out exactly how to store the click information or get it into the session.  You might even consider using the http referrer value to check to see what the last page was and then set defaultPanel accordingly.

    Author Closing Comment

    I am going to take your advice and no longer use Spry and move on to bigger and better things. I'm glad I know this now and didn't waste any more time on learning it.

    You answered that perfectly and it was very easy to understand.

    Thanks a bunch!

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Threat Intelligence Starter Resources

    Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

    Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
    In Part 1 ( we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
    In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    760 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    7 Experts available now in Live!

    Get 1:1 Help Now