View Full Version : Linking to specific tab lower on page AND from another page

09-26-2010, 02:02 AM
Hi all:

I have a 4-tab tabbed panel on the bottom of my home page. I'd like to have a link above the header that BOTH goes to Tab#2 (e.g.) AND jumps to the bottom of the page.

I have used the following code to link to the specific panel, but it doesn't jump you to the bottom of the page, so when clicking the link, it appears nothing has happened, despite the correct tab being loaded to the front.

<a href="#" onclick="TabbedPanels1.showPanel(1); return false;">Link to Tab #2</a>

I have also used the following to jump to the bottom of the page:

<A HREF="#linktobottomofpage"></a>


<A NAME="linktobottomofpage"></a> at the spot where I want the page to jump to.

Both of these methods work, independently. How do I combine them into ONE piece of code that does BOTH? (Both being jump to the proper panel and at the bottom of the page)

**Additionally, I want to link to panel#2 on the index.html page from ANOTHER page entirely. What would that link look like?

Any help would be greatly appreciated for this newbie to DW and Spry!

09-27-2010, 02:26 AM
on the adobe forum

09-27-2010, 06:35 AM

Thanks for that link. In my earlier research, I came across that one and also http://foundationphp.com/tutorials/spry_url_utils.php.

I have read them both but still cannot figure out what goes where with regard to the .js code mentioned. Any chance you can walk me through it? I can give specific file names/links, etc. if so.

Many thanks,


09-27-2010, 06:51 AM
sorry im snowed under at the moment , well i would be if it ever snowed jhere in Bali , ill try later but dwcourse may be the chap to help .he seems to be in touch with this spry stuff

09-27-2010, 04:31 PM

Thanks anyway. It's a big undertaking to go through this stuff for sure. I have made some progress though so if anyone else is reading this, here's what I've done:

1) Downloaded "SpryURLUtils.js" file from Adobe and added it to the Spry Assets Folder

2) Inserted the following code in the head of the file with the tabbed panels:

<script type="text/javascript" src="../SpryAssets/SpryURLUtils.js"></script>
<script type="text/javascript"> var params = Spry.Utils.getLocationParamsAsObject(); </script>

3) At the link site on the "other page" I inserted the following link:

<li><a href="index_TABBED_PANEL.html?tab=2#TabbedPanels1">The Link Goes Here</a></li>

"index_TABBED_PANEL.html" is the under construction home page that contains the tabbed panel.

The link works and sends you from the other page directly to the tabbed panels on the index_TABBED_PANELS.html page, ***BUT*** it does NOT load the correct panel??? It loads the default panel (#0). Any ideas on what I am doing wrong here?



09-27-2010, 05:17 PM
I think I have solved the problem by doing the following:

At the bottom of the page (index_TABBED_PANEL.html) I had to insert this code:

{defaultTab: params.tab ? params.tab : 0});

into this section:

<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab: params.tab ? params.tab : 0});

in order to define the #0 tab as the default tab. Without it, it doesn't work.

All this is working great! However, for the link from the top of the index_TABBED_PANEL.html page to the specific link on the bottom of the page I am still using:

<li><a href="index_TABBED_PANEL.html?tab=1#TabbedPanels1">The Link To Panel #2 Goes Here</a></li>

Is there a more efficient way to code this without reloading to whole URL and page? (i.e. this part: a href="index_TABBED_PANEL.html...)

Thanks for reading this far!