24 Responses to Linking to Spry panels—updated tutorial

1. Claudia Sears says:

   9 October, 2008 at 7:15 pm

   Admitting the Java is Klingon to me, I tried these steps for the Collapsible panels, without success. Obviously I am a novice and missing a vital piece of information. When I added the “? true” section to the script at the bottom of my main apge, all of the panels below that command defaulted to an open state. Can this command not be used with multiple Collapsible Panels on one page?
2. David Powers says:

   10 October, 2008 at 2:03 pm

   There is no Java involved. Java and JavaScript are two totally unrelated languages.

   Each collapsible panel has its own initialization script. If you want to open individual panels, you need to pass a different variable through the query string to identify the panel you want to open. In my example, I used col1 to refer to a specific panel. If you have other panels, you need to use something like col2, col3, etc. to refer to each one.
3. Steven DeVivo says:

   23 October, 2008 at 11:31 pm

   The linking to specific tabs works great. That has been a real nice feature for me to add in for my customer. However, how do I link to tabs contained within tabs? i.e., Tab#4 of TabbedPanels1, when selected, has 3 tabs of TabbedPanels2 nested inside.

   You don’t see these tabs (TabbedPanels2) unless you select Tab 4 from TabbedPanels1 strip. So I want to open a specific tab within a specific tab.

   I have tried doing this:
   ?tab=4#TabbedPanels1&tab=2#TabbedPanels2
   …but no luck.

   You can see what I mean at this link:
   

   Select the Technical Information tab at far right… how can I link to Tech Info and then to one of the nested tabs?

   Any ideas or thoughts would be appreciated.
4. Steven DeVivo says:

   23 October, 2008 at 11:32 pm

   Oops! Here is the link:

   http://www.mulehide.com/product/epdm.aspx

   Thanks
5. Carl Roetter says:

   8 December, 2008 at 11:42 pm

   Thank you for your example and well prepared review on linking to tabbed panels from a URL.

   I have tried to adapt this approach to link to a “sliding panel” with no success. Really wish Adobe would have provided some guidance on this, as well as opening panels form within the same screen.

   Can you, or one of your readers be of assistance in doing this..? Thank you very much in advance for any words of wisdom…!
6. David Powers says:

   9 December, 2008 at 4:41 pm

   Carl, the technique is exactly the same as for a Spry accordion.
7. Don Thimsen says:

   15 December, 2008 at 5:54 pm

   I just started playing with CS4 and Spry, and I found your tutorial about linking to specific panels in a Spry tabbed panel. I had no difficulty following the tutorial and got this part working correctly. Thanks.

   However, I’m also trying to figure out the exact opposite problem. How can a browser return to the last displayed tab when a user enters a BACK request? As far as I can tell, the spry tabbed panel always returns to the default tab.

   I’ve been successful in the past by stacking location.href requests on an onclick. For a DW8/non-spry example, use the following URL and examine the links found on the options tab panel. When you return from viewing an option, the tab panel remains positioned on the options tab.

   http://www.jonesbrothersmarine.com/jbm_capefish23.htm

   I’ve been trying to do something similar with CS4/spry but haven’t had any luck so far:

   http://www.jonesbrothersmarine.com/test.html

   When you return from viewing an option, the tab panel always repositions on the first tab.

   Any ideas?

   Thanks,
   Don
8. Don Thimsen says:

   16 December, 2008 at 10:02 pm

   I think I’ve finally figured this out. The problem was with the stacking location.href request using the parameter format used by this tutorial. Evidently passed parameters are not saved on the history queue.

   After spending some time figuring out how all this worked, I changed the way the tab is being selected. Instead of the tab parm being passed as a normal keyed vaue pair on the URL, I used a fake anchor name. For example, instead of “?tab=4″ I now use “#tab_4″ on the URL request.

   The only change required is to the method call to get the parameters. Instead of:

   var params = Spry.Utils.getLocationParamsAsObject();

   I used:

   var params = Spry.Utils.getLocationHashParamsAsObject(“&”,”_”);

   This allows the links on tab panels to be coded so that they return to the same tab when the user requests a back request.

   For example, if the user is on the fifth tab and the panel content has a link to newpage.htm, the following link using onclick lets the user return to the same open tab.

   a href=”#” onclick=”location.href=’#tab_4′;location.href=’newpage.htm’;return false”

   HTHs
9. Scott de Fasselle says:

   6 January, 2009 at 8:26 pm

   Don, is there a link that you could post showing what you’ve described above?

   I’m looking to do the same thing for when a user clicks the back button.

   Thanks.
10. Adam says:

    30 January, 2009 at 6:19 pm

    Hello David,
    First of all, thank you for your “linking to a non-default spry panel” tutorial. It works very well on my development site. Do you know if there’s a way to get the same behavior on a tabbed panel when you click the browser back button? For example, on my tabbed panels, when you click a link and then try to use the back button, it goes to the default panel instead of the panel you linked from. I would appreciate any help!
11. David Powers says:

    9 February, 2009 at 6:16 pm

    Adam,

    That’s one of the major problems with Spry and other JavaScript libraries: the browser back button doesn’t work. There might be a way to do it, but I’m not a JavaScript whizz kid, so I would be just as interested in hearing a solution as you.
12. Roberto says:

    1 March, 2009 at 2:55 am

    I combine spry tabbed panel nd html tabbed panel to load the page only when you click on the tab bu this is my problem… when Ilinked to spry pannels it can not be loaded because html tabbed require an onclick event…
    this is the code:
    (on the tab)

    Scores

    I use the footer to link to tabs and i have this code:

    Scores

    but becuse the tag require a click event, the tab it is no loading

    any advise?
13. David Powers says:

    1 March, 2009 at 8:19 am

    Roberto,

    The first piece of advice is to take a look at what it says below the Comment field on this page. Only some HTML is allowed in posts. This is a security measure to prevent malicious attacks known as cross-site scripting. As a result, all the code you intended to show has been stripped out, effectively rendering your request for help meaningless.

    The best place to get advice for this sort of problem is in the Adobe Spry forum at http://www.adobe.com/go/labs_spry_pr1_forum. Good luck.
14. Falguni says:

    10 March, 2009 at 5:05 pm

    Wow, great work…

    This blog was very helpful to solve my problem..Thank you very much.
15. Jeff says:

    18 September, 2009 at 1:27 am

    Thank you for putting up this tutorial, I have been looking for this solution for awhile.
    However if anyone can help, I can’t seem to get it to work for 2 separate links/pages, accordion or tab panel.

    I copied SpryURLUtils.js to the Spry folder.

    From the tutorial, I have added this to the head (for the accordion):

    var params = Spry.Utils.getLocationParamsAsObject();

    This to the script at the end:
    var Accordion1 = new Spry.Widget.Accordion(“Accordion1″, {defaultPanel: params.panel ? params.panel: 0});

    And on the source page for the link:
    <a href=”Research/CurrentLit.html?Panel=1#Addordion1″>test link to research panel</a>

    First of all, the link works to go to the page, but not to the panel and not to the second accordion. But worse, this causes the second accordion panel (of just 2) to display as a continuation out of the panel container, even if I just go to the page directly.

    Can anyone please help? Much Appreciated!!
    –Jeff
16. David Powers says:

    20 September, 2009 at 2:18 pm

    @Jeff. The answer lies in the code. To get help with this sort of problem upload the problem pages to a website, and post a request for help in the Dreamweaver forum, including the URL of the pages that don’t work.
17. sally says:

    25 September, 2009 at 12:02 am

    hi

    http://foundationphp.com/tutorials/spry_url_utils.php

    I have downloaded your spry_target.zip file but there was only one file called ‘spry_target’ with file extension.

    I have opened it in notepade and just code.

    do i need this to do the tutorial – can you email me the files please
18. David Powers says:

    25 September, 2009 at 8:11 am

    Sally, Try downloading again. I have just checked the zip file. It’s fine.
19. Parke Bluhm says:

    1 November, 2009 at 6:21 pm

    Thank you for this tutorial

    for Sephen Devivo’s question about linking to nested Accordion panels within Tabs, the link should look like this:

    Works for me, at least in firefox (haven’t tested IE), hope it helps
20. Parke Bluhm says:

    1 November, 2009 at 6:22 pm

    oops, …like this:

    a href=”#” onclick=”TabbedPanels1.showPanel(3)&Accordion1.openPanel(1); return false;”
21. Michael Williams says:

    21 December, 2009 at 3:45 pm

    Hi – I understand the concept of this article and have been able to implement the solution up to step 4 however for my solution I am not working with tabbed panels or an accordion widget but the RSS Reader from the latest Spry Framework. I would like to have a specific feed and article selected on the page depending on what link the user has come from.

    So instead of working with the tabbed panel and accordion variables I am using the variables:

    var dsCategories
    var dsFeeds
    var dsChannel
    var dsArticles

    I would like to know if anyone can assist me in modifying the solution to suit this scenario?

    Thanks.
    Michael.
22. Bruce says:

    10 April, 2010 at 11:41 am

    The linking to specific tabs works great. That has been a real nice feature for me to add in for my customer. However, how do I link to tabs contained within tabs? i.e., Tab#4 of TabbedPanels1, when selected, has 3 tabs of TabbedPanels2 nested inside.

    I have tried doing this:
    ?tab=4#TabbedPanels1&tab=2#TabbedPanels2
    …but no luck.

    What worked for me was using
    “TabbedPanels1″, {defaultTab : params.tab ? params.tab : 0}

    “TabbedPanels2″, {defaultTab : params.tab2 ? params.tab2 : 0}

    then pass parameters in the URL as ?tab=1&tab1=2
23. David Powers says:

    10 April, 2010 at 11:58 am

    You can have only one fragment identifier (the bit after the hash tag) in a URL.
24. Bob says:

    30 June, 2010 at 6:21 am

    Thank you, thank you, thank you David! Your tutorial was so concise and clear, it worked for me on the first try!