Link to non-default Tabbed Panel

I'm looking to set up a link from one page of a site to
another. The destination page has a TabbedPanels widget. I would
like to be able to have the link bring the user to a non-default
TabPanel. I have found some information about doing this from the
within same page, but not from another page in the site (or any
external url).
The page is currently here:
http://staging.smudgedgraphics.com/whitelamb/rates.html
I would like to link to:
http://staging.smudgedgraphics.com/whitelamb/specials.html
[to the Cottages Tab]
Any help would be appreciated.
Thanks!

I've read through that page several times, and the
information is great, but for a more digested version of what you
want to achieve, you can also check out
Opening
Specific Tabs and Accordion Panels from Another Page
Nicely laid out on how to use the SpryURLUtils.js file to
achieve exactly what you are looking for.

Similar Messages

ANN: Linking to non-default Spry tab or panel - tutorial

Spry 1.6 includes a file called SpryURLUtil.js that makes it
easy to
link to a specific tab or panel in a Tabbed Panels or
Accordion widget.
I've created a step-by-step tutorial explaining how to use
it. You can
find it on my site at the following URL:
http://foundationphp.com/tutorials/spry_url_utils.php
David Powers, Adobe Community Expert
Author, "The Essential Guide to Dreamweaver CS3" (friends of
ED)
Author, "PHP Solutions" (friends of ED)
http://foundationphp.com/

That should be built in, as it is in all PVII Widgets.
Being how Spry has grown to be such an important part of your
books and
other writings, perhaps you would agree (and maybe even be
able to influence
Adobe) that what Spry needs is a re-writing rather than
updates.
Al Sparber - PVII
http://www.projectseven.com
Extending Dreamweaver - Nav Systems | Galleries | Widgets
Authors: "42nd Street: Mastering the Art of CSS Design"
"David Powers" <[email protected]> wrote in message
news:fokosr$l1e$[email protected]..
> Spry 1.6 includes a file called SpryURLUtil.js that
makes it easy to link
> to a specific tab or panel in a Tabbed Panels or
Accordion widget. I've
> created a step-by-step tutorial explaining how to use
it. You can find it
> on my site at the following URL:
>
>
http://foundationphp.com/tutorials/spry_url_utils.php
>
> --
> David Powers, Adobe Community Expert
> Author, "The Essential Guide to Dreamweaver CS3"
(friends of ED)
> Author, "PHP Solutions" (friends of ED)
>
http://foundationphp.com/

How to use php variable for default tabbed panel

I have a tabbed panel and with tabs labelled with the days of the week. What I want to do is open up the tab that correspond to the current day. I have been using the following to get the day in 3 char format:
<?php
$jd=cal_to_jd(CAL_GREGORIAN,date("m"),date("d"),date("Y"));
echo(jddayofweek($jd,2));
?>
What I want to do is replace the value for the default tab in the following statement with a variable that matches the day returned with a number:
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", {defaultTab:1});
Please could anyone advice?
Regards,
Lloyd

Hi,
BIND_VARIABLE is useful when you have only IN variable but in your case you have IN and OUT.
I don't know if you use the gateway for MS SQL SERVER or HSODBC/DG4ODBC but here how you can do to call a remote procedure with bind variables:
DECLARE
ret integer;
inp varchar2(255);
outp varchar2(255);
BEGIN
inp :='Hello World';
outp :='';
ret := "dbo"."in_out_proc_test"@tg4msql( inp, outp);
dbms_output.put_line('Input value: ' ||v_ut1||' - Output value: '||v_ut2);
END;
The MS SQL Server procedure belongs to the user "dbo" and the database link
being used is tg4msql.
The following line initilaize the out variables of the procedure with an
empty string:
outp :=''
I hope it helps you.
Regards
Mireille

Help! Refresh default tabbed panel

Hi,
I have a problem with my spry tabbed panels. The default tab
is set to be the 1st tab, when I move to 2nd tab and navigate
through the content, as the page refreshes, and before it is fully
loaded it shows the content of the first tab for about 20 seconds
or so....then the page finally goes to the desired content on the
2nd tab....
How can I make it so this does not happen and it looks like a
smooth transition as I navigate through my pages?
Thanks,
Brandan98

Hi Ken:
When I insert a new spry panel it appears with all the css from the other page.
When I began to make changes the other page reflexs those changes.
Don't know how to get a separate SpryCss sheet. Do you?

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..

Transaction iView - pass parameters to non-default tab

Hi Experts,
I have a requirement to call transaction iView from Webdynpro ABAP application by passing some default values.
I am able to call the iView and also able to pass parameters. My requirement is to pass values to the tab in iView which is not the default tab when I execute the TCode.
Is this possible using absolute navigation...??
If yes please let me know how can that be achieved...
Thanks in Advance....!!!!
Regards,
Shruti Shah

Hi,
Do you already know a way to reach this transaction to a desired tab with out using webdynpro ?. Is it possible at all in any way to start this transaction and position to a particular TAB.
If you do not know that then i am afraid that no one could help you out in forum.
Good luck

Calling the non-default tab

I’m trying to create a custom button on the main
toolbar that calls another webhelp system. The button will call the
search tab (not the default tab) of the other system. I’ve
tried adding the following the OnClick script to Skin editor, but I
get javascript errors.
RH_ShowHelp(0, "C:/Projects/IndexB.htm", HH_DISPLAY_SEARCH,
0)
I’ve tried adding RoboHelp_CSH.js as a dependent file,
external file, and inline script but with no success. I’m
really not sure where this needs to go.
Any advice would be much appreciated.

when you embed your swf in an HTML page you can always pass
request parameters like www.xyz.com?t=2. Or alternatively you can
use flashvars to send these parameters.
See the index.template.html file in html-template folder in
your Flex Builder.
Now these request time parameters can be accessed as, to
illustrate the URL above, Application.application.parameters.t or
Application.application.parameters.foo
Application.application.parameters.bar.
Usually you read these parameters in the applicationComplete
event and then take some actions; in this case setting the tab
index.
ATTA

Embed and Accordion in a Tab Panel

Has anyone tried embedding an accordion widget inside a
tabbed panel? I'm running into an issue where the accordion doesn't
behave properly. I'm assuming it has something to do with the
hierarchy of div tags, but don't know enough yet to be certain. Can
anyone assist?
Michael

Hi Michael,
We have a known bug where accordions in a non-default tabbed
panel (initially hidden) doesn't work because it fails to
dynamically calculate its height due to the fact that it is
display:none.
I'll look into fixing it.
--== Kin ==--

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

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

What's the URL for a tabbed panel?

I posted this question last week to a topic that I think now
must have been abandoned, so I'm giving it another try as a fresh
topic. I've read everything in the Forums thus far posted about
linking to a non-default tab in a tabbed panel. But even after
reading this documentation (and the page "URL Utils Sample" which I
found to be written in an impenetrable technical shorthand, though
I gave it my best, so please don't refer me back to that), I can't
figure it out. There's also at least one other person on the forum
who is also dying to know the answer, so you'll be helping both of
us! Please assume in your response that you are speaking to someone
with only the most superficial understanding of Javascript -- I
assure you I will not feel patronized :-).
I thought from reading URL Utils Sample that if I typed this
URL...
http://www.georgeglazer.com/prints/americana/americanatest.html?panel2
...then instead of the default tabbed panel (History), it
would take me to the Currier & Ives panel (since the numbering
starts at 0). Right? But it doesn't. It stays on "History." There
are situations where we'd like to be able to send a client a link
that would open, say, "Currier & Ives" or "Folk Art" when they
land on that page.
I've tried putting the scripts in the header, in the body,
one in the header, one in the body, and combining them in one
script tag.
The scripts I'm talking about are:
<script type="text/javascript"
src="../../includes/SpryURLUtils.js">
var params =
Spry.Utils.getURLParamsAsObject(url);</script>
AND
<script type="text/javascript"
src="../../includes/SpryURLUtils.js">var TabbedPanels = new
Spry.Widget.TabbedPanels("TabbedPanels", {defaultTab:(params.panel
? params.panel : 0)});</script>
Any suggestions?
Thanks,
Helen

GlazerGallery wrote:
> I posted this question last week to a topic that I think
now must have been
> abandoned, so I'm giving it another try as a fresh
topic. I've read everything
> in the Forums thus far posted about linking to a
non-default tab in a tabbed
> panel. But even after reading this documentation (and
the page "URL Utils
> Sample" which I found to be written in an impenetrable
technical shorthand,
> though I gave it my best, so please don't refer me back
to that), I can't
> figure it out.
You might find this tutorial on my site is written in more
everyday
language:
http://foundationphp.com/tutorials/spry_url_utils.php
David Powers, Adobe Community Expert
Author, "The Essential Guide to Dreamweaver CS3" (friends of
ED)
Author, "PHP Solutions" (friends of ED)
http://foundationphp.com/

Tabbed Panels border bug IE7?

If I insert the default Tabbed Panel widget and use this css
code (which is the default with the borders changed to black to
show the problem):
@charset "UTF-8";
/* SpryTabbedPanels.css - version 0.4 - Spry Pre-Release 1.6
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights
reserved. */
/* Horizontal Tabbed Panels*/
.TabbedPanels {
margin: 0px;
padding: 0px;
float: left;
clear: none;
width: 100%; /* IE Hack to force proper layout when preceded
by a paragraph. (hasLayout Bug)*/
.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
.TabbedPanelsTab {
position: relative;
top: 1px;
float: left;
padding: 4px 10px;
margin: 0px 1px 0px 0px;
font: bold 0.7em sans-serif;
background-color: #DDD;
list-style: none;
border-left: solid 1px #000;
border-bottom: solid 1px #000;
border-top: solid 1px #000;
border-right: solid 1px #000;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
.TabbedPanelsTabHover {
background-color: #CCC;
.TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: 1px solid #EEE;
.TabbedPanelsTab a {
color: black;
text-decoration: none;
.TabbedPanelsContentGroup {
clear: both;
border-left: solid 1px #000;
border-bottom: solid 1px #000;
border-top: solid 1px #000;
border-right: solid 1px #000;
background-color: #EEE;
.TabbedPanelsContent {
padding: 4px;
.TabbedPanelsContentVisible {
I have a pixel missing at the left lower corner where the
border for the content appears to end and the border for the tab
appears to begin. This does not happen in Firefox...in FF the
borders meet and gives the appearance of one continuous border. As
with everything else that has to do with IE I am assuming this is
some "quirk" with IE but unsure. If it is what is the bug called
and what is the hack/work-around (if any)?

Name of the site is in the graphic above.
I have now seen that this small (1 pixel) gap exists in all implementations of the Spry Tabbed Panels.
Check yourself (you will need to use Ctrl+"+" to magify the screen to see it).
It seems to be an unavoidable bug that is usually hidden by colors that are not too contrasty.
Oh well, seems I have to accept this minor flaw and move on?

Spry tabbed panels not opening in IE on Vista

Link:
About
page
Link:
Story
page
Spry tabbed panels on these pages display fine in Firefox and
Safari.
But in IE on two separate Vista-running PCs, everything
except the tabs themselves loads, until you click refresh one or
more times. Both PCs were on broadband connections and I checked
each PC several times just to make sure it wasn't just an
intermittent connection.
Way to fix this for IE? As far as my client is concerned,
it's a bug.

Dear all, thanks for your replies.
I have tried Barascu Diana's fix to both pages linked at the
top, but am presently unable to test it on IE6. Anyone able to see
if those tabs are now appearing?
<DIV class="TabbedPanel" id="TabbedPanels1" style
="position:relative">
(Hope I did this right?)
I also temporarily tried kinblas' fix, but removing relative
positioning there caused the tabs to hover over to the left of the
page.

Tabbed Panels Bug

I've created a three tab panel using the widget, and put text in each of the three panels. It displays correctly in Design Mode, but when I switch to Preview or export the html to view in browser, the panels only display the center panel's text, no matter which one I click on.Check out these screen grabs, showing the panels working as designed in Design Mode, then check out the test site at http://scarlet-xrental.businesscatalyst.com/how-to.html:

Hi,
I am unable to replicate this behaviour in a default tabbed panel. So this issue must have cropped up during customizations. Are you able to replicate this problem starting from default tabbed panel again? Would it be possible for you to provide me with the steps to replicate this?
Thanks,
Vikas

Link to non-default Tabbed Panel

Similar Messages

Maybe you are looking for