Using Tabbed Panels

I have placed a tabbed panel on the master slide used for each of the staff biography pages in our corporate web site. The panel has two tabs; one for a personal statement and the second for facts about each staff member (Year joined the firm, professional certifications, etc.) Every one of the 26 biography pages has the two panels (they all share the same master), but the content on each panel is different for each staff member.
When I place text on the facts tab of the panel in on an individual's bio page, the text I place is showing up on both the first and second tab. How do I designate content to appear on a specific tab an no other.
Also, there does not appear to be a way to switch between tabs on an individuals page in design mode. I have to go to the master, select the first tab, go to the individuals page and enter the content, then go back to the master and select the second tab and then go back to the individuals page and enter content for tab two. This is quite cumbersome. Is there any way to switch between tabs on a page in design mode when the tabbed panel iteself is being "brought over" to that page from the master?
Thanks very much.
Andy.

Hi Andy,
You can't edit the contents of any objects placed on the Master Page in Child Page and Tabbed Panels are no exception.
You can't add a tabbed panel to a master page and manipulate its contents in the child pages based on that master page. The way to go here would be to create one page with the tabbed panel content and then duplicate it to generate other pages and modify their contents.
To keep the styling of Tabbed Panels in sync and linked you can use the Graphics/Paragraph/Character styles panel to apply styles and changes styles to all tabbed panels at once by changing the properties of the Style in the panel.
Hope this helps.
Cheers,
Vikas

Similar Messages

Spry Tabbed Panels: Issue in Safar 4

I am having an issue with Spry Tabbed Panels that only seems to happen in Safari 4. I am using Spry Tabbed Panels 1.4 through Dreamweaver CS3. The tab panel still works great. Now, though, when you select a tab, it put a blue link border around the tab itself. When you load the page the tabs are fine. It only occurs when you select a tab and only on the selected tab. I looked around for any other sites that were using tabbed panels and it happens on those sites as well.
I am including a site I found that has a perfect example:
http://www.daughterskitchen.com/cookiediet.html
Click on one of the tabs where it says about the cookie diet.
I have looked into any way to stop this from happening. Has anyone seen this and come up with a solution?
If you need more info, let me know.
Thanks.

I think your are referring to the css attribute: outline:none;
Added outline:none; to the css rule and it should be gone.

Problem with Spry Tabbed Panels with Explorer 6

I've used Tabbed panels all over my site, and they seemed to work fine in FireFox, Safari, Explorer 7 and 8, etc. but today i checked out Explorer 6 in BrowserLab, after someone said our site looked weird.
In EX 6 it certainly does: all the tabbed panels are preceded by about a screen's worth of empty space!
I'd appreciate it someone could have a look at this and see if they can tell what's going on:
See this page:
http://www.ragandbone.ca/Pages/willows.html
or almost any ohter page on the site!
I'm very far from experienced in web work, so I might need step by step instructions for any fix suggested.
Thanks in advance
John

Hi, John,
Make the width of the .TabbedPanels narrower. In the course of my experiments, I ended up making it 580px, which works in IE6, according to BrowserLab. You had a simple width overrun; your widths + borders+ paddings + margins (within the content div) added up to more than the width available. You might be able to get away with slightly more width, but test it carefully when you start to add it back in...
This might be an instance of the "doubled margin bug" (see http://www.positioniseverything.net/explorer/doubled-margin.html).
I changed the margin on .TabbedPanels to margin: 0 auto; so that any effective centering that had been done by 'filling' the width previously was now achieved by the margin-right and margin-left set to "auto." (The zero applies to top and bottom margin.)
I deleted the left: -40px; that you had applied to .TabbedPanelsTab and zeroed out the right padding on .content ul, .content ol {
padding: 0 15px 15px 0; that your threeColFixHF_RB.css had applied to all ul in the site. This might or might not actually affect anything if you don't make these same changes, but I had altered them in the course of figuring out what was going on. It's never a good policy, in my opinion, to use negative margin if you can simply correct both elements, as I did. You don't want to be progressively compensating for things you don't need anyway!
Beth

Tabbed Panel in Table?

When inserting a Tabbed Panel into a table cell, the content expands the size of the cell rather than "floating" over the cells as the Menu Bar spry does. Is there a way to make the Tabbed Panel content float?
Thanks.

If you're putting tabbed panels in a table cell, set the width of the tabbed panels by editing the TabbedPanels class in SpryTabbedPanels.css. By default, it's set to 100%. Change the width property to the width you want.
Using tabbed panels in a table layout is likely to cause problems because the panels expand and contract vertically to accommodate their content. Unless each panel has the same amount of content, it is likely to affect your layout as users go from tab to tab. It might be necessary to add a height property to the TabbedPanels class to overcome this.

How can I nest Tabbed Panels 2

I am trying to learn HTML and need help using Tabbed Panels 2.
I have three defualt tabs which are very simple to do but how can i nest four tabs with content inside one of the defualt tabs?
Link to Documentation.

Haven’t begun to try it yet. Looking at some tutorials.
But I appreciate the heads up.
Bill Liedlich
TerraGroup Corporation
Tactical Water Purification Systems
Po Box 8839
Allentown, PA 18105 USA
p 610-821-7003
f 610-821-7025
[email protected]
[email protected]<mailto:[email protected]>
www.tacticalwater.com<http://www.tacticalwater.com/>
CONFIDENTIALITY NOTICE: This electronic mail transmission, its contents and any attachments to it, are privileged and confidential, and/or may contain legally privileged and confidential information and is intended only for the review of the party or parties to whom it is addressed. Any dissemination, distribution, copying or forwarding of this message, its contents or attachments to other than the intended recipient(s) is strictly prohibited. If you are not one of the intended recipients, or have received this transmission and its contents in error, please immediately return it to the sender. Unintended transmission shall not constitute a waiver of any "Confidentiality Notice" privilege.

Reselecting main content tab with tabbed panels

Hi all,
Using Tabbed Panels, once a user selects a panel that tab
remains "selected" until somewhere else in the main content window
is clicked. What I mean by selected is that it has an ugly dotted
line around it. Is there anyway to get it so that after a user
clicks a new tab, the main content window is selected again so that
the dotted selection line disappears?
Thanks,
Erin

Erin -
I noticed that too this past week on a project_
I'm running thru Firefox 2.x on both Mac and PC also IE 6 and
Safari_
It seems to be more on an issue with the browsers than it
does with something either in the Spry code or Dreamweaver itself_
In Firefox - goto yahoo.com and in the little "in the news"
tab there is a list of 6 or 7 lines of text [news headlines] Click
and drag to an empty spot on the page [don;t go off the window]
then let go and you'll see a "border box" around the text link you
just messed with_ It's this round of browsers doing it_
I was messing with some image slices and custom area maps
custom this weekend this weekend and that got my attention 'cause
the "outline" of the area map kept showing up when I exported to
test in a browser and tried them all - did the same thing
everywhere_

Tabbed Panel Focus

I am using tabbed panels to neatly display web part on a
portal. The only problem I have encountered is tab focus being lost
when I page through the content. Example: Tab 3 displays, in
batches of 10, frequently used documents. When navigating to the
next batch the page is returned with the default tab displayed. Is
there a way to maintain focus for this example?

You could pass call a function that would set the tab default
to what ever so say they click on the next button have an onclick
to call say the keepTab function or what ever
so like
<a href="#" onclick="keeptab(2);">Next</a>
function keeptab(ID)
Spry.Widget.TabbedPanels("tp1", { defaultTab: ID });
haven't tested it but it should work.

Help with "Tabbed panels"

Hi guys,
i am trying to design a web for my company. The company devided in to three parts. Every part has a slightly different menu.
I assume i could use "tabbed panels" for that purpose but the contents of tabs are changed only on mouse click. I would like people to hover on main menu button and submenu contents are changing...the same for all three main menu buttons. Each main menu buttons has about 7 or 8 submenus.
Is it possible for you to point me to a step by step tutorials to do it?
Thank you very much

Hi,
I suggest that you put your question into the Spry forum, 'cause there are acting most of the specialists around this topic. Here the link to it:
http://forums.adobe.com/community/labs/spry?view=discussions
Hans-Günter

Hide trigger in Tab Panel, but keep target active?

I'm working with having compositions inside a tabbed panel. I know there is a way to have the triggers hidden, and then when clicked or rolled over activate a target. But is there a way to keep a target active (shown) while the trigger is 'hidden' inside a non-active tab in a panel? You can see what I'm trying to achieve here: http://tessatest.businesscatalyst.com/index.html
Essentially, I'm trying to have the have the user to be able to mix and match different trims with different roofs. But when the Roof tab is clicked the previous trim goes away. Is there a way to have the last active target stay active, after another tab is clicked. I want to use Tabbed Panel because eventually there will be more categories (brick, stone, roof, trim, windows, etc) and much more than 2 choices for each. So I think to keep it compact and organized the Panels are the best way to go. That is why I just don't want to have a whole bunch of slideshows and thumbnails on the page.
I know I could code this, or create a flash file, but would like to be able to do everything in Muse.
Any help would be much appreciated.
Thanks,

Thanks for the reply. Actually I wasn't able to do what I'm trying for with Muse. The top graphics weren't done in Muse, but with coding. If you scroll down you can see my attempt with Muse. What I would like to do is to have Composition triggers [Brick, siding, roof, etc] in an accordion with each section in its own tab. But when I do this, every time I switch to a new tab, lets say going from Brick to Trim, the Brick target that was activated disappears. And same if I go from Trim to Siding. The Trim image that was activated disappears when I click on the Siding tab. I would ideally like to have the previous target image stay active (appear) as I switch from tab to tab.
Is this possible? I tried the same idea with a blank composition and putting the material (brick, trim, siding, etc) into each trigger and respective target, but the same thing happens. When I go from trigger to trigger the previous target disappears. I would ideally like the accordion aesthetically.
Thanks for your initial response, and any further help would be greatly appreciated. It seems like there might be a way to achieve what I'm going for, I just can't figure it out.

Implementation Of Tabbed panel in JSF

I have 4 different tabs and i have only one jsp when i click that tab i have to go to particular part. using tabbed panel in JSF
Please suggest me how can i approach.
Thanks in advance
Satish Cheedalla

there are many different componentas for tab panel.
The myfaces project offer this component in tomahawk project and tobago project.
The are of course many commercial tab panel in various ajax frameworks.

Tabbed Panel - Automatic Display?

I am using Tabbed Panels and found the auto-cycler code in an
earlier email. dumb question - how do i get rid of the start / stop
buttons and have the rotation start automatically?
Thanks!
Daphna

Never mind, I found it. Thanks so much!
http://www.adobe.com/cfusion/webforums/forum/messageview.cfm?forumid=72&catid=602&threadid =1377267&highlight_key=y&keyword1=tabbed

Tabbed panel changes not showing up

I'm using Dreamweaver CS5 on a Mac. A couple of years ago I created a website using tabbed panels (http://www.4dtr.com/Communication_Interpersonal.html), Recently, I went to make some modification to the tabs:
1. altered the text in the tab
2. Changed background colour of the tabbed panel)
3. Changed the font size
When I preview the changes in DW they seem to have worked...they also show up when I look in the Adobe Browser Lab. When I upload to the server however only the "altered text" modifications shows up. The change to background color as well as change to font size do not. What am I doing wrong? Help please...

The first thing I notice as I look at your CSS Panel is that many of your styles are existing in the page itself instead of in a linked CSS stylesheet.
Before you proceed, check through the list of styles in the CSS Styles Panel and delete styles that you don't need. Any style that has been completely superseded by another style further down on the list can be deleted. You should be left with only styles you want to be active.
It is simple to move those styles to an external stylesheet; you can do it right in the CSS Panel.
The aim is to have styles associated with the tabbed panels in the "SpryTabbedPanels.css" file, and to have no styles embedded in the page. Then you will make sure those external stylesheets are attached to all the pages that need those style. The on-page, embedded styles are shown in the CSS Panel (with "all" selected as the view) under labels that read: "<style>".
I would also recommend creating a global.css stylesheet for those other styles that also should occur throughout your site. Do File > New > Blank Page > CSS to create the new stylesheet. After you have created this stylesheet, attach it to your page. If you are working with a true template file (file extension is .dwt), I suggest attaching it to that template. With the page in question open, open the CSS Panel and click the chain icon at the bottom of the Panel. Select the newly created stylesheet to link it to the page.
Then select the styles you want to move, and keep holding the mouse down while you drag them under the appropriate stylesheet name in the CSS Styles Panel. You could also select them and right click, choosing 'move CSS styles'.
Here's some links to info about the CSS Styles Panel: http://help.adobe.com/en_US/Dreamweaver/CS5/Using/WSbb8fae38174aec9d-4fb84361126e2b2aaf3-8 000.html
The long and the short of it is: If a style was changed and the style sits on the page, that change is not reflected throughout the site, only on that page. If the style is moved (or created) on an external stylesheet, and the stylesheet is linked to all pages, that change will be reflected throughout the site.
N.B.: If you change the template file, be sure to propagate the changes to all the pages that are based on that template. And don't forget to upload the changed files...
Beth

Is there a way to use css media="print" to print all Spry tabbed panels

By setting up a special style sheet and calling that with media="print" I can control all other content that I want to appear in the printed webpage but since the tabbed panels display="none" or display="block" are controlled by the SpryTabbedPanels.js I haven't found a way to force all panels to be display="block" in the print style sheet.
The requirement is for a seminar timetable where each day is on a separate tab but if you want hard copy then printing all days in one go is best.
Any suggestions would be most welcome.

Yeah! I found the answer in another forum topic - See
http://forums.adobe.com/message/636534#636534
Use
<style type="text/css" media="print">
.TabbedPanelsTabGroup {
display: none !important;
.TabbedPanelsContent {
display: block !important;
overflow: visible !important;
height: auto !important;
</style>

Using fade/appear transition in spry tabbed panels

I've implemented the fade/appear transition into a spry
tabbed panel set up. The effect works in that when one clicks on a
tab, the content in that panel will "appear" in using a opacity
transition.
The problem I am encountering is a pre-load of the content..
almost a flicker at 100% opacity... and then the transition from 0%
to 100% resumes. This flicker effect or visible pre-load of the
content really takes away from the effect of the transition.
Does anyone know how to solve this or correct my set up?
I'm using the following...
<li class="TabbedPanelsTab"
onclick="MM_effectAppearFade('fade-guestrooms', 1000, 0, 100,
false)" tabindex="0" onfocus="this.blur()">GUEST
ROOMS</li>

Yes this was a tough one to pull off in Spry. I have worked up a solution that fades between the panels. Please have a look at the following post:
http://blog.infrontweb.com/ajax/spry/spry-tabbed-panel-fade-transition/
Good Luck

Using Srpy tabbed panels with slidding panels

I am very new to spry and so I am still just figuring it all
out. How I found it was I wanted a tabbed panel like the one on the
IBM website. Anyway, I am trying to
use the tabbed panels with the sliding panels and it just does not
seem to be working. I found
this
tutorial and followed the codes but it still only works as just the
tabbed panels - nothing has changed at all. Can someone tell me
what I might be doing wrong? I am attaching both my html and css
code for you to inspect.
HTML 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>Untitled Document</title>
<script
src="file://///172.16.10.251/users$/kduverna/Desktop/SpryAssets/SpryTabbedPanels.js"
type="text/javascript"></script>
<link
href="file://///172.16.10.251/users$/kduverna/Desktop/SpryAssets/SpryTabbedPanels.css"
rel="stylesheet" type="text/css" />
</head>
<body>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0"><a
href=”#Tab1″>Tab 1</a></li>
<li class="TabbedPanelsTab" tabindex="0"><a
href=”#Tab1″>Tab 2</a></li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent">Content 1</div>
<div class="TabbedPanelsContent">Content 2</div>
</div>
</div>
<script type="text/javascript">

</script>
</body>
</html>
css code to follow in post below - too many characters.

and here is the css code
CSS Code
@charset "UTF-8";
/* SpryTabbedPanels.css - Revision: Spry Preview Release 1.4
/* 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: 100%; /* IE Hack to force proper layout when preceded
by a paragraph. (hasLayout Bug)*/
/* 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;
font: bold 0.7em sans-serif;
background-color: #DDD;
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;
/* 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: #CCC;
/* 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: #EEE;
border-bottom: 1px solid #EEE;
/* 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: #EEE;
/* 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: #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;
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;
/* BEGIN: Spry Horizontal Tabbed Panels meets Sliding Door
and CSS Sprites */
/* Revision by Craig Malcolm Petrou of CPMMUG.com */
.TabbedPanels {
margin: 10px 0 5px 0;
.TabbedPanelsTab {
font-weight: bold;
font-size: 100%;
background-color: #FFF;
border: solid 0 #FFF;
.TabbedPanelsTabHover {
background-color: #FFF;
.TabbedPanelsTabSelected {
background-color: #FFF;
border-bottom: 1px solid #FFF;
position: relative;
.TabbedPanelsContentGroup {
background-color: #FFF;
ul.TabbedPanelsTabGroup a {
display: block;
ul.TabbedPanelsTabGroup li.TabbedPanelsTab {
background: url(/images/brown.png) no-repeat 0 0;
margin: 0 0 0 -1px;
padding: 0 0 0 10px;
ul.TabbedPanelsTabGroup li.TabbedPanelsTab a {
background: url(/images/brown.png) no-repeat 100% 0;
padding: 7px 10px 5px 0;
ul.TabbedPanelsTabGroup li.TabbedPanelsTabSelected {
background: url(/images/brown.png) no-repeat 0 -41px;
ul.TabbedPanelsTabGroup li.TabbedPanelsTabSelected a {
background: url(/images/brown.png) no-repeat 100% -41px;
/* END: Spry Horizontal Tabbed Panels meets Sliding Door and
CSS Sprites */
Also - is there a way to get rounded corners on the tabs in
spry? Any good tutorials I can follow about spry - more
specifically about using widgets and effects together.
Thanks so much

Using Tabbed Panels

Similar Messages

Maybe you are looking for