Spry Tabs; Tabs within tabs

Hi,
Not sure if i did this correctly, i have some tabs and
inserted tabs inside the contents area of the spry tabs. Seems
simple enough...but on preview it shows that inserted tabs overlap
the tabs its in. I tried fixing it on the CSS file. but had no
luck.
any suggestions?
thanks

....... Should i be asking this question on another board?

Similar Messages

Spry Tabbed XML data panels within HTMLPanel not working.

Many thanks for reading.
s
I trying to provide a rapid solution using adobe's samples
to make Spry Tabs work within an html panel (in order to avoid
many links in my page).
I am using the following code:
initial page with html panel with the ready products.js to parse the links:
<script src="../SpryAssets/xpath.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryData.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryPagedView.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryDOMUtils.js" type="text/javascript"></script>
<script src="../SpryAssets/SpryHTMLPanel.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript" src="../SpryAssets/SpryDataExtensions.js"></script>
<script src="SpryNestedXMLDataSet.js" type="text/javascript"></script>
<script src="../SpryAssets/products.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="TabbedPanels/SpryTabbedPanels.css"/>
<script src="TabbedPanels/SpryTabbedPanels.js"></script<script type="text/javascript">
var ds1 = new Spry.Data.XMLDataSet("ajaxbibliaxmlbridgetitle.php", "root/row[katigoria=1]", {sortOnLoad: "ID_BIBLIOU", sortOrderOnLoad: "ascending"});
var pv1 = new Spry.Data.PagedView( ds1 ,{ pageSize:10 });
var pv1PagedInfo = pv1.getPagingInfo();
//var TabbedPanels1 = new Spry.Widget.TabbedPanels();
</script>
</head>
<body class="twoColFixRtHdr">
<div id="container">
<div id="sidebar1">
<div id="productPageLinks">
   <ul>
    <li><a href="index.php">Index</a></li>
    <li><a href="booklist.php">Product List</a></li>
        <li><a href="test.php">Σχετικά με τη Βιβλιοθήκη</a></li>
   </ul>
</div>
</div>
<div id="mainContent">
<br />
<div class="HTMLPanelLoadingContent"> Waiting</div>
<div class="HTMLPanelErrorContent"> error </div>
</div>
</div>
</body>
</html>
Products.js (adobe'S change to can load xml dataset)
var mainPanel = null;
// Our initialization function which unobtrusively attaches
// click handlers on the product links within the page.
function InitProductPage()
mainPanel = new Spry.Widget.HTMLPanel("mainContent" , { evalScripts: true });
    var observer = {onPostUpdate: function(){ Spry.Data.initRegions('mainContent');
mainPanel.addObserver(observer);
// For every link on the page which points to a product page,
// attach an onclick handler that will intercept clicks and
// and fire off a request to load the URL via the HTMLPanel.
// For these links, we want to load the static product page
// and extract out the content underneath the "mainContent"
// node.
Spry.$$("#productPageLinks a").addEventListener("click", function(e)
mainPanel.loadContent(this.href, { id: "mainContent" });
return false;
}, false);
// For every link on the page which points to a product HTML
// fragment, attach an onclick handler that will intercept clicks and
// and fire off a request to load the URL via the HTMLPanel.
// For these links, we are loading HTML fragments, so there is no
// need to specify an ID to extract out. The HTMLPanel will insert
// all of the content recieved.
Spry.$$("#productFragmentLinks a").addEventListener("click", function(e)
mainPanel.loadContent(this.href);
return false;
}, false);
// Add our InitProductPage() function as a load listener
// so that it gets executed once the page has fully loaded.
Spry.Utils.addLoadListener(InitProductPage);
XML data and stuff all loaded correctly
What I am trying to do is to load a second page from a link in my initial page
that contains a Tabbed Panel.
The page loads but no panel functionality exists. The first Panel load correctly but behaves as a simple html page .
I have searched several hours the forums and playing around by moving the definition of Spry.Widget.TabbedPanels within
the initial HTMLPanel page and other spots but this produced js errors as expected (because the tab panel definitions exist in bookcategories.php)
which is loaded only when it is called.
Any ideas?
Page to load is like this :
<bookcategories.php>
<link rel="stylesheet" type="text/css" href="TabbedPanels/SpryTabbedPanels.css"/>
<script src="TabbedPanels/SpryTabbedPanels.js"></script>
<script language="JavaScript" type="text/javascript" src="../SpryAssets/SpryDataExtensions.js"></script>
</head>
<body >
<div id="container">
<div id="mainContent">
         <div class="TabbedPanels" id="TabbedPanels1">
<ul class="TabbedPanelsTabGroup">
          <li class="TabbedPanelsTab">SOmething ... </li>
          <li class="TabbedPanelsTab">Something else </li>
<
</ul>
<div class="TabbedPanelsContentGroup">
          <div class="TabbedPanelsContent">Blah Blah
              <div spry:region="pv1" id="bibliapv"><br />
                <br />
              <div spry:state="ready">
                  <table width="775" height="42" >
                    <tr style="color:#900"; >
<th etc>
                    </tr>
                    <tr spry:repeat="pv1" spry:even="even" spry:odd="odd">
                      <td >       {ID_}
                     </td>
                      <td>{Writer}</td>
                      <td>{Book_Title}</td>
                       </tr>
                  </table>
                </div>
              </div>
          <div class="TabbedPanelsContent">Tab 2 Content</div>
<div class="TabbedPanelsContent">Tab 3 Content</div>
   <div class="TabbedPanelsContent">Tab 4 Content</div>
</div>
</div>
</div>
<br class="clearfloat" />
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>
Many thanks

Ok I went back through everything and checked to make sure my
files were in the right places both my SpryTabbedPanels.css and my
SpryTabbedPanels.js are in the SpryAssets folder and they work fine
until I try and add data from an xml file to them then the tabs
populate with the info but become unclickable and the content area
has every bit of content in on tab. Below is what I have let me
know what I'm doing wrong I am using Spry 1.6
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml"
xmlns:spry="
http://ns.adobe.com/spry">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=utf-8" />
<title>Untitled Document</title>
<script src="SpryAssets/xpath.js"
type="text/javascript"></script>
<script src="SpryAssets/SpryData.js"
type="text/javascript"></script>
<script src="SpryAssets/SpryTabbedPanels.js"
type="text/javascript"></script>
<script type="text/javascript">

</script>
<link href="SpryAssets/SpryTabbedPanels.css"
rel="stylesheet" type="text/css" />
</head>
<body>
<div spry:region="ds1">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li spry:repeat="ds1" class="TabbedPanelsTab"
tabindex="0">{name}</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div spry:repeat="ds1"
class="TabbedPanelsContent">{desc}</div>
</div>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>

Spry Tabbed Panels - Forms within Panels

Any thoughs on how to place updatable Forms within Tabbed
Panels. I thought it might be interesting to try to use the Spry
Tabbed Panels to allow Updating specific areas of a database using
each tab to update specific fields of a table. When doing this
using the Update server behavior I create all sorts of variable
issues.
Anybody have thoughts on this... or an alternate method to
create the same effect?

Hi Gramps-
Were you able to use the widget in Firefox? For me, it just displays of the panels, one on top of the other and no tabs. Maybe my browser's broken (that would be the best case scenario). I'll start there.
Thanks!
Dianne

Capturing user clicks within Spry Tabbed Panels

Hi,
I am using the spry tabbed panels with CS3 for the first time
and need to capture when a user clicks on a new tab. I need this to
re-set a PHP variable when the user navigates to a new tab but
cannot see any documented way of getting this trigger.
Any help would be much appreciated!

pixel1024 wrote:
> I am using the spry tabbed panels with CS3 for the first
time and need to
> capture when a user clicks on a new tab. I need this to
re-set a PHP variable
> when the user navigates to a new tab but cannot see any
documented way of
> getting this trigger.
Spry is a client-side technology; PHP is server-side. To
reset a PHP
variable, you need to communicate with the server. I have
done only very
limited experimentation with using Spry 1.6 to communicate
with PHP on
the server, so can't offer much advice. However, you might
find the
following page points you in the right direction (view the
source code
to see how it's done on the client side):
http://labs.adobe.com/technologies/spry/samples/form_submission/SubmitFormWithXHRSample.ph p.html
That example uses onsubmit with a form. I haven't tried it,
but you
should be able to adapt it by using onclick.
David Powers, Adobe Community Expert
Author, "The Essential Guide to Dreamweaver CS3" (friends of
ED)
Author, "PHP Solutions" (friends of ED)
http://foundationphp.com/

Spry tabbed panels, all content showing on one page, please help?

Hi there,
I'm developing a website for my friend and i'm using DW CS5 spry tabbed panels. Everything looks great in DW but when i load the page to the server all of the content shows as one page and i can't navigate through tabs.http://dndperspective.co.cc/
I'll give you the whole code, I am fairly experienced in html but have never used spry before, so it may be a silly mistake. Any Suggestions?
Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DND Perspective</title>
<script src="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style></head>
<body>
<div align="center">
<p align="left" class="style4">DND </p>
</div>
<p align="left">
<img style="border:6px inset #545565; margin-left: 150px; margin-bottom: 50px;" src="newbanner.jpg" width="701" height="244" /> </p>
<p align="center">
<p align="center">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup" >
    <li class="TabbedPanelsTab" tabindex="0"><img src="images/homebar.jpg" width="125" height="50" /> </li>
    <li class="TabbedPanelsTab" tabindex="0"><img src="images/aboutbar.jpg" width="125" height="50" /></li>
    <li class="style11 TabbedPanelsTab" tabindex="0"><em><img src="images/servicesbar.jpg" width="125" height="50" /></em></li>
    <li class="TabbedPanelsTab style11" tabindex="0"><img src="images/gallerybar.jpg" width="125" height="50" /></li>
    <li class="TabbedPanelsTab style11" tabindex="0"><img src="images/pricingbar.jpg" width="125" height="50" /></li>
    <li class="TabbedPanelsTab style11" tabindex="0"><img src="images/contactbar.jpg" width="125" height="50" /></li>
</ul>
<div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent style1">
      <div align="center">
        <p class="style11">Welcome to DND </p>
        <p>We are so glad you took the time to visit our site during your busy planning schedule. We have tried to make this site as user friendly as possible so you can get back to planning your big day. We provide straight foward and dependable services so you've got nothing to worry about.</p>
        <p>We are located in Rhode Island, but service Massachusetts and Connecticut as well. </p>
        <p>Please visit our services page to discover all photography sessions we have available such as:</p>
        <p>Wedding Photography</p>
        <p> Engament Photos</p>
        <p>Senior Portraits </p>
        <p>Anniversary</p>
        <p>& More!!!</p>
        <p> </p>
      </div>
    </div>
    <div class="TabbedPanelsContent">
      <p class="style1"><strong><u>S.W</u></strong> -<em> Owner and Photographer</em>. For more information about her please click <a href="Untitled-11.pdf">here</a>!
    </div>
    <div class="TabbedPanelsContent">Under Construction...</div>
    <div class="TabbedPanelsContent">Under Construction....</div>
    <div class="TabbedPanelsContent style1">
<p>We hear at DND understand that packages and pricing may not provide the precise accomadations to fit you unique and carefully planned big day. We are very open and happy to discuss with you an individual catered package or plan that fits your style and most of all your budget. Whether you need us for just an hour or a full day we want to make your day as special as possible. We have services available starting at just $200.00. Below you will find our most popular packages, printing prices &
packages, custom videos, thank you cards and albums.</p>
           <hr width="50%" align="left" />
      <p><strong>Package 1 - $500.00</strong></p>
      <p>3 Hours; 1 location - Incl. DVD with unlimited high resolution shots and free basic retouching and enhancing; webgallery with or without password protection; Special Effects on 5 photos; and 1 8"x10" fine art high quality print. *</p>
      <p><strong>Package 2 - $575.00</strong></p>
      <p>3 Hours; 2 locations - Incl. DVD with unlimited high resolution shots and free basic retouching and enhancing; webgallery with or without password protection; Special Effects on 5 photos; and 1 8"x10" fine art high quality print. *</p>
      <p><strong>Package 3 - $700.00</strong></p>
      <p>4 Hours; 3 locations - Incl. DVD with unlimited high resolution shots and free basic retouching and enhancing; webgallery with or without password protection; Special Effects on 5 photos; and 1 8"x10" fine art high quality print. *</p>
      <p>*Each additional hour or location available for $100.00. Locations beyond 20 miles will require additional fees. Additional DVD priced at $25.00 each.</p>
           <hr width="50%" align="left" />
      <p><strong>Prints</strong>: (Fine Art High Quality)**</p>
      <p>Individual prices: 8"x10" = $12.99; 10"x13" = $19.99; 2 - 5"x7" = $12.99; 4 - 4"x6" = $11.99</p>
      <p>(Custom sizes available - Custom framing available)</p>
      <p><strong>Package 1:</strong></p>
      <p>3 - 8"x10"; 4 - 5"x7"; 4 - 4"x6" = $50.00</p>
      <p><strong>Package 2:</strong></p>
      <p>5 - 8"x10"; 6 - 5"x7"; 6 - 4"x6" = $90.00</p>
      <p><strong>Package 3:</strong></p>
      <p>8 - 8"x10"; 4 - 5"x7"; 4 - 4"x6" = $125.00</p>
      <p><strong>Package 4:</strong> (Basic Prints)</p>
      <p>Any 100 photos printed 4"x6" = $100.00</p>
           <hr width="50%" align="left" />
      <p><strong>Custom video:</strong>**</p>
      <p>Any 100 photos put to royalty-free music = $50.00</p>
          <hr width="50%" align="left" />
      <p><strong>Custom thank you cards for your guests:</strong>**</p>
      <p>300 cards - 4"x6" = $350.00</p>
      <p>100 cards - 4"x6" = $150.00</p>
     <hr width="50%" align="left" />
      <p><strong>Custom Albums Available: </strong>(prices vary - special order)</p>
      <p>Bride & Groom Albums</p>
      <p>Parent Albums</p>
           <hr width="50%" align="left" />
      <p>**Please be aware that your DVD will be available within a week; Web Gallery within 5-7 business days; Prints, Cards or Video within 2-6 weeks. Thank you!</p>
    </div>
    <div class="TabbedPanelsContent style5">
      <p> Contact DND Perspective:</p>
      <p>The best way to reach us is via email .</p>
      <p>You can alternately reach us anytime at ...!</p>
    </div>
    <div class="TabbedPanelsContent">
      <div align="center">
        <p><span class="style1">About Info</span></p>
        <p> </p>
      </div>
    </div>
</div>
</div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<script type="text/javascript">

</script>
</body>
</html>

You called it: your links to the SpryAssets are linking to your hard drive, not to the files within the folder on the server.
Correct these links:
<script src="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
And you should be good to go.
Beth
ps. If you run into more difficulties with the Spry Widgets, take your questions to the Dreamweaver Spry Forum http://forums.adobe.com/community/labs/spry, where they will get quicker attention.
B

Spry Active Tables in Spry tabbed panels

Hi everyone and thanks for advance for dealing with my inexperience.
I'm using dreamweaver cs4 on a mac and I'm trying to create 2 tabbed panels, each with a Spry active table within it that uses a nondestructive filter wired to a spry select menu to navigate through galleries. When I make 1 of these, it works perfectly. The problem is that when I try to create the second one, it screws everything up. Sometimes it can't find the datasets for the select lists anymore, sometimes nothing shows up in one of the tables. I've run a lot of trial and error, and I just can't detect a pattern. I have very little experience coding and I'm working form a tutorial book. I didn't think adding the second table in would cause a problem, but apparently it does. Can anybody help make this work? I'll post the code below.
Thanks!
-CB
This works just fine for one of the tabs:
var rs_SpryCasteAbilities = new Spry.Data.HTMLDataSet(null, "CasteAbilities");
var rs_SpryProfAbilities = new Spry.Data.HTMLDataSet(null, "ProfessionAbilities");
rs_SpryProfAbilities.gallery = '1';
function chooseSet(dataSet, row, rowNumber)
if (row['Prof_ID'] == rs_SpryProfAbilities.gallery) {
return row;
return null;
rs_SpryProfAbilities.filter(chooseSet);
function changeSet(set)
rs_SpryProfAbilities.gallery = set;
rs_SpryProfAbilities.filter(chooseSet);
rs_SpryProfAbilities.setCurrentRowNumber(0);
var rows = rs_SpryProfAbilities.getData();
for (var i = 0; i < rows.length; i++) {
if (rows[i]['Prof_ID'] == set) {
rs_SpryProfAbilities.setCurrentRowNumber(i);
break;
var rs_Professions = new Spry.Data.HTMLDataSet(null, "Professions");
var rs_Castes = new Spry.Data.HTMLDataSet(null, "Castes");
//with this being the code for the selectors further down the page//
<div spry:region="rs_Castes">
                    <select name="select2" spry:repeatchildren="rs_Castes">
                      <option value="{Caste_ID}">{Caste_Name}</option>
                    </select>
                  </div>
//and//
<div spry:region="rs_Professions">
      <select name="select" spry:repeatchildren="rs_Professions" onchange="changeSet(this.value)">
        <option value="{Profession_ID}">{Profession_Name}</option>
      </select>
    </div>
This does not work for both:
var rs_SpryCasteAbilities = new Spry.Data.HTMLDataSet(null, "CasteAbilities");
rs_SpryCasteAbilities.gallery = '1';
function chooseSet(dataSet, row, rowNumber)
if (row[Caste_ID'] == rs_SpryCasteAbilities.gallery) {
return row;
return null;
rs_SpryCasteAbilities.filter(chooseSet);
function changeSet(set)
rs_SpryCasteAbilities.gallery = set;
rs_SpryCasteAbilities.filter(chooseSet);
rs_SpryCasteAbilities.setCurrentRowNumber(0);
var rows = rs_SpryCasteAbilities.getData();
for (var i = 0; i < rows.length; i++) {
if (rows[i]['Caste_ID'] == set) {
rs_SpryCasteAbilities.setCurrentRowNumber(i);
break;
var rs_SpryProfAbilities = new Spry.Data.HTMLDataSet(null, "ProfessionAbilities");
rs_SpryProfAbilities.gallery = '1';
function chooseSet(dataSet, row, rowNumber)
if (row['Prof_ID'] == rs_SpryProfAbilities.gallery) {
return row;
return null;
rs_SpryProfAbilities.filter(chooseSet);
function changeSet(set)
rs_SpryProfAbilities.gallery = set;
rs_SpryProfAbilities.filter(chooseSet);
rs_SpryProfAbilities.setCurrentRowNumber(0);
var rows = rs_SpryProfAbilities.getData();
for (var i = 0; i < rows.length; i++) {
if (rows[i]['Prof_ID'] == set) {
rs_SpryProfAbilities.setCurrentRowNumber(i);
break;
var rs_SpryProfessions = new Spry.Data.HTMLDataSet(null, "Professions");
var rs_Castes = new Spry.Data.HTMLDataSet(null, "Castes");
//With this being the code for the selectors further down the page//
<div spry:region="rs_Castes">
                    <select name="select" spry:repeatchildren="rs_Castes" onchange="changeSet(this.value)">
                      <option value="{Caste_ID}">{Caste_Name}</option>
                    </select>
                  </div>
//and//
<div spry:region="rs_SpryProfessions">
    <select name="select2" spry:repeatchildren="rs_Professions" onchange="changeSet(this.value)">
      <option value="{Profession_ID}">{Profession_Name}</option>
    </select>
</div>

Thanks for the reply Ben!
Here's the url:
http://www.iotheatre.com/GoldenAgeAbilities.php
As you can see, the filter in the 2nd tab works as intended, but there is nothing showing up at all in the first tab! Any help would be greatly appreciated.
-CB

How can I insert an existing ApDiv into a tab in the Spry Tabbed Panel?

I have 5 of them all containing nested Apdiv within nested ApDivs (a long storie ) that I would like to insert into 5 tabs in the Spry Tabbed Panel.
Please help.

"Hi Gramp,I realize I have made hard work for myself but I really don't know any better. I also realize now that taking on this project may have been a mistake :-)I taught myself how to use the design side of Dream Weaver. These five ApDivs were created in the content area of the spry tool and it worked fine. (yes a lot of work though)For the first time I looked at the code side. I wanted to try to bring a peace of code from another page for something unrelated and when it didn't work I took it out and without noticing, deleting a line from the Spry tool.Of course like a classic newbe I was working without a backup copy so here I am. Loosing hours of tedious work and on the verve of tears :-)I do have some questions though. My APDiv
What does "apDiv1" stands for and what does "My APDiv" stands for?Is the only thing I have to do is changing this line for my five ApDivs and paste it in the appropriate places in the code? Thanks again,Gilaad
Date: Sat, 16 Jun 2012 20:39:07 -0600
From: [email protected]
To: [email protected]
Subject: How can I insert an existing ApDiv into a tab in the Spry Tabbed Panel?
    Re: How can I insert an existing ApDiv into a tab in the Spry Tabbed Panel?
    created by Altruistic Gramps in Spry Framework for Ajax - View the full discussion
You have really made hard work for yourself by using APDiv's. I suppose it can be done, but I would not. To answer your question, I have create an example as per#apDiv1
My APDiv
Content 2
Tab 1
Gramps
     Replies to this message go to everyone subscribed to this thread, not directly to the person who posted the message. To post a reply, either reply to this email or visit the message page: http://forums.adobe.com/message/4498679#4498679
     To unsubscribe from this thread, please visit the message page at http://forums.adobe.com/message/4498679#4498679. In the Actions box on the right, click the Stop Email Notifications link.
     Start a new discussion in Spry Framework for Ajax by email or at Adobe Forums
For more information about maintaining your forum email notifications please go to http://forums.adobe.com/message/2936746#2936746.

Spry tabbed panels as menu system

Hi,
This is actually for Dreamweaver CS6.    What I'm trying to do is use spry tabbed panels as horizontal my menu system.    I want to have basically the functionality of the adobe.com menu system where the drop downs are tabbed and the content box size varies depending on the tab and the content box moves it's position relative to the tab that's selected.     I did manage to get the mouseover working so the tab's change according to which tab the mouse passes over.
My current problems are these:
I managed to change the content panel box size so it's not the same width as the full panel tab group however I cannot get it to move relative to which tab is selected, it just stays fixed in one location.
The content tabs are pushing the body of my page down instead of showing up over top of it which is obvioulsy not very condusive for a menu system.
I would like the default to show none of the panels until someone mouseover's one of the tab's and for the panels to dissapear when the mouse is not in the menu system.
For something similar to the adobe.com menu system am i using the right feature (it looks like tabbed panels to me) or should I be using a different spry feature, I would like to have text and an image in the content box under each tab just for overall effect.
I'm quite inexperienced with CSS and Javascripting and have basically gotten this far with trial and error modifying the CSS settings but I'm unable to modify the javascript on my own.
Any help or suggestions would be greatly appreciated!!
Below is my tabbed panels css:
.TabbedPanels {
overflow: hidden;
margin: 0px;
padding: 0px;
clear: none;
width: 1000px; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
-webkit-transition: all;
-moz-transition: all;
-ms-transition: all;
-o-transition: all;
transition: all;
.TabbedPanelsTabGroup {
margin: 0px;
padding: 0px;
color: #FFF;
background-color: #000;
width: 1000px;
height: 25px;
.TabbedPanelsTab {
position: relative;
top: 0px;
float: left;
padding: 4px 21px;
margin: 0px 0px 0px 0px;
background-color: #000;
list-style: none;
border-left: solid 0px #000;
border-bottom: solid 0px #000;
border-top: solid 2px #000;
border-right: solid 0px #000;
-moz-user-select: none;
-khtml-user-select: none;
cursor: pointer;
width: 1000;
height: 15px;
font-family: "Myriad Pro";
font-size: 1em;
font-weight: normal;
.TabbedPanelsTabHover {
background-color: #D31145;
-webkit-transition: all;
-moz-transition: all;
-ms-transition: all;
-o-transition: all;
transition: all;
.TabbedPanelsTabSelected {
background-color: #D31145;
border-bottom: 0px solid #D31145;
color: #FFFFFF;
.TabbedPanelsTab a {
color: black;
text-decoration: none;
.TabbedPanelsContentGroup {
clear: both;
border-left: solid 2px #D31145;
border-bottom: solid 2px #D31145;
border-top: solid 2px #D31145;
border-right: solid 2px #D31145;
background-color: #FFFFFF;
visibility: visible;
width: 50%;
position: inherit;
height: auto;
/* 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 {
overflow: hidden;
padding: 4px;
.TabbedPanelsContentVisible {
.VTabbedPanels {
overflow: hidden;
zoom: 1;
.VTabbedPanels .TabbedPanelsTabGroup {
float: left;
width: 10em;
height: 20em;
background-color: #EEE;
position: relative;
border-top: solid 1px #999;
border-right: solid 1px #999;
border-left: solid 1px #CCC;
border-bottom: solid 1px #CCC;
.VTabbedPanels .TabbedPanelsTab {
float: none;
margin: 0px;
border-top: none;
border-left: none;
border-right: none;
.VTabbedPanels .TabbedPanelsTabSelected {
background-color: #EEE;
border-bottom: solid 1px #999;
.VTabbedPanels .TabbedPanelsContentGroup {
clear: none;
float: left;
padding: 0px;
width: 30em;
height: 20em;
/* Styles for Printing */
@media print {
.TabbedPanels {
overflow: visible !important;
.TabbedPanelsContentGroup {
display: block !important;
overflow: visible !important;
height: auto !important;
.TabbedPanelsContent {
overflow: visible !important;
display: block !important;
clear:both !important;
.TabbedPanelsTab {
overflow: visible !important;
display: block !important;
clear:both !important;
THe Javascript for my tabbed panels are below:
// SpryTabbedPanels.js - version 0.7 - Spry Pre-Release 1.6.1
// Copyright (c) 2006. Adobe Systems Incorporated.
// All rights reserved.
// Redistribution and use in source and binary forms, with or without
// modification, are permitted provided that the following conditions are met:
//   * Redistributions of source code must retain the above copyright notice,
//     this list of conditions and the following disclaimer.
//   * Redistributions in binary form must reproduce the above copyright notice,
//     this list of conditions and the following disclaimer in the documentation
//     and/or other materials provided with the distribution.
//   * Neither the name of Adobe Systems Incorporated nor the names of its
//     contributors may be used to endorse or promote products derived from this
//     software without specific prior written permission.
// THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
// AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
// IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
// ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE
// LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
// CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
// SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
// INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
// CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
// ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
// POSSIBILITY OF SUCH DAMAGE.
(function() { // BeginSpryComponent
if (typeof Spry == "undefined") window.Spry = {}; if (!Spry.Widget) Spry.Widget = {};
Spry.Widget.TabbedPanels = function(element, opts)
this.element = this.getElement(element);
this.defaultTab = 0; // Show the first panel by default.
this.tabSelectedClass = "TabbedPanelsTabSelected";
this.tabHoverClass = "TabbedPanelsTabHover";
this.tabFocusedClass = "TabbedPanelsTabFocused";
this.panelVisibleClass = "TabbedPanelsContentVisible";
this.focusElement = null;
this.hasFocus = false;
this.currentTabIndex = 0;
this.enableKeyboardNavigation = true;
this.nextPanelKeyCode = Spry.Widget.TabbedPanels.KEY_RIGHT;
this.previousPanelKeyCode = Spry.Widget.TabbedPanels.KEY_LEFT;
Spry.Widget.TabbedPanels.setOptions(this, opts);
// If the defaultTab is expressed as a number/index, convert
// it to an element.
if (typeof (this.defaultTab) == "number")
if (this.defaultTab < 0)
   this.defaultTab = 0;
else
   var count = this.getTabbedPanelCount();
   if (this.defaultTab >= count)
    this.defaultTab = (count > 1) ? (count - 1) : 0;
this.defaultTab = this.getTabs()[this.defaultTab];
// The defaultTab property is supposed to be the tab element for the tab content
// to show by default. The caller is allowed to pass in the element itself or the
// element's id, so we need to convert the current value to an element if necessary.
if (this.defaultTab)
this.defaultTab = this.getElement(this.defaultTab);
this.attachBehaviors();
Spry.Widget.TabbedPanels.prototype.getElement = function(ele)
if (ele && typeof ele == "string")
return document.getElementById(ele);
return ele;
Spry.Widget.TabbedPanels.prototype.getElementChildren = function(element)
var children = [];
var child = element.firstChild;
while (child)
if (child.nodeType == 1 /* Node.ELEMENT_NODE */)
   children.push(child);
child = child.nextSibling;
return children;
Spry.Widget.TabbedPanels.prototype.addClassName = function(ele, className)
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) != -1))
return;
ele.className += (ele.className ? " " : "") + className;
Spry.Widget.TabbedPanels.prototype.removeClassName = function(ele, className)
if (!ele || !className || (ele.className && ele.className.search(new RegExp("\\b" + className + "\\b")) == -1))
return;
ele.className = ele.className.replace(new RegExp("\\s*\\b" + className + "\\b", "g"), "");
Spry.Widget.TabbedPanels.setOptions = function(obj, optionsObj, ignoreUndefinedProps)
if (!optionsObj)
return;
for (var optionName in optionsObj)
if (ignoreUndefinedProps && optionsObj[optionName] == undefined)
   continue;
obj[optionName] = optionsObj[optionName];
Spry.Widget.TabbedPanels.prototype.getTabGroup = function()
if (this.element)
var children = this.getElementChildren(this.element);
if (children.length)
   return children[0];
return null;
Spry.Widget.TabbedPanels.prototype.getTabs = function()
var tabs = [];
var tg = this.getTabGroup();
if (tg)
tabs = this.getElementChildren(tg);
return tabs;
Spry.Widget.TabbedPanels.prototype.getContentPanelGroup = function()
if (this.element)
var children = this.getElementChildren(this.element);
if (children.length > 1)
   return children[1];
return null;
Spry.Widget.TabbedPanels.prototype.getContentPanels = function()
var panels = [];
var pg = this.getContentPanelGroup();
if (pg)
panels = this.getElementChildren(pg);
return panels;
Spry.Widget.TabbedPanels.prototype.getIndex = function(ele, arr)
ele = this.getElement(ele);
if (ele && arr && arr.length)
for (var i = 0; i < arr.length; i++)
   if (ele == arr[i])
    return i;
return -1;
Spry.Widget.TabbedPanels.prototype.getTabIndex = function(ele)
var i = this.getIndex(ele, this.getTabs());
if (i < 0)
i = this.getIndex(ele, this.getContentPanels());
return i;
Spry.Widget.TabbedPanels.prototype.getCurrentTabIndex = function()
return this.currentTabIndex;
Spry.Widget.TabbedPanels.prototype.getTabbedPanelCount = function(ele)
return Math.min(this.getTabs().length, this.getContentPanels().length);
Spry.Widget.TabbedPanels.addEventListener = function(element, eventType, handler, capture)
try
if (element.addEventListener)
   element.addEventListener(eventType, handler, capture);
else if (element.attachEvent)
   element.attachEvent("on" + eventType, handler);
catch (e) {}
Spry.Widget.TabbedPanels.prototype.cancelEvent = function(e)
if (e.preventDefault) e.preventDefault();
else e.returnValue = false;
if (e.stopPropagation) e.stopPropagation();
else e.cancelBubble = true;
return false;
Spry.Widget.TabbedPanels.prototype.onTabClick = function(e, tab)
this.showPanel(tab);
return this.cancelEvent(e);
Spry.Widget.TabbedPanels.prototype.onTabMouseOver = function(e, tab)
this.addClassName(tab, this.tabHoverClass);
return false;
Spry.Widget.TabbedPanels.prototype.onTabMouseOut = function(e, tab)
this.removeClassName(tab, this.tabHoverClass);
return false;
Spry.Widget.TabbedPanels.prototype.onTabFocus = function(e, tab)
this.hasFocus = true;
this.addClassName(tab, this.tabFocusedClass);
return false;
Spry.Widget.TabbedPanels.prototype.onTabBlur = function(e, tab)
this.hasFocus = false;
this.removeClassName(tab, this.tabFocusedClass);
return false;
Spry.Widget.TabbedPanels.KEY_UP = 38;
Spry.Widget.TabbedPanels.KEY_DOWN = 40;
Spry.Widget.TabbedPanels.KEY_LEFT = 37;
Spry.Widget.TabbedPanels.KEY_RIGHT = 39;
Spry.Widget.TabbedPanels.prototype.onTabKeyDown = function(e, tab)
var key = e.keyCode;
if (!this.hasFocus || (key != this.previousPanelKeyCode && key != this.nextPanelKeyCode))
return true;
var tabs = this.getTabs();
for (var i =0; i < tabs.length; i++)
if (tabs[i] == tab)
   var el = false;
   if (key == this.previousPanelKeyCode && i > 0)
    el = tabs[i-1];
   else if (key == this.nextPanelKeyCode && i < tabs.length-1)
    el = tabs[i+1];
   if (el)
    this.showPanel(el);
    el.focus();
    break;
return this.cancelEvent(e);
Spry.Widget.TabbedPanels.prototype.preorderTraversal = function(root, func)
var stopTraversal = false;
if (root)
stopTraversal = func(root);
if (root.hasChildNodes())
   var child = root.firstChild;
   while (!stopTraversal && child)
    stopTraversal = this.preorderTraversal(child, func);
    try { child = child.nextSibling; } catch (e) { child = null; }
return stopTraversal;
Spry.Widget.TabbedPanels.prototype.addPanelEventListeners = function(tab, panel)
var self = this;
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseover", function(e) { self.onTabClick(e, tab);return self.onTabMouseOver(e, tab); }, false);
Spry.Widget.TabbedPanels.addEventListener(tab, "mouseout", function(e) { return self.onTabMouseOut(e, tab); }, false);
if (this.enableKeyboardNavigation)
// XXX: IE doesn't allow the setting of tabindex dynamically. This means we can't
// rely on adding the tabindex attribute if it is missing to enable keyboard navigation
// by default.
// Find the first element within the tab container that has a tabindex or the first
// anchor tag.
var tabIndexEle = null;
var tabAnchorEle = null;
this.preorderTraversal(tab, function(node) {
   if (node.nodeType == 1 /* NODE.ELEMENT_NODE */)
    var tabIndexAttr = tab.attributes.getNamedItem("tabindex");
    if (tabIndexAttr)
     tabIndexEle = node;
     return true;
    if (!tabAnchorEle && node.nodeName.toLowerCase() == "a")
     tabAnchorEle = node;
   return false;
if (tabIndexEle)
   this.focusElement = tabIndexEle;
else if (tabAnchorEle)
   this.focusElement = tabAnchorEle;
if (this.focusElement)
   Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "focus", function(e) { return self.onTabFocus(e, tab); }, false);
   Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "blur", function(e) { return self.onTabBlur(e, tab); }, false);
   Spry.Widget.TabbedPanels.addEventListener(this.focusElement, "keydown", function(e) { return self.onTabKeyDown(e, tab); }, false);
Spry.Widget.TabbedPanels.prototype.showPanel = function(elementOrIndex)
var tpIndex = -1;
if (typeof elementOrIndex == "number")
tpIndex = elementOrIndex;
else // Must be the element for the tab or content panel.
tpIndex = this.getTabIndex(elementOrIndex);
if (!tpIndex < 0 || tpIndex >= this.getTabbedPanelCount())
return;
var tabs = this.getTabs();
var panels = this.getContentPanels();
var numTabbedPanels = Math.max(tabs.length, panels.length);
for (var i = 0; i < numTabbedPanels; i++)
if (i != tpIndex)
   if (tabs[i])
    this.removeClassName(tabs[i], this.tabSelectedClass);
   if (panels[i])
    this.removeClassName(panels[i], this.panelVisibleClass);
    panels[i].style.display = "none";
this.addClassName(tabs[tpIndex], this.tabSelectedClass);
this.addClassName(panels[tpIndex], this.panelVisibleClass);
panels[tpIndex].style.display = "block";
this.currentTabIndex = tpIndex;
Spry.Widget.TabbedPanels.prototype.attachBehaviors = function(element)
var tabs = this.getTabs();
var panels = this.getContentPanels();
var panelCount = this.getTabbedPanelCount();
for (var i = 0; i < panelCount; i++)
this.addPanelEventListeners(tabs[i], panels[i]);
this.showPanel(this.defaultTab);
})(); // EndSpryComponent

Note - I agree with Nancy
As for your experiment, to prevent the "drop" reduce the spry CSS padding in line 76 selector from 21px to 18px.
.TabbedPanelsTab {
    -moz-user-select: none;
    background-color: #000000;
    border-color: #000000;
    border-left: 0 solid #000000;
    border-style: solid;
    border-width: 2px 0 0;
    cursor: pointer;
    float: left;
    font-family: "Myriad Pro";
    font-size: 1em;
    font-weight: normal;
    height: 15px;
    list-style: none outside none;
    margin: 0;
    padding: 4px 18px;
    position: relative;
    top: 0;
Don't use dummy text without normal length text with breaks

Having trouble with dreamweaver cs 6 spry tabbed panels, all content in each tab showes through like

Having trouble with dreamweaver cs 6 spry tabbed panels, all content in each tab showes through like it was all created on one page, plus mouse over doesnt work on them.
This started all of a sudden.
The entire website is a series of spry tabbed panels.
http://pacificlaser.com/const.html
if you click on General construction tab things work ok...
if you click on Machine control tab, mouse over doesnt work and all page content of each tab show through.
ive been looking for the answer for 4 months with no success.
Hope a fellow dreamwever-person can help
Thanks Rick

You called it: your links to the SpryAssets are linking to your hard drive, not to the files within the folder on the server.
Correct these links:
<script src="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<link href="file:///C:/Users/work/Desktop/Sites/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css" />
And you should be good to go.
Beth
ps. If you run into more difficulties with the Spry Widgets, take your questions to the Dreamweaver Spry Forum http://forums.adobe.com/community/labs/spry, where they will get quicker attention.
B

Is it possible to change the selectedTab text color in SPRY Tabs?

Was working with SPRY tabs and the client would like the font color to change to white on roll over and select.
Is this possible through simply adding a single line of code to the css file of the SPRY file under
.TabbedPanelsTabSelected {
    height: 46px;
    width: 168px;
    background-color: #a7b9c3;
    color: #f7f7f7;
as you can see I already attempted to change the color and wasn't able to achieve the results on
http://ebnerproductions.com/index22.html
If it is possible, awesome, if not, I will replace with rollover images to get the desired result.
Adam Ebner
Thank you again to everyone in the forum as you have all helped me big time in the last couple of days!!!!!

I've gone through the coding now for a couple of days and still cannot get the font color to change on select.
I tried to inserted the recommended
<style>
.TabbedPanelsTabSelected,
.TabbedPanelsTabHover {
     color: #FFF;
</style>
coding that was offered earlier, and it did nothing....
here is the CSS for my tabbed panels... PLEASE LET ME KNOW WHAT I HAVE DONE WRONG, OR FORGOT!!!!
site is ... http://ebnerproductions.com/index22.html
Here is the Spry css ....
@charset "UTF-8";
/* SpryTabbedPanels.css - version 0.4 - Spry Pre-Release 1.6.1 */
/* 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;
    padding: 0px;
    float: left;
    clear: none;
    width: 810px; /* IE Hack to force proper layout when preceded by a paragraph. (hasLayout Bug)*/
    position: absolute;
    left: auto;
    top: auto;
    color: #666;
/* 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;
    width: 840px;
    color: #666;
/* 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: 0px;
    float: left;
    padding: 0px;
    margin: 0px;
    list-style: none;
    -moz-user-select: none;
    -khtml-user-select: none;
    cursor: pointer;
    height: 41px;
    width: 158px;
    outline:none;
    text-align: center;
    font-family: Archer-Medium-Pro.otf;
    font-size: 1.4em;
    font-weight: normal;
    color: #666;
    font-style: normal;
    padding-top: 8px;
    -moz-border-top-right-radius: 8px;
    -moz-border-top-left-radius: 8px;/* for older versions of Firefox) */
    -webkit-border-top-right-radius: 8px;
    -webkit-border-top-left-radius: 8px;/* for older versions of Safari and Chrome */
    border-top-right-radius: 8px;
    border-top-left-radius: 8px;/* Newer browsers */
/* 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: #EEE;
    color: #FFF;
    width: 158px;
    outline:none;
/* 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 {
    height: 41px;
    width: 158px;
    background-color: #a7b9c3;
    font: Archer-Pro-Medium;
    color: #FFF;
    outline:none;
/* 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: #666;
    text-decoration: none;
    outline: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;
    background-color: ;
    outline:none;
/* 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: 0px;
/* 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: #EEE;
    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: #EEE;
/* 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;
Thank everyone again for all the help!

Linking page to Named Anchor on multiple spry tabbed panels

I am a Dreamweaver (cs5) "beginner" with little HTML knowlege. I am doing a site for an artist friend with several art gallery images. I have created a separate .html page for each image from the gallery (the gallery pages are built within several tabs in a spry tabbed set). When it came time to link my image page back to the particular gallery page, it did not work, only the default panel could be linked. I found Gramps' answer to another persons question that was similar to mine, only that person was using spry collapsible panels. Gramps answer: <a name="myAnchor"></a>, then URL origin page: ourPage.html?col2=open#myAnchor, and it apparently worked. I tried this using "tabbedpanel2" which is probably wrong; at any rate.... nothing seems to work.
For my first time doing this, can anyone put this in the simplest form, using my own page, link names? I have spent several day not getting anywhere.
Spry Panel page is called: store_sheet.html
namedAnchor on this page is called: o-pg2
origin page is called: 009.html
Because I'm not very good in HTML, I usually highlight what I am going to code so that I can find where it is at in the split screen, then I edit. This is how raw my knowledge-base is at this point.
Any help and advise would be greatly appreciated. I'm several days behind because of this glitch.

On the first page, the peeling turnips image looks like this -
<p><a href="shop_originals/001.html"><img src="shop_originals/peelingturnips.jpg" width="188" height="254" alt="original"></a></p>
The next image in the row looks like this -
<p><img src="shop_originals/02.jpg" width="188" height="254" alt="original"></p>
So, just select that image and link it to the detail page, e.g.,
<p><a href="shop_originals/002.html"><img src="shop_originals/02.jpg" width="188" height="254" alt="original"></a></p>
The on that detail page, make the continue shopping link like this -
<a href="../store_sheet.html#o-002"><strong>Continue Shopping</strong></a>
Is that what you wanted?

Multiple Spry tabbed panels?

Is it possible to have more than one set of Spry Tabbed
Panels .css rules, i.e., with different rules within the same web
site?
I'd like to have tabbed panels with differing heights or
widths, but if the dimensions (and, obviously, other rules) are
changed for one panel, it changes them for all panels within the
web site.

I would like to digg up this old post if possible and really looking for an answer asap!
Unfotunately the answer given here was pretty poor and didntreally help, hence the reason the user I believe went else where and got a simpler and more in depth answer in a non techie jargon from asktheecpers.com.
Anyway, my problem is slightly different but must be possible!!
I have one tabbed panel, but I have a fairly complex slanted tabs menu, I have done well so far to get it to work, however the final step I need to apply a slighly diffent hover class to on eof the tab items (the first one in the list has a flat left edge and not a slanted.)
The selcted and initial states are fine as I have applied a different class and therefore can apply a different image, however the hover class is applied dynamic throughthe JS (not my area of expertise!!) and so I need to create a 2nd hover class to apply to different list items within the same tabbbed group??
Please, please help!!
Regards,
Ryan.
Problem can be seen here, its the first tab that is the problem, its hover needs to be a different image (blue with straight left edge)
http://doosan.corporateprm.com/
Thanks

Linking between spry tabs

I've created a page with spry tabs and want to place a link
on a tab that will take the user to a place on another tab. I
assumed that I would use named achors but can't get them to work.
Any ideas?

RSW14 wrote:
> I've created a page with spry tabs and want to place a
link on a tab that will
> take the user to a place on another tab.
To open another tab from anywhere in the same page, give the
target tab
an ID, and create the link like this:
<a href="javascript:;"
onclick="TabbedPanels1.showPanel('targetID')">Go
to other tab</a>
To go to a specific place within a tabbed panel, you would
need to use
SpryURLUtils.js, which is part of the Spry framework that you
can
download from Adobe Labs. Details of how to use it are on the
following
page:
http://labs.adobe.com/technologies/spry/samples/utils/URLUtilsSample.html
David Powers, Adobe Community Expert
Author, "The Essential Guide to Dreamweaver CS4",
"PHP Solutions" & "PHP Object-Oriented Solutions"
http://foundationphp.com/

Spry Tabbed Panels - Contribute Error Message

I created a Web site using Dreamweaver CS4 that uses a Spry Tabbed Panels. It works fine, but so far it fails when it is pulled into Contribute CS5. I've read the posts about allowing Spry Widget editing in Contribute, so I've turned on that capability.
When I try to launch the Spry Widget Properties from within Contribute, I get this error:
"This tabbed panel is missing its content. Contact your administrator to add the missing content panel, or delete this panel and insert a new one."
I've tried creating new generic pages with new Spry tabbed panels, but they always fail with this message.
Here is a sample page:
http://www.dougriderconsulting.com/zmcpa/incentives.html
Any ideas? Thanks!

The page http://www.dougriderconsulting.com/zmcpa/incentives.html mentioned here has no issues.
If there are any missing codes DW also shows the error as <missing content panel> or <missing tab> when the Tabbed Panel widget is selected.
In Contribute the same pops up as a message.
The issue in page http://www.dougriderconsulting.com/zmcpa/education_in_muskingum_county.html posted in Contribute Blogs is re-solved http://blogs.adobe.com/contribute/2010/06/spry_widget_rendering.html#more-33.

Trying to add OnCick to Spry Tab

I have a page that has 4 Spry tabbed panels...within each panel are sets of sliding panels. All works perfectly.
However, if I navigate to tab 1, sliding panel 3, then click on tab 2, and then back to tab 1, the sliding panel in tab 1 has remained at sliding panel 3 ... but I always want the sliding panel to start at panel 1 when you click on a tab.
My solution was to add an OnClick event where tab 1 is defined to return the sliding panel to the first position:
<li class="TabbedPanelsTab" tabindex="0" onclick="sp1.showPanel(0); return false;">
But this doesn't work...
How can I add an onclick event when a tab is clicked?
Here is the URL of the page...http://www.parishpublishing.org/index_test.html

I am sorry that I cannot help you offhand but have a look here http://foundationphp.com/blog/2008/02/09/spry-tutorial-linking-to-a-non-default-panel/comm ent-page-1/
I hope it helps.
Ben
PS Third time lucky?

Spry Tabs; Tabs within tabs

Similar Messages

Maybe you are looking for