Linking to TabbedPanels

I would like to link to and open a specific tab in a
TabbedPanels Spry I from an outside source, such as another page on
the site or an email. Is this possible and can someone help me with
this.
I have successful linked and opened tab while on same page
but that code does not work for outside links.
Thanks
Wendy

I found a solution.
Posting it for anyone with same issue.
http://foundationphp.com/tutorials/spry_url_utils.php

Similar Messages

Linking to a specific tab in a Tabbedpanel

I've created a page with four sections as Tabbed Panels, and
I wanted to link to a named anchor in one of the panels. I found
the tutorial at
http://foundationphp.com/tutorials/spry_url_utils.php,
downloaded the Spry 1.6.1 files, and set to work. On completing the
tutorial, the thing actually worked, until I closed the target.htm
file. Now, whenever I try to open that file, Dreamweaver simply
freezes. There is no way I can find to reopen the file.
Luckily, I kept a spare copy, and I've tried adding the code
a bit at a time. It's the final part at the foot of the page that
seems to cause the problem.
Is there a fix for this, or is there another way to link to
different panels in a tabbed panel box?

Spry was abandoned by Adobe in late 2012. Spry didn't keep up with the mobile web and modern browsers. You'll get better results with jQuery Tabbed Panels.
Tabs | jQuery UI
Nancy O.

Spry TabbedPanel links?

I've created a page with four sections as Tabbed Panels, and
I wanted to link to a named anchor in one of the panels. I found
the tutorial at
http://foundationphp.com/tutorials/spry_url_utils.php,
downloaded the Spry 1.6.1 files, and set to work. On completing the
tutorial, the thing actually worked, until I closed the target.htm
file. Now, whenever I try to open that file, Dreamweaver simply
freezes. There is no way I can find to reopen the file.
Luckily, I kept a spare copy, and I've tried adding the code
a bit at a time. It's the final part at the foot of the page that
seems to cause the problem.
Is there a fix for this, or is there another way to link to
different panels in a tabbed panel box?

In the View > Visual Aids menu, make sure there's a check mark next to Invisible Elements (clicking it toggles it on and off). When you more your mouse pointer over the menu, the blue tab should appear.

Spry Tab link only works once... why?

Hi all,
I have a spry tabbed area with 4 tabs on my page. Each tab contains data that is dragged from an MSAccess table. A couple of the tabs have repeat regions. This all works fine. One of my tabs has a repeat region where I can click on a button image to change a record status from True to False (or visa versa). The click runs the associated vbscript which executes the SQL update statement no problem. However I noticed that when I changed the data on this tab and reloaded the page using a Response.redirect after the sql update was executed, it would default to the 1st tab and not the one I was viewing that contains the repeat region. A quick search led me to the SpryURLUtils.js file which solved that problem by allowing me to specify which tab to load. I appended the relevant code to give me this:
Response.Redirect("myrecord.asp?" & Request.QueryString & "&tab=1#TabbedPanels1"
As I mentioned, the tab contains a repeat region. If I click on a button to change the status of that record the page reloads fine and displays the correct tab. But this only happens once... each subsequent time I try to change another record my tab contents disappear. The tabs are still visible and if I click on the tab where I've changed the data the tab content is dispalayed, but obvioulsy this isn't right... it should reload and display the correct tab with each call of the code.If I navigate away from this page and then come back to it I can successfully chnage one record and the results are displayed. Change another record and the changes are made, but the tab contents are not displayed again. The interesting thing is that if I reload/refresh the page the problem occurs staright away on the first record change.
So my question is 2-fold... Why is this happening and how do I solve the problem?
Here is the vbscript that updates the record and does the Response.redirect
<%
'Change Notification
If (CStr(Request("ToggleNotify")) = "ToggleNotify") Then
dim strSQL
'check to see if notification is currently true or false
    If cstr(Request.Form("NotifyChanges")) = Cstr("True") Then
    'change notifiaction to false
        strSQL = "UPDATE tblUserAccess SET NotifyChanges=0 WHERE AccessID = " & Request.Form("hiddenAccessID")
    else
        strSQL = "UPDATE tblUserAccess SET NotifyChanges=-1 WHERE AccessID = " & Request.Form("hiddenAccessID")
    end if
    Set MM_editCmd = Server.CreateObject ("ADODB.Command")
    MM_editCmd.ActiveConnection = MM_VBUsers_STRING
    MM_editCmd.CommandText = strSQL
    MM_editCmd.Execute
    MM_editCmd.ActiveConnection.Close
    Response.Redirect("myrecord.asp?" & Request.QueryString & "&tab=1#TabbedPanels1" )
End If
%>
Here is my Repeat region with the associated form
<%
While ((Repeat3__numRows <> 0) AND (NOT rsAccessRights.EOF))
%>
<form name="frmNotifications" method="post" action="">
<tr class="PageText">
    <td width="200"><%=(rsAccessRights.Fields.Item("SectionTitle").Value)%>
        <input type="hidden" name="hiddenAccessID" id="hiddenField2" value="<%=(rsAccessRights.Fields.Item("AccessID").Value)%>">
    </td>
    <td width="200">
                <%If (CStr((rsAccessRights.Fields.Item("NotifyChanges").Value)) = CStr("True")) Then %>
          <input type="image" src="../sitegraphics/accept.png" alt="Submit button">
        <%else%>
          <input type="image" src="../sitegraphics/cross.png" alt="Submit button">
        <%end if%>
    <input type="hidden" name="ToggleNotify" value="ToggleNotify">
    <input type="hidden" name="NotifyChanges" id="test" value="<%=cstr((rsAccessRights.Fields.Item("NotifyChanges").Value))%>">
   </td>
</tr>
</form>
<%
Repeat3__index=Repeat3__index+1
Repeat3__numRows=Repeat3__numRows-1
rsAccessRights.MoveNext()
Wend
%>
And here is the bit at the bottom that specifies the default tab if nothing is passed in the URL
<script type="text/javascript">

</script>
Sorry for the long post!
This is my first dabble with Spry stuff, so I'm a bit green. If anyone can explain to me why this is happening that would be most apopreciated. If anyone can tell me how to solve the problem I'll send them a big e-kiss!
Not sure how impotant this is but it happens in both Firefox and IE8.
Thanks in advance
Dan

Hi Ben, thanks for taking the time to read my query.
The site in question is an intranet site, so I am unable to give you a link to the page. Would the entire page of code rather than just the odd bits help?
Cheers
Dan

Is there a way to have a link from an external page show the top of the page on a PC?

I really appreciate the help in these forums - have solved many an issue. Am down to the last little thing.
If you test the links on : www.muohio.edu/lll/tabbed-test on a Mac, each time you chose a link it goes to the top of the page. This is the desired location.
If you test the links on a PC, either with firefox or IE it uses the tabbed panel as the top.
Is there a way to control this?
THANKS!
Berly

In your document you have got <div id="TabbedPanels1" class="TabbedPanels"> and in the link you have got <li><a href="fla.html?tab=1#TabbedPanels1">Crisis Management</a></li>
What some browsers will do when it sees the #TabbedPanels1 is take you to the spot which is down the page.
Solution: remove #TabbedPanels1 from the link and all is well.
Gramps

Linking to a specific panel from another page and from higher up on same page Spry-UI-1.7

Hi all,
I am using Spry-UI-1.7 for a 4 tab tabbed panel on the bottom of my home page. I'd like to link to the second tab from another page and also from the top of the home page.
I previously used method: http://foundationphp.com/tutorials/spry_url_utils.php and it worked great.
Now, with the Spry-UI-1.7 Tabbed Panel "widget", that method isn't working.
I've reviewed the code from the samples page: http://labs.adobe.com/technologies/spry/samples/tabbedpanels/tabbed_panel_sample.htm
but cannot figure out what I am doing wrong. It shows the following code for linking from another page:
<a href="#" onclick="TabbedPanels2.showPanel(1); return false;">Tab 2</a>
I tried this 'as is' and it didn't work.
I tried it with index.html in place of the # and it didn't work.
(e.g.   <a href="index.html" onclick="TabbedPanels2.showPanel(1); return false;">Tab 2</a>   )
What am I missing here?
(I have the tabbed panel on "index.html" and want to link from "maps.html" and from the top of "index.html"
Thanks for any help for this spry newbie! (read: I need it spelled out like I was a 6 yr. old

This works
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script type="text/javascript" src="SpryAssets/SpryURLUtils.js"></script>
<script src="Spry-UI-1.7/includes/SpryDOMUtils.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryDOMEffects.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryWidget.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryPanelSet.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryPanelSelector.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryFadingPanels.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/SpryTabbedPanels2.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/plugins/TabbedPanels2/SpryFadingPanelsPlugin.js" type="text/javascript"></script>
<script src="Spry-UI-1.7/includes/plugins/TabbedPanels2/SpryTabbedPanelsKeyNavigationPlugin.js" type="text/javascript"></script>
<link href="Spry-UI-1.7/css/TabbedPanels2/SpryTabbedPanels2.css" rel="stylesheet" type="text/css">
<script type="text/javascript"> var params = Spry.Utils.getLocationParamsAsObject(); </script>
<script type="text/xml">

</script>
</head>
<body>
<div id="TabbedPanels2">
<h2>Tab 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sapien lacus, porttitor vitae pretium eget, sodales sed libero. Maecenas non urna lacus, ac sollicitudin justo. Ut erat mi, hendrerit ac accumsan ac, congue eu dui. Pellentesque consectetur condimentum elit, et eleifend urna porta id. Phasellus blandit ullamcorper dignissim. In rutrum, ante non congue fermentum, metus odio bibendum elit, ut congue sapien arcu ac justo. Vivamus sit amet erat nibh, quis dignissim libero. Pellentesque in sapien felis, et volutpat eros. Maecenas adipiscing, eros sit amet placerat cursus, arcu lacus consectetur lectus, non ultricies neque urna laoreet purus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. </p>
<h2>Tab 2</h2>
<p>Nulla facilisi. Vestibulum ipsum elit, tincidunt sed tristique sit amet, faucibus in orci. Nunc sit amet elit lorem. Sed eget arcu ipsum, pharetra ullamcorper lectus. Sed ac diam ac tortor mattis mollis. Etiam mattis felis vel augue tempus in rhoncus ligula elementum. Vestibulum ut iaculis risus. Aliquam erat sem, feugiat vel laoreet in, lobortis non mauris. Vestibulum neque nibh, vehicula eleifend tincidunt sed, bibendum id dolor. Pellentesque quis libero nec orci porttitor faucibus vitae in velit. Pellentesque dignissim sem ut justo interdum id egestas tellus fringilla. Vestibulum tempor, turpis eget dignissim luctus, est erat ultricies turpis, non tempus massa elit in nulla. Sed eu arcu vel enim laoreet hendrerit at vel enim. Integer semper malesuada sem quis porttitor.</p>
<h2>Tab 3</h2>
<p>Suspendisse potenti. Proin ut erat sit amet turpis egestas tempor. Integer arcu dolor, aliquam ut egestas nec, pharetra ut mauris. Duis urna mi, aliquam id vulputate et, consequat in dolor. Duis congue sem feugiat nulla malesuada scelerisque. Aenean vitae augue nec diam euismod imperdiet. In accumsan consectetur ante a vestibulum. Phasellus eu nulla et lectus tincidunt porttitor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin mauris massa, venenatis ut fringilla interdum, imperdiet et neque. Sed ut risus metus.</p>
</div>
<script type="text/javascript">
// BeginOAWidget_Instance_2138522: #TabbedPanels2
        var TabbedPanels2 = new Spry.Widget.TabbedPanels2("TabbedPanels2", {
            injectionType: "replace",
            widgetID: "TabbedPanels2",
            autoPlay: false,
            defaultTab: params.tab ? params.tab : 0,
            enableKeyboardNavigation: true,
            hideHeader: true,
            tabsPosition: "top",
            event:"click",
            stopOnUserAction: true,
            displayInterval: 5000,
            minDuration: 300,
            maxDuration: 500,
            stoppedMinDuration: 100,
            stoppedMaxDuration: 200,
            plugIns:[]
// EndOAWidget_Instance_2138522
</script>
</body>
</html>

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 specific tab on another page but don't anchor

Hello, I used this tutorial to link to a specific tab on another page:
http://foundationphp.com/tutorials/spry_url_utils.php
It works great, except I don't want to go directly to the tabbed panel. I want the particular tab to be active, but the page should load as it normally does. So the user should always be at the top of the page when it loads.
This is the link code:
<a href="registration.html?tab=1#form">
As you can see, #form identifies the tabbed panel, but it also directs the link where to go. I only want to use it as an identifier, not as a navigator as well.
Thank you.

FShea31 wrote:
Hello, I used this tutorial to link to a specific tab on another page:
http://foundationphp.com/tutorials/spry_url_utils.php
It works great, except I don't want to go directly to the tabbed panel. I want the particular tab to be active, but the page should load as it normally does. So the user should always be at the top of the page when it loads.
This is the link code:
<a href="registration.html?tab=1#form">
As you can see, #form identifies the tabbed panel, but it also directs the link where to go. I only want to use it as an identifier, not as a navigator as well.
Thank you.
Remove the hash part of the URL parameter and just open the tab in the constructor
<a href="registration.html?tab=1">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1",
{defaultTab: params.tab ? params.tab : 0});
I hope this helps.
Ben

Link to panel on seperate page

Hello:
I am trying to link from my menu bar to a specific panel on a different page. I attempted to use this where hc_menu is my anchor to the specific panel (4) and heartlandcafe.html is the page.
<a href="HeartlandCafe.html#hc_menu" onclick="TabbedPanels2.showPanel(4); return false;"> Menu</a>
The link will bring me to the site, but wont open my specific panel.
I saw a thread with my exact question leading to this site: http://labs.adobe.com/technologies/spry/samples/utils/URLUtilsSample.html but could not understand what I was supposed to do. Can someone provide a translation? I would greatly appreciate it!
Thanks,
Matt

Hi Matt,
change
<a href="HeartlandCafe.html#hc_menu" onclick="TabbedPanels2.showPanel(4); return false;"> Menu</a>
to
<a href="HeartlandCafe.html?panel=4> Menu</a>
Then in the new page add
<script src="SpryAssets/spryURLUtils.js" type="text/javascript"></script>
to the <head> section and add
<script type="text/javascript">

</script>
to just above </body>
For further info go to
http://labs.adobe.com/technologies/spry/samples/utils/URLUtilsSample.html?panel=3#examples
I hope this helps.
Ben

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.

External redirect to TabbedPanel within Index

Hi,
I have a website that uses Spry tabbedPanels for its
different pages areas. With that the URL never changes from the
initial site. www.netsourcestorage.com when changing pages.
I need to create an external link (page) that just redirects
to my main index page but on starting with Tab4 contents opened.
example: www.netsourcestorage.com/wsca goes to
www.netsourcestorage.com tab4-page content...
What code is necessary in both the index page/tabs and in the
external redirect page?
Thanks...

SOLVED.
Added the SpryURLUtils.js to pull a param out of the URL.
Then apply it to an option on the VAR tabbedpanels1.
<script src="SpryAssets/SpryURLUtils.js"
type="text/javascript"></script>
<script type="text/javascript">
// Grabs the values of the URL parameters for the current
URL.
var params = Spry.Utils.getLocationParamsAsObject();
</script>
****the rest of your page
var TabbedPanels1 = new
Spry.Widget.TabbedPanels("TabbedPanels1", { defaultTab:
(params.panel ? params.panel : 0)});
The : 0 means if no params are given it will default to the
first tab (zero tab)
So in my query below: www.netsourcestorage.com?panel=3
will now open the site with the fourth tab panel from the
left open/default
** I found the SpryURLUtils.js in the Adobe Spry
1.6.1/includes new release (~mar 08). Not included in initial CS3
release.

Spry collabsible panel add button or text link to get panel to close

I have a spry collapsible panel here www.AmericanContractorsExchange.com. I am using the col-panel to hide what wil become the login area. I would like to add both "text" and buttons to various parts of the page to open or close the panel.
Example one. When user clicks on the " Log in or Register" text "top" the panel opens.
There option is to login
Register
or click to close panel... button.
( I wish to know how to program the buttion function to close the panel please)
Example 2: Within the other spry widiget on the page, the spry tabbed panels, is the "content". I would like to have "text" or a "button" that a user could click to have the
"spry collapsible" panel drop down / open so they can login or register.
Thanks Gramps...what is the address will send box of cigars!
S Valencia

Try the following
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="SpryAssets/SpryCollapsiblePanel.js" type="text/javascript"></script>
<script src="SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet" type="text/css">
<link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Tab</div>
<div class="CollapsiblePanelContent">Content</div>
</div>
<div>
<p><a href="#" onclick="CollapsiblePanel1.open();">REGISTER</a></p>
<input name="myButton" type="button" value="Close Panel" onclick="CollapsiblePanel1.close(); return false;">
</div>
<div id="TabbedPanels1" class="TabbedPanels" style="margin-top: 20px;">
<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"><p><a href="#" onclick="CollapsiblePanel1.open();">REGISTER</a></p></div>
    <div class="TabbedPanelsContent"><input name="myButton" type="button" value="Close Panel" onclick="CollapsiblePanel1.close(); return false;"></div>
</div>
</div>
<script type="text/javascript">
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false});
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>
Please wait with the shipment, I am currently living at a transitory address; my impending address will be c/o Heaven
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..

Change text "link" color only in Spry Tab content area

I need to have multiple text link colors in my site for light
and dark background colors. The only regions in my site that have a
white background are in the Spry Tab Panel content area. I can't
figure out how to change the text color for text links in the spry
content only. I tried to add a:link ..etc... to the style sheet,
but it did not effect anything
(I also need to clean my style sheet (s). But that comes
next.
Here
is a Link to a Sample Page in my site
null

Here is the SpryTabbedPanels style sheet in my site. I can't
seem to figure out the changes I need to make to effect the content
area.
I tried to add the following (see .TabbedPanelsContentGroup
below)
a: link {
color: #0099CC;
text-decoration: none
a:active {
color: #99CC33;
text-decoration: none
a:visited {
color: #0099CC;
text-decoration: none
a:hover {
color: #99CC33;
text-decoration: underline
@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
* The default style for a TabbedPanels widget places all tab
buttons
* (left aligned) above the content panel.
/* This is the selector for the main TabbedPanels container.
For our
* default style, this container does not contribute anything
visually,
* but it is floated left to make sure that any floating or
clearing done
* with any of its child elements are contained completely
within the
* TabbedPanels container, to minimize any impact or
undesireable
* interaction with other floated elements on the page that
may be used
* for layout.
* If you want to constrain the width of the TabbedPanels
widget, set a
* width on the TabbedPanels container. By default, the
TabbedPanels widget
* expands horizontally to fill up available space.
* The name of the class ("TabbedPanels") used in this
selector is not
* necessary to make the widget function. You can use any
class name you
* want to style the TabbedPanels container.
.TabbedPanels {
margin: 0px;
float: right;
clear: none;
width: 82%; /* IE Hack to force proper layout when preceded
by a paragraph. (hasLayout Bug)*/
padding-top: 0px;
padding-right: 0px;
padding-bottom: 2px;
padding-left: 0px;
/* This is the selector for the TabGroup. The TabGroup
container houses
* all of the tab buttons for each tabbed panel in the
widget. This container
* does not contribute anything visually to the look of the
widget for our
* default style.
* The name of the class ("TabbedPanelsTabGroup") used in
this selector is not
* necessary to make the widget function. You can use any
class name you
* want to style the TabGroup container.
.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
/* This is the selector for the TabbedPanelsTab. This
container houses
* the title for the panel. This is also the tab "button"
that the user clicks
* on to activate the corresponding content panel so that it
appears on top
* of the other tabbed panels contained in the widget.
* For our default style, each tab is positioned relatively 1
pixel down from
* where it wold normally render. This allows each tab to
overlap the content
* panel that renders below it. Each tab is rendered with a 1
pixel bottom
* border that has a color that matches the top border of the
current content
* panel. This gives the appearance that the tab is being
drawn behind the
* content panel.
* The name of the class ("TabbedPanelsTab") used in this
selector is not
* necessary to make the widget function. You can use any
class name you want
* to style this tab container.
.TabbedPanelsTab {
position: relative;
top: 1px;
float: left;
padding: 4px 10px;
margin: 0px 1px 0px 0px;
background-color: #CCCC99;
list-style: none;
border-left: solid 1px #CCC;
border-bottom: solid 1px #999;
border-top: solid 1px #999;
border-right: solid 1px #999;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
font-family: sans-serif;
font-size: 12px;
font-weight: bold;
color: #000000;
/* This selector is an example of how to change the appearnce
of a tab button
* container as the mouse enters it. The class
"TabbedPanelsTabHover" is
* programatically added and removed from the tab element as
the mouse enters
* and exits the container.
.TabbedPanelsTabHover {
background-color: #99CC33;
color: #000000;
/* This selector is an example of how to change the
appearance of a tab button
* container after the user has clicked on it to activate a
content panel.
* The class "TabbedPanelsTabSelected" is programatically
added and removed
* from the tab element as the user clicks on the tab button
containers in
* the widget.
* As mentioned above, for our default style, tab buttons are
positioned
* 1 pixel down from where it would normally render. When the
tab button is
* selected, we change its bottom border to match the
background color of the
* content panel so that it looks like the tab is part of the
content panel.
.TabbedPanelsTabSelected {
background-color: #FFFFFF;
border-bottom: 1px solid #EEE;
color: #000000;
/* This selector is an example of how to make a link inside
of a tab button
* look like normal text. Users may want to use links inside
of a tab button
* so that when it gets focus, the text *inside* the tab
button gets a focus
* ring around it, instead of the focus ring around the
entire tab.
.TabbedPanelsTab a {
color: black;
text-decoration: none;
/* This is the selector for the ContentGroup. The
ContentGroup container houses
* all of the content panels for each tabbed panel in the
widget. For our
* default style, this container provides the background
color and borders that
* surround the content.
* The name of the class ("TabbedPanelsContentGroup") used in
this selector is
* not necessary to make the widget function. You can use any
class name you
* want to style the ContentGroup container.
.TabbedPanelsContentGroup {
clear: both;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
border-top: solid 1px #999;
border-right: solid 1px #999;
background-color: #FFFFFF;
color: #000000;
a: link {
color: #0099CC;
text-decoration: none
a:active {
color: #99CC33;
text-decoration: none
a:visited {
color: #0099CC;
text-decoration: none
a:hover {
color: #99CC33;
text-decoration: underline
/* This is the selector for the Content panel. The Content
panel holds the
* content for a single tabbed panel. For our default style,
this container
* provides some padding, so that the content is not pushed
up against the
* widget borders.
* The name of the class ("TabbedPanelsContent") used in this
selector is
* not necessary to make the widget function. You can use any
class name you
* want to style the Content container.
.TabbedPanelsContent {
padding: 4px;
/* This selector is an example of how to change the appearnce
of the currently
* active container panel. The class
"TabbedPanelsContentVisible" is
* programatically added and removed from the content element
as the panel
* is activated/deactivated.
.TabbedPanelsContentVisible {
/* Vertical Tabbed Panels
* The following rules override some of the default rules
above so that the
* TabbedPanels widget renders with its tab buttons along the
left side of
* the currently active content panel.
* With the rules defined below, the only change that will
have to be made
* to switch a horizontal tabbed panels widget to a vertical
tabbed panels
* widget, is to use the "VTabbedPanels" class on the
top-level widget
* container element, instead of "TabbedPanels".
/* This selector floats the TabGroup so that the tab buttons
it contains
* render to the left of the active content panel. A border
is drawn around
* the group container to make it look like a list container.
.VTabbedPanels .TabbedPanelsTabGroup {
float: left;
width: 10em;
height: 20em;
background-color: #CCCC99;
position: relative;
border-top: solid 1px #999;
border-right: solid 1px #999;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
/* This selector disables the float property that is placed
on each tab button
* by the default TabbedPanelsTab selector rule above. It
also draws a bottom
* border for the tab. The tab button will get its left and
right border from
* the TabGroup, and its top border from the TabGroup or tab
button above it.
.VTabbedPanels .TabbedPanelsTab {
float: none;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
/* This selector disables the float property that is placed
on each tab button
* by the default TabbedPanelsTab selector rule above. It
also draws a bottom
* border for the tab. The tab button will get its left and
right border from
* the TabGroup, and its top border from the TabGroup or tab
button above it.
.VTabbedPanels .TabbedPanelsTabSelected {
background-color: #CCCC99;
border-bottom: solid 1px #999;
/* This selector floats the content panels for the widget so
that they
* render to the right of the tabbed buttons.
.VTabbedPanels .TabbedPanelsContentGroup {
clear: none;
float: left;
padding: 0px;
width: 30em;
height: 20em;

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

Linking to TabbedPanels

Similar Messages

Maybe you are looking for