Tabbed panels links

I would like to see the ability to create a link so that a specific panel in a tabbed panel is opened.

This is exactly what I’m looking for too.

Similar Messages

Linking to a Tab in another page which has 3 tabbed panels

Hi
I have created a page which has three tabbed panels. The first is a horizontal Tabbed panel with two tabs. Each of these tabs has a vertical tabbed panel with 4 tabs in each.
I want to be able to link from another page to the 2nd horizontal tab and the first vertical tab on that page.
If I use the URL ?tab=1, the link takes me to the second horizontal tab but also then to the second vertical tab.
I have tried the following
giving the target tabs the same id and targeting ?tab=news
setting the url to ?tab=1&tab=0
setting the url to ?tab=TabbedPanel1.tab1&TabbedPanel2.tab2
but none of these work.
Javascript is not my thing (as you have probably guessed!). Is there a way that I can target any combination of tabs on one page through the URL?
Any ideas, much appreciated.
Thanks

Data:
Tab on main tabbed panels = primetab
Tab on nested tabbed panels = secondtab
URL Link = myPage.html?primetab=2&secondtab=2
Markup:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</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">
        <div id="TabbedPanels2" class="TabbedPanels">
          <ul class="TabbedPanelsTabGroup">
            <li class="TabbedPanelsTab" tabindex="0">Tab 1.1</li>
            <li class="TabbedPanelsTab" tabindex="0">Tab 1.2</li>
          </ul>
          <div class="TabbedPanelsContentGroup">
            <div class="TabbedPanelsContent">Content 1.1</div>
            <div class="TabbedPanelsContent">Content 1.2</div>
          </div>
        </div>
    </div>
    <div class="TabbedPanelsContent">
        <div id="TabbedPanels3" class="TabbedPanels">
          <ul class="TabbedPanelsTabGroup">
            <li class="TabbedPanelsTab" tabindex="0">Tab 2.1</li>
            <li class="TabbedPanelsTab" tabindex="0">Tab 2.2</li>
          </ul>
          <div class="TabbedPanelsContentGroup">
            <div class="TabbedPanelsContent">Content 2.1</div>
            <div class="TabbedPanelsContent">Content 2.2</div>
          </div>
        </div>
    </div>
</div>
</div>
<script src="SpryAssets/SpryTabbedPanels.js"></script>
<script src="SpryAssets/SpryURLUtils.js"></script>
<script>
var params = Spry.Utils.getLocationParamsAsObject();
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab: params.primetab ? params.primetab : 0});
var TabbedPanels2 = new Spry.Widget.TabbedPanels("TabbedPanels2", {defaultTab: params.secondtab ? params.secondtab : 0});
var TabbedPanels3 = new Spry.Widget.TabbedPanels("TabbedPanels3", {defaultTab: params.secondtab ? params.secondtab : 0});
</script>
</body>
</html>
The highlighted parts denote the markup required over and above the original markup for tabbed panels, placing JS at the bottom of the document is a peculiarity of mine an is therefore not a necessity.
Gramps

Link to Spry Tabbed Panel IN another Spry Tabbed Panel

Hi, I am having trouble trying to figure out how to link from another page to a tabbed panel that is inside another tabbed panel.
I have followed the tutorial on this site http://foundationphp.com/tutorials/spry_url_utils.php and have the link working properly. I have changed some code and now I have a tabbed panel residing in one of the tabs on an existing tab.
Here is an image of what it looks like.
I have my link on page A that links to "Hunts" on page B. I added the animal tabs panel. Each tab has images of each type of animal.
Here is my link code:
<a href="galtemp.html?tab=1#gallery">
This works good and opens the tab I want.
Now what I want to do is click on an "Elk" link in another page and have the "Hunts" tab open and the "Elk" tab open as well.
I have tried things like:
<a href="galtemp.html?tab=1#gallery&tab=2#huntgal"> This does not work.
<a href="galtemp.html?tab=1#gallery?tab=2#huntgal"> This does not work.
On another site I have created I have used this code:
<a href="#" onclick="TabbedPanels1.showPanel(1),TabbedPanels2.showPanel(0)">
This worked but ithe link was on the same page. Could I adapt this to work from another page?
Any help would be much appreciated.
Thanks Winrol

Try
How go to Tabbed Panel within Tabbed Panel
http://forums.adobe.com/message/4980068

Spry tabbed panels: creating links to a different tab

I am trying to feature links on the main section of my tabbed panel page ( http://www.iecaonline.com/benefits-spry.html ) that link to a different tab. I read a tutorial on the labs page (http://foundationphp.com/tutorials/spry_url_utils.php) on how to do this, downloading the spry updater, but I couldn't get it to work. Is there a simple way to accomplish this?
Thanks.
Sarah

Hi Sarah,
look here:
Get prerelease 1.6.1 of Spry framework now spry_p1-6-1_022508.zip
http://labs.adobe.com/technologies/spry/
Get prerelease 1.6.1 of Spry framework now
Get the Spry Updater for Dreamweaver CS3/CS4 now
Discuss Spry in the Labs forums
or here at Adobe Labs Downloads:
http://www.adobe.com/cfusion/entitlement/index.cfm?e=labs%5Fspry
Hans-G.

Need help linking spry tabbed panel from external page

Could use some help. I need to link to a specific spry tabbed panel on page "A" from a link on page "B" I have tried several "solutions" on the web and had no luck. When I add the code needed at the bottom of the code where you initiate the instance, it stacks the content of ALL panels in the first panel, and renders the tabs inoperable. This is a key feature I need in a new site being developed.

I need to link to a specific spry tabbed panel on page "A" from a link on page "B" I have tried several "solutions" on the web and had no luck.
Have you tried http://foundationphp.com/tutorials/spry_url_utils.php ?
When I add the code needed at the bottom of the code where you initiate the instance, it stacks the content of ALL panels in the first panel, and renders the tabs inoperable.
Depending on what the code looks like, it can do all sorts of things.
Please be reminded that the best way for us to help you is by you supplying a link to your site with a one sentence description of the problem.
Gramps

Linking to specific spry tabbed panel - code not working

Hi,
I have followed the tutorial at
http://foundationphp.com/tutorials/spry_url_utils.php
with regard to being able to link to a specific tab. For some
reason though, my code doesn't work. I am usign Dreamweaver cs3,
and as soon as I head back to the design view, or preview it in a
browser for that matter, all I see is each tab one above the other,
and the tabs no longer work.
My code is as follows:
<script src="../SpryAssets/SpryTabbedPanels.js"
type="text/javascript"></script>
<link href="../SpryAssets/SpryTabbedPanels.css"
rel="stylesheet" type="text/css" />
<style type="text/css">
<script type="text/javascript"
src="SpryAssets/SpryURLUtils.js"></script>
<script type="text/javascript"> var params =
Spry.Utils.getLocationParamsAsObject(); </script>
is in the head, and the body for the tabbed panels is:
<div id="mainContent">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0">1st
Team</li>
<li class="TabbedPanelsTab" tabindex="0">2nd
Team</li>
<li class="TabbedPanelsTab" tabindex="0">3rd
Team</li>
<li class="TabbedPanelsTab" tabindex="0">4th
Team</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">
<table width="100%" border="1" cellpadding="5"
cellspacing="1px" bordercolor="#929925">
<tr>
<td width="54%">
<div align="center" class="style3 style5">Player
name</div>

<p align="center"><img alt="" name="playerpic" width="180"
height="245" border="1" id="playerpic" /></p>

<p align="center" class="style3 style6 style4">Click a
player name to view their profile. </p>

<p align="center"> </p></td>
<td width="46%"><p align="center"><img alt=""
name="teamphoto" width="250" height="150" border="1" align="top"
id="teamphoto" /></p>
<p align="center" class="style3 style4
style6"><u>Squad list</u></p>
<p align="center" class="style5"> </p>
<p></p></td>
</tr>
</table>
<p> </p>
<p> </p>
</div>
<div class="TabbedPanelsContent">
<table width="100%" border="1" cellpadding="5"
cellspacing="1px" bordercolor="#929925">
<tr>
<td width="54%">
<div align="center" class="style3"><span
class="style5">Player name</span></div>
<p align="center"><img alt="" name="playerpic" width="180"
height="245" border="1" id="playerpic2" /></p>

<p align="center" class="style3 style4 style6">Click a
player name to view their profile.</p>
</td>
<td width="46%"><p align="center"><img alt=""
name="teamphoto" width="250" height="150" border="1" align="top"
id="teamphoto2" /></p>
<p align="center" class="style3 style4
style6"><u>Squad list</u></p>
<p align="center"> </p>
<p></p></td>
</tr>
</table>
</div>
<div class="TabbedPanelsContent">
<table width="100%" border="1" cellpadding="5"
cellspacing="1px" bordercolor="#929925">
<tr>
<td width="54%">
<p align="center" class="style3 style6 style4">Player
name</p>

<p align="center"><img alt="" name="playerpic" width="180"
height="245" border="1" id="playerpic3" /></p>

<p align="center" class="style3 style6 style4">Click a
player name to view their profile.</p>

<p align="center"> </p></td>
<td width="46%"><p align="center"><img alt=""
name="teamphoto" width="250" height="150" border="1" align="top"
id="teamphoto3" /></p>
<p align="center" class="style3 style4
style6"><u>Squad list</u></p>
<p align="center"> </p>
<p></p></td>
</tr>
</table>
</div>
<div class="TabbedPanelsContent">
<table width="100%" border="1" cellpadding="5"
cellspacing="1px" bordercolor="#929925">
<tr>
<td width="54%">
<div align="center" class="style3 style4
style6">Player name</div>

<p align="center"><img alt="" name="playerpic" width="180"
height="245" border="1" id="playerpic4" /></p>

<p align="center" class="style3 style4 style6">Click a
player name to view their profile.</p>

<p align="center"> </p></td>
<td width="46%"><p align="center"><img alt=""
name="teamphoto" width="250" height="150" border="1" align="top"
id="teamphoto4" /></p>
<p align="center" class="style3 style4
style6"><u>Squad list</u></p>
<p align="center" class="style5"> </p>
<p></p></td>
</tr>
</table>
</div>
</div>
</div>
<p> </p>
</div>
<script type="text/javascript">
<!--
var TabbedPanels1 = new
Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab:(params.tab ?
params.tab : 0)});
The link I would then use to link to tab 2 say, would be:
../"pagename".php?tab=2#TabbedPanels2
Also, when I then go to click on the Spry tabbed panels
region in design view, I get an error message saying:
while executing inspectSelection in spry_tabbedpanels.htm, a
javascript error occurred.
I am pretty inexperienced with Spry and Java so I may have
missed something simple.
A solution would be much appreciated as this is driving me
mad!
Please let me know if you need me to post more code.
Thanks in advance.
p.s. I am using Dreamweaver CS3 and the SpryURLUtils.js
script is from the Spry 1.6.1 prerelease framework.

quote:
Originally posted by:
brownie_jedi
Ok, so I've just changed the code to <script
type="text/javascript"
src="../SpryAssets/SpryURLUtils.js"></script>
to mimic the code for <script
src="../SpryAssets/SpryTabbedPanels.js"
type="text/javascript"></script>
since the spry files are all in the same folder. Is this what
you meant?
Having just installed firebug, I get the error params is not
defined. So I guess that this all together means that the
SpryURLUtils.js file is not being called correctly?
p.s. Thanks for the speedy replies, much appreciated.
Yes it means it cant find the file SpryURLUtils.js.
in firebug theres a tab called scripts, if u click on it, u
can see wich scripts are loaded. i suggest u check that out. Or
post a online URL so we can see the problem for our selfs..

Link to tabbed panel works once, but not again

I have successfully linked from text in one tabbed panel to open another panel on the same page, using SpryURLUtils.js.
<a href="?tab=2#TabbedPanels1">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab: params.tab ? params.tab : 0});
When I return to the panel containing the link, the link no longer functions. So basically, it will work once, but not twice.
Thoughts on what's happening?

The example that you gave is great for opening a tab in a new page.To open panels on the same page see here http://labs.adobe.com/technologies/spry/samples/tabbedpanels/tabbed_panel_sample.htm
Gramps

Link inside a tabbed panel

Hi,
I am working on odc:tabbedPanel in JSF. I have four tabs in it. In one of the tabs, I have links in the second tab which need to href to other pages and should be shown in the same tab. But it gets refreshed and comes to the first tab. Can anyone please help me with this i.e. to retain the same tab going to links.
I appreciate any help on this.
Thanks

good reference - check this out by BalusC - on forcing the tabbed panel
http://balusc.xs4all.nl/srv/dev-j2p-tab.html

Link inside a tab panel

Hello,
I am not sure how to word my question and I hope that I am
explaining it correctly.
I am using a tab panel to display information from a Sql
database. Inside each tab is a dynamic table displaying some of the
database information. Inside the table, I have created a link to
send the user to another page where all the database information
for that record is displayed. When you click the link, it sends the
user to the page, but not the data. The link works on the open
default tab, but not in the other tabs. I am not sure why it is not
working. Any help or ideas on what the problem may be would be
helpful.
Thank you,

> The link works on the
> open default tab, but not in the other tabs.
Show us the code for both of these links, please.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"StoneflyRS" <[email protected]> wrote in
message
news:ge8pjb$jg8$[email protected]..
> Hello,
>
> I am not sure how to word my question and I hope that I
am explaining it
> correctly.
>
> I am using a tab panel to display information from a Sql
database. Inside
> each tab is a dynamic table displaying some of the
database information.
> Inside the table, I have created a link to send the user
to another page
> where
> all the database information for that record is
displayed. When you click
> the
> link, it sends the user to the page, but not the data.
The link works on
> the
> open default tab, but not in the other tabs. I am not
sure why it is not
> working. Any help or ideas on what the problem may be
would be helpful.
>
> Thank you,
>

Link to Spry Tabbed Panels Tab?

Is it possible to link to a specific Spy Tabbed Panels tab from another page?
Thanks.

It is possible to link to a specific tabbed panel from another page, may I suggest you use the following link to visit a post in the spry forum were you will find all the steps needed to do this.
http://forums.adobe.com/thread/48312
Richard

Link to spry tab panels

HI there I'm new to this whole spry thing heck I'm even new
to posting; I'm trying to link to a spry tab from a flash button
and well it's just not working I can use the sample as written
http://labs.adobe.com/technologies/spry/samples/tabbedpanels/tabbed_panel_sample.htm
and it will work to change tabs but I guess I'm not using it
right for the flash button I've tried to set the
onclick="TabbedPanels1.showPanel(0); return false;"
and that didn't work and I also tried going into the code and
adding
<object
classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="
http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0"
width="132" height="31" a href="#"
onclick="TabbedPanels1.showPanel(0); return false;">
and that doesn't work either what am I doing wrong? sorry if
I posted in the wrong place. Thanks in advance for the help
labs.adobe.com/technologies/spry/samples/tabbedpanels/tabbed_panel_sample.htm

It is possible to link to a specific tabbed panel from another page, may I suggest you use the following link to visit a post in the spry forum were you will find all the steps needed to do this.
http://forums.adobe.com/thread/48312
Richard

YouTube links within a tabbed panel not stopping

Within each tab of a tabbed panel, I have a YouTube link. How to I make a YouTube playback stop automatically when the user changes tabs and starts a different video on a different tab?
They will only see the 2nd video but hear both at the same time.

This would need to add a little code snippet :
http://stackoverflow.com/questions/8667882/how-to-pause-a-youtube-player-when-hiding-the-i frame
http://stackoverflow.com/questions/5503833/stop-all-youtube-iframe-embeds-from-playing
Thanks,
Sanjit

Internal Links in Spry tabbed Panels

Does anyone know how to create internal links from tabbed
panel to tabbed panel in a Spry tabbed panel asset?
I used a tabbed panel layout for articls on my site, with
each subsection of the article in a different tabbed panel.
I want to put a link at the bottom of each tabbed panel's
content allowing the reader to go to the next tabbed panel's
content.
I know the reader can click on the tabs at the top, but I
want them to be able to click a "next page" button
at the bottom of each tab as well.
When I place a named anchor within the content of a tab's
content and link to it from a word within another tab's content,
the link does not work. I've tried it in Safari, Firefox, and IE.
Doesn't work in any.
If there's a Spry/Ajax expert out there, could you come up
with a work around? Internal links within Spry Tabbed Panels would
be very useful.
An example of using the Spry tabbed panel format for a news
article is here:
http://www.avalonwine.com/Zanzibar-Cellars.php
Thanks for help anyone can offer.
Jean

I am having the exact same problem. I would like to link an
image from my "Home" tab to the top of my "Projects" tab. But the
image link to the Named Anchor at the top of the "Projects" tab
does not work. Named anchors within a tabbed panel work fine. I'm
just not able to cross between tabs. Is there some script we can
add to the link to invoke the Spry tabbed panel widget? thanks,
Jen

Spry links to tabbed panels causing havoc

I have successfully used the tutorial from David Powers' Foundation blog to create a link to an accordion panel, but when I try to create links to 2 different tabbed panel pages, it causes 2 problems within DW.
First the links work to open the correct tabs and the pages display fine on IE7, Firefox and Safari.
Once I add the 'conditional operator' javascript at the end of the page, it causes the tab contents to display continuously out past the end of the widget container in DW, but not on the actual page, live or preview.
The bad problem is that if I close the file and re-open, and sometimes on save, I get the hourglass while it hangs, then after about 40-60 seconds, I get this message:
A script file in c:\..........\Spry\EditUtils.js has been running for a long time. Continue?
I answer No and the page opens and everything seems to work ok, I can edit and such, other than the tab contents running off the page.
I have checked the pages and removed all errors except tabindex and table bordercolor (which are allowed even though they show error on validate). And I have confirmed that the necessary spry link code is the same as the accordion panel page that works, except for the different identifiers of panel vs tab.
Here is a link to the page and the page:
http://www.wilsonchiropractic.net/Services/Hormone.html?tab=1#TabbedPanels1
http://www.wilsonchiropractic.net/Services/Hormone.html
This is the relevant spry link code:
<script type="text/javascript" src="../SpryAssets/SpryURLUtils.js"></script>
<script type="text/javascript"> var params = Spry.Utils.getLocationParamsAsObject(); </script>
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab: params.tab ? params.tab : 0});
When I take out the latter operator from the bottom line-
, {defaultTab: params.tab ? params.tab : 0}
everything goes back to normal.
Please Help! Thank You!!
--Jeff
Message was edited by: jeff_w01 9-24-09:
I have since re-created a simple page with the only complex element being the spry navigation bar. All else is essentially a stripped down version of the same page with an accordion panel which works. (all my pages are identical in header, navigation and footer - central frame holds differing content within tab or accordion panels).
I put a simple 2-tab panel onto a new page and added the above JavaScript for linking to spry tabs or accordions. It still does the same thing within DW; the separate tab panels run out down the page and it hangs with the eventual message: A script file in c:\..........\Spry\EditUtils.js has been running for a long time. Continue?
I have tried isolating as many variables as I can think of, but not having any luck....

Hi Jeff,
I am not able to reproduce this issue on a new page, but it looks like you have found that the following code is the problem:
{defaultTab: params.tab ? params.tab : 0}
Can you instead try the default constructor and then set the tab via the showTab() function for this tabbed panel? This is essentially what happens with the constructor you are having trouble with.
Hope that helps.
Thanks,
Josh Margulis
Adobe Senior Solutions Engineer

Spry Tabbed Panels and Pop Up Link from Image Hotspot

I've created an image map with Hotspot links to either send to another web page or to open a previously created Pop Up window with information.
I've imported my image, image map and Hotspots into a tab
The issue I'm having is when clicking on the hotspot (within the Spry tabbed panel), to open the pop up page; it doesn't work
If I select a Hotspot which sends users to another web page, that works ok.
Would appreciate it if someone else who has run into this and what your recommendation is for a fix.
thanks, R Silva

Hi,
Unable to post to a public server; however I've attached the files so the code can be reviewed.
thanks

Tabbed panels links

Similar Messages

Maybe you are looking for