Spry tutorial: linking to a non-default panel

Several readers have asked me to explain how to create a link to a specific panel in a Spry tabbed panels widget or accordion. The Essential Guide to Dreamweaver CS3 shows how to do this from the same page, but not from another page. It’s quite simple to do with the help of SpryURLUtils.js, which was added to the Spry framework in version 1.6. I’ve added step-by-step instructions in the Tutorials section of my site, complete with a zip file containing a simple example. I hope you find it useful.

This entry was posted in AJAX/JavaScript, Books, Dreamweaver. Bookmark the permalink.

43 Responses to Spry tutorial: linking to a non-default panel

  1. adrian says:

    Hi David,

    Many thanks for creating code that Adobe should have built in first day. i can’t believe they overlooked a linking process so basic. When I implement your changes i get the error message saying :

    “A script in file EditingUtils.js has been running for a long time”

    This hangs up dreamweaver and renders the page uneditable. I pretty sure I followed your steps as the linking does work but when I close Dreamweaver and attempt to open file I get the error.

    Any help appreciated

    regards

  2. Mike says:

    David

    Thanks for the tutorial; the code works great and I am using it on my website for tabbed panels now. I really needed this capability so really glad to see you put this out there.

    I had one problem at first, that I solved quickly, and others may have it too so here it is. In your tutorial step 2, the code as displayed there assumes the target page is in the root directory. If however you store your target page in a subfolder of the root, I think you need to modify that step 2 code to look like this:

    The diff is the “../” in front of the SpryAssets folder. I think that converts the path from a doc-relative one to a root-relative one (so should work no matter where on the site you hide the target page).

    But let me know if that causes any other problems!

    Thanks again for the excellent tutorial.

    M

  3. Mike says:

    In the post I just placed above the sample code was stripped out. So really the message is this: if your target pages are in subfolders, then in step 2 of the tutorial place a “../” in front of the word “SpryAssets” to convert the path to a root relative path.

    M

  4. Joe says:

    Hi David,
    I am not sure where to turn, I been Googling and looking all around and came across your site – I have a question regarding Tabbed Panels in Dreamweaver – is it possible to have the Tabs remember which one was opened last when using the Back button in a browser? My web page has a tab on it – I click on one (other than the default tab) hit a link – go to a new page – hit the back button – the default tab is open, not the one I last was on.
    <>
    I know this is probably not the right place to post this question – a simple YES or NO from you will be fine – and I will keep looking,
    <>
    Thank you in advance for your time and forgive the post.

  5. code works great. I found it easier to use after I had established the working pages and links. Then there where not any issues with path statements for finding the js files.
    One item that would be a nice add is to have the target open the panel if the target page has the panels set to be all closed using the following string; var Accordion1 = new Spry.Widget.Accordion(“Accordion1”, { useFixedPanelHeights: false, defaultPanel: -1 });
    I like to have the panels all closed when opening the page that has the accordion.

  6. I have been searching for the same answer that Joe is. I would like to return a visitor to the exact page he left, opened panels and all.

    Thanks in advance for any insights shared.

  7. seatoad says:

    Michael and Joe, try this (btw, here’s hoping I tag the code I’m going to post correctly so it doesn’t get stripped out…I’ll try wrapping it in “code” tags and see what that does)…

    1. On the source page (that is, the page with your tabbed or according panels), set everything up as David described.

    2. Also on the source page, on the links on your various tabs, add a URL parameter that identifies tab number each link resides on. You can name the parameter anything you want, but “tab” seems good
    enough. If you have more than one set of tabbed panels on the page, you also need to add a parameter that identifies the target tabbed panel’s id. (But if you only have one set of panels and you’ve used the default DW id–e.g.,”TabbedPanels1″ you can skip this).

    So, for example, the urls on the second tab (cuz the counting starts at 0, will look something like:

    <a href="destination.htm?tab=1" rel="nofollow">

    and if you have 2 sets of tabbed panels, the urls on the second tab of the second panel set will look something like:

    <a href="destination.htm?tab=1&panel=1" rel="nofollow">

    3. Now go to your destination page where you need to add two scripts: the first script will parse the url parameters you set up in the source page to get their values; the second script will write a link back to the source page, using its referrer information and the parameter values you passed.

    3a. To parse the url parameters, you could write your own function, but I see no reason to reinvent the wheel. There’s a perfectly good script here:

    http://www.netlobo.com/url_query_string_javascript.html

    Just copy the function into a text file, save it as something like urlparser.js, and then call the script from the head section of your destination page.

    3b. Now in the body of your destination page where you want the back link to appear, insert a script that: a) gets the referrer url of the source page; b) appends to it the parsed url parameters that identify the tab and panel set you want to go to; and c) writes it into a link.

    For example:

    var goback;
    goback = (document.referrer);

    var tab_param = parserfunctionname( 'tab' );
    var panel_param = parserfunctionname( 'panel' );

    if (document.referrer){
    document.write("<a href='" + goback + "?tab=" + tab_param + "#TabbedPanels=" + panel_param' rel="nofollow">Previous Page</a>");
    }

    If you only have one set of tabbed panels per page, and you use the default DW id (TabbedPanels1) it’s even simpler. Don’t pass the panel id as a param from the source page and just hard code it in the back link. Like:

    var goback;
    goback = (document.referrer);

    var tab_param = parserfunctionname( 'tab' );

    if (document.referrer){
    document.write("<a href='" + goback + "?tab=" + tab_param + "#TabbedPanels1"' rel="nofollow">Previous Page</a>");
    }

    There are probably much more compact ways of doing this. For example, you could write a function for the source page that automatically gets the id of the current tab and panel and appends that to your urls. But in the meantime this works. Only caveat is if the user has referrer information turned off in their browser, that’d be an issue. But you could code around that if you really wanted by passing the source page url as a parameter as well.

  8. seatoad says:

    Thanks for fixing that David πŸ™‚

    One big problem with the destination page script I posted above–it works fine the first time you use the back link to return to the source (panels page). But I didn’t think about what happens if users flip back and forth multiple times between the source and destination pages. In that case, the parameters added by the back link on the destination page become part of the source page’s referrer url. Which means the next time they visit the destination page and click the back link there will be two tab parameters in the URL. And then three, etc. Boo to me not testing more before posting.

    So here’s a revised script for the back link on the destination page that first tests the referrer for the presence of URL parameters and strips them out if necessary.

    var tab_param = parserfunctionname( 'tab' );
    var get_referrer = document.referrer;
    var get_index = get_referrer.indexOf("?");
    var clean_referrer = get_referrer.substring(0,get_index);
    var goback;

    if (get_index == -1){
    goback = get_referrer;
    }
    else {
    goback = clean_referrer;
    }

    if (document.referrer){
    document.write("<a href='" + goback + "?tab=" + tab_param + "#TabbedPanels1' rel="nofollow">Go Back</a>");
    }

  9. Emile says:

    David, I wondered if you would mind explaining how one might use the idea of framesets without using actual framesets. I want to use the vertical or horizontal menu’s but make sure the menu structures remain visible when you click one of the Item links.
    I don’t want to open the link in a new page and I don’t want the menu to disappear when one clicks a link. I know this is possible to do when using framesets but is there a way to do it without framesets….perhaps using one of the default css layouts with a header, sidebar, footer and mainContent. You see, I want the sidebar to always display the navigation menu, (say using the vertical version) while the header always displays my header and logo, but use the mainContent to display the page relative to the menu item’s link. The target box attributes (_blank; _self; _parent; _top) only applies to framesets…which defeats the purpose? Any ideas? Thanks so much.

  10. Joshua says:

    David,
    Excellent tutorial, very well laid-out and a great use of the Spry technologies. I have the script working wonderfully on a client site, but I do have a strange bug that I can’t seem to work around.
    When linking externally to a different sliding panel, the panel opens correctly, but all panels before the opened one seem to be forgotten by Spry, and I can’t navigate to them using either the Previous/Next links, or on-page direct references. It appears as if Spry has decided the the first open panel will be 0, and enumerates from there, forgetting about panels before.
    I have poured through the javascript for both the SprySlidingPanels and SpryURLUtils, but can’t seem to make sense of why this is happening. The behavior can be seen at http://www.gopaperlessnow.com/pages/ptdental.php, scrolling to the bottom, and clicking on one of the modules/features. On the newly opened page, try to navigate to a module/feature listed before the open one. Bizarre eh?
    Thanks again for the great tutorial, and I hope we can figure this one out!

    Joshua

  11. David Powers says:

    @Emile: This should definitely be possible with Spry/Ajax, but I don’t have any quick, easy solutions. I’m up to my eyeballs working on a couple of books at the moment, so it’s not something I’ll have time to look at in the near future. Sorry.

    @Joshua: A lot of Spry is a mystery πŸ™ . I’m visiting the Dreamweaver team in California next month, when I hope they might sprinkle some magic dust of understanding on me.

  12. Raf says:

    David, thanks for this site and the great tutorials. Very useful stuff. I have one question that is somewhat along the same lines as #5 above, and that is, is it possible to open up a collapsed panel when linking to it from another page? So essentially passing the contentIsOpen variable thru the query string (link). Any ideas? Thanks again.

  13. John M. Shaw says:

    Wish I could cross-link collapsible panels from different pages. The SpryURLUtils.js tutorials, I have found only seem to deal with Accordians or tabbed panels, but the same solution for those, do not work for collapsible panels. I am tryin to link to another page, open a particular collapsible panel and display the information. I have one other aspect I would be very happy if working, once I got that part of the href to work, and it would be then activating a partuclar link in an unordered list, in that targeted collapsible panel, in order to display the proper HTML gfrgment in the SpryHTML panel I have in each collapsible panel.

  14. Anant says:

    Hi,
    I am trying to make spry menu in a frameset. Is it possible to do it. I dont have much coding experience.

    I have a frameset as left, top and main
    I put a spry menu bar widget, I was the links of the menubar to display the content in main window but it doesn’t
    All suggestions would be highly appreciated.
    regards
    Anant

  15. Jessica says:

    Hi David – great tutorial, thanks. I have a slightly different model than yours though – I only have one type of Spry widgets on my page: a stack of collapsible panels. Each one has a link or links in the content. The panels are set to be closed by default. However, I want to over-ride this when a user opens a panel, and clicks on a link. At the moment, the next page comes up with all the panels closed again. Is there a way round this (without disrupting my aesthetically pleasing closed nav bar when my site initially loads)? Ps – I’m only running the site locally, so I can’t provide an example of my code without emailing it to you. Anyone else know how to do this? Thanks, Jessica

  16. Jessica says:

    Hi again – I think my problem is similar if not the same as another comment from John M. Shaw | June 17th, 2008 at 12:45 pm – any ideas?

  17. Rom says:

    for those getting the “Ò€œA script in file EditingUtils.js has been running for a long timeÒ€ error, visit this TechNote link from Adobe for the fix, works for me.

    http://kb.adobe.com/selfservice/viewContent.do?externalId=kb401257&sliceId=2

  18. Megan says:

    Hi David,

    Thank you for a great code!
    I am afraid however that I’m doing something wrong because I get two errors:

    “While executing inspectSelection in spry_tabbedpanels.htm, a JavaScript error occured”

    and
    “While executing onChange in spry-tabbedpanels.htm, the follwing javaScript error occured: At line 188 of file “C:\ProgramFiles\Adobe\Adobe Dreamweaver CS3\Configuration\Shared\Spry\Widgets\TabbedPanels\DesignTime\SpryTabbedPanelsDesignTime.js”: ReferenceError: params is not defined

    Can anyone help? I would greatly appreciate it!

  19. David Powers says:

    Megan, this is a very common problem. The answer lies in Troubleshooting step 4 in this Adobe technote.

  20. Seth Lazar says:

    Dear David,
    Thank you for the excellent tutorial, which solves a frustrating problem. I know you’re busy, so no worries if you can’t reply, but I have another query to add to the list: is it possible to link, from an external page, to a tab that is nested within another tab? I have a photography website, in which some vertical tabbed panels are nested within horizontal ones. I don’t seem able to link directly to the vertical ones. Thanks in advance for your help,
    Yours,
    Seth Lazar

  21. Mariya says:

    Hi David,
    I also have pretty much the same question as John M. Shaw June 17, and Jessica July 16. I am working on the following pages:
    index
    and
    courses

    What I want to do is on the index page, instead of opening popups from the links in the first list (Technology-Enhanced Business, Advanced Web Development, Java Programming), to make them load the courses page at the corresponding collapsible panel, with the panel open (by default they are all closed).

    Our whole team is just stuck, so any help would be really appreaciated.
    Thanks,
    Mariya

  22. David Powers says:

    Hi Mariya,

    I have updated the tutorial to show how to open a collapsible panel from a link.

  23. Sean says:

    Wow, thanks for that! It works perfectly!!! I’m still building the site and it is not completely up yet, but itt will be soon. You just made my whole night!

  24. Karelle Scharff says:

    Frustrating problem with Linking to a specific Spry panel tutorial. I’ve looked at the tutorial file and downright copied the code into my file, which can be viewed at amstonedesigh.dreamhosters.com. As you can see the tabs have lost their discrete nature and the page has turned interminably long.

    This happened when I added the code:
    , {defaultTab: params.tab ? params.tab : 0}
    to the end of the script line at the bottom.
    When I take that line out, the file returns to normal (see tabbed file )

    I can’t find what I’m doing wrong. Help!

  25. Here’s a twist on the problem–how would you pass the referrer URL (or a portion of it) to the destination URL so that the destination URL opens a corresponding tab or panel to the referrer URL? For example, I’ve got sliding panels on a client list page and on a separate interactive map page for my company and the panels define different client types–government, healthcare, education, etc. When someone’s viewing the healthcare client list (e.g., website.html/client-list.html?panel=1) and clicks on the interactive map page link, I’d like them to be taken right to website.html/interactive-map.html?panel=1 instead of the page with the default panel. I’d guess it’s pretty easy but I’m already at the limit of my coding ability, so any thoughts would be greatly appreciated.

  26. Libby Weisdepp says:

    I’m having the same problem as Karelle. When I paste in the final piece of coding near the bottom – , {defaultTab: params.tab ? params.tab : 0} – each of my tabs open up onto one page making the tabs obsolete. When that piece of code is removed, my page returns to normal.

    What am I missing?

  27. Oliver Melton says:

    I’m trying to link to a specific SLIDING panel (not a tabbed panel) from a remote link. I’m sure this can be done using SpryURLUtils.js as I’ve successfully achieved the result with tabbed panels. There’s not as much online information on doing this with sliding panels, though, and I’ve had no luck experimenting on my own.

    Can anyone help?

    Here are two example pages of the pages in question:

    :: http://www.studiohyperset.com/sandbox/aafd/impressionist.php
    :: http://www.studiohyperset.com/sandbox/aafd/fullsizepgs/impressionist/stillLifeFlowers.htm

    The user launches the second page from the first and should be able to get back to the second sliding panel on the first page by clicking “RETURN.” Right now, when the user clicks “RETURN,” s/he returns to the first slide in the sequence.

    Thanks in advance for any help.

  28. David Powers says:

    Oliver, it’s exactly the same as for an accordion. You use defaultPanel. In stillLifeFlowers.htm, add ?panel=1 to the the link that returns to the other page.

    Add the code block that declares params: var params = Spry.Utils.getLocationParamsAsObject();.

    Then add the defaultPanel option to the sliding panel constructor: var sp1 = new Spry.Widget.SlidingPanels("SlidingPanels1", { defaultPanel: params.panel ? params.panel : 0, duration: 250, fps: 120 });.

  29. Oliver Melton says:

    Ah, Mister Powers: my new best friend!

    Thanks so much for your helpful comment. It does work now, and I couldn’t have done it without you.

    Thanks, thanks, thanks!

  30. Gwen Lane says:

    Thanks for the great tutorial. Works great. I was wondering, however, if it was possible to link to specific spry tabs from an XML based (flash) menu?? Thanks.

  31. David Powers says:

    Yes, Gwen, it probably is possible to do, but I’ll leave it up to someone else to work out how to do it. Much though I would like to do it, I can’t solve every question on the web. πŸ˜‰

  32. Gary Willison says:

    Very helpful in understanding how to use the ‘SpryURLUtils.js’ to pass a url and open a panel different page.

    I’m looking to go one step further in passing the info in the url… in that I need to go to different page (answered), then open a collapsible panel, (answered) and then go to a particular page within my sliding panel (not answered).

    Was hoping you are up for answering question on how to add the sliding panel info to my link of: http://dev.wng.com/index.cfm?action=wnpm_onsite&PageID=12?panel=3&colPanelIt=open#CollapsiblePanel3core

    The id for the sliding panel that needs to show is: ex3_p4

    – Best Wishes,
    Gary Willison

  33. LeonT says:

    i followed the tutorial and got it working so long as i use a panel number i.e. panel=3 in the URL
    but as i want the links to be in rss feeds if i add another panel all previous links will show the wrong link as all numbers will move up by one. so i ID tagged each panel but stumped why it doesnt work now when i have panel=IDname rather than its order number in the accordian i.e test.html?panel=test yet test.html?panel=3 works even thou the id test is on this same panel. know its something obvious im doing wrong but heads bursting trying to see it :-/ any help welcome, thanks

  34. David Powers says:

    The best place to get help with Spry problems is in the Adobe Spry forum. Upload to a website the page you’re having problems with, and include the URL in your request for help.

  35. Rebecca says:

    I have been searching for the answer to this all day, and I keep getting directed to your “Linking to a Specific Spry panel” tutorial… but it looks like this has been changed to explain how to link from a different page, instead of linking from one tab to another in the same widget on the same page. Is the original tutorial online anywhere?

  36. David Powers says:

    No, it hasn’t changed. If you read my original blog post, it says that linking to a tab within the same page is covered in my book. I added the online tutorial to show how to link to panels and tabs in other pages because so many people had asked how to do it.

    You can learn how to link to a tabbed panel on the same page by studying the underlying code in the Spry documentation at http://labs.adobe.com/technologies/spry/samples/tabbedpanels/tabbed_panel_sample.htm.

  37. Paul P. says:

    I just wanted to tell you that you saved me from shooting myself. Thanks for the awesome tutorial!

  38. David Powers says:

    Glad to be of service. Shooting yourself can be so messy. πŸ˜‰

  39. erika says:

    First of all – many thanks for your Spry tutorials, David, they are very helpful. Here is my problem – I am trying to open a tab (index_hours_test.htm) from a different page (index_hours_test_linkstohours.htm). Looks like first two links work (opening tabs in panel 3) but last two links don’t (opening tabs in panel 2). And I am not sure if the first two links work just by some coincidence. Any idea where did I make a mistake or what should I do to fix it? Your advise will be greatly appreciated. Here are the pages:

    http://ucblibraries.colorado.edu/reference/index_hours_test_linkstohours.htm

    http://ucblibraries.colorado.edu/reference/index_hours_test.htm

    Thanks! erika

  40. David Powers says:

    Sorry, I’m very tied up at the moment. Have you tried asking for help in the Spry forum?

  41. erika says:

    No, but I’ll try. Thanks for a tip.

  42. ushma says:

    I have followed the tutorial and linking to a non default panel works great on IE6. I have id number in tab=1&panel=1 in the url.
    When I test it on chrome, the link takes me to the id 1 and not the id that I have it in the url.
    Please help me with the issue.

    Thanks