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

Similar Messages

Help with Tabbed panels please

Hello,
Can someone please tell me how I can change the color of the background of the tabs in tabbed panels. They are a grey and I can go into each tab and set a new color and when that tab is chose, the new color shows, but when I click on the next panel tab, the prvious one background goes back to grey. How do I get that whole grey background color changed?
Did I confuse everyone because I think I confused myself lol
Thanks if you can help!
Kathleen

THank you very much!!

Problem with tabbed panel

I have a problem with tabbed panel...this panel has 3 columns, I copied to each of them a diffrent text (diffrent height)...I expected to obtain diffrent working area of column, for example 1st column-height 7500 px, 2nd-1500 px, 3rd-2500 px, but I received one height 7500 px, each column has been formatted to this size....below a text I have “empty space”- (it is a diffrence between working area and text area)...I put the text to the 1st column for example 7200 px height, empty space below this text is 300 px I received 7500 px of working area in this column, here the problem doesn`t exist but….2nd column i have height of text for example 1300 px, below this text i have 6200 px empty space...It should be height 1300 px of text and maybe 200 px of empty space...so the working area could have at 1500 px not 7500 px of height....I try to change it (to for example 1500 px) but it still return to the basic 7500 px height and can`t do it...The solution is to use another form like. the accordion form..but it is a row form….when you put a diffrent sized text (height) you will receive diffrent size of working area (height), you obtain 7200px text +300 px empty space=7500 working area in 1st row.. 1200 px text + 300 px empty space=1500 workin area px in 2nd row and 2500 working area px in 3rd row…everything is fine in this form…each row has been formatted to the different size of height…but I prefer to use a tabbed panel (column form) instead a accordion form.…I don`t to waste the time to correct the code in html text editor like PSPad…
Best Regards
Kamil

A couple of threads here that should answer your query.
http://forums.adobe.com/message/5080345
http://forums.adobe.com/message/5104253
Thanks,
Vinayak

Can you use anchors with tabbed panels???

Im trying to use anchors with tabbed panels but they dont seem to work. I need to be able to link to specific tabs and specific areas within those tabs, but I haven't been able to find a way to do this. Does anyone know or have a work around?

Yes, that is an improvement in Muse, check release notes here, http://forums.adobe.com/message/5104247 - Widget Improvements
The selected tab in Design view for the Tabbed panel widget will now be selected/active when previewing, exporting or publishing the site to Business Catalyst.
- Abhishek Maurya

Problem with Tabbed Panel Widget

OK, so I am new to CS4 and plagued by a myriad of issues, but this one is so bizarre and stupid I have to get help. I am using one of the generic templates to take advantage of already existing tabbed panel code. The problem is that although 3 out of 4 tabs are fine, the 4th (and last) one has a white stripe through it. It's almost like the page background color (white) is showing through.
Crazy right? But I cannot get rid of this.

Thank you for the response!
It's not a live site. I am just experimenting with a template to see if I can make a legitimate product page before I buy CS4. I will check the div tags...but man, there are so damn many!
Regards,
Jonathan Rowe
Marina Market
<http://www.marinamarket.com> www.marinamarket.com
<http://best.king5.com/winners/best-of-western-washington/4749/specialty-food-and-drink/gou rmet-grocery> BOWW_120x45.jpg

Autoplay with Tabbed Panel?

Hi guys, Is it possible to make the Tabbed Panels have an
autoplay feature? So it would be like the Photo gallery demo except
I can have mixed content on the tab contents such as image with
text or flash, etc...
A good example is this at
http://www.webmd.com/ the tab
content plays automatically, except I want to make the content on
XML of course.

Hi Kin, Thanks but for some reason when I have another call
to click on a tab, it messes up the rotation of the tabs...it stops
it, it just keeps fading/appearing the next tab content without
advancing....any help?
<!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>TabbedPanels Cycler Example</title>
<script src="SpryAssets/SpryTabbedPanels.js"
type="text/javascript"></script>
<script src="SpryAssets/SpryEffects.js"
type="text/javascript"></script>
<script type="text/javascript">
function TabbedPanelsCycler(tp)
this.tp = tp;
this.timerID = 0;
this.interval = 10000; // Milliseconds
TabbedPanelsCycler.prototype.start = function()
this.stop();
var self = this;
this.timerID = setTimeout(function() { self.next(); },
this.interval);
TabbedPanelsCycler.prototype.stop = function()
if (this.timerID)
clearTimeout(this.timerID);
this.timerID = 0;
TabbedPanelsCycler.prototype.next = function()
var tp = this.tp;
var self = this;
var curIndex = tp.getCurrentTabIndex();
var panels = tp.getContentPanels();
var currentPanel = panels[ curIndex ];
var nextPanel = panels[ (curIndex + 1) %
tp.getTabbedPanelCount() ];
Spry.Effect.DoFade(currentPanel, {duration: 1000, from: 100,
to: 0, toggle: false, finish: function()
nextPanel.style.opacity = '0';
nextPanel.style.filter = 'alpha(opacity:0.0)';
tp.showPanel(nextPanel);
currentPanel.style.opacity = '';
nextPanel.style.filter = '';
Spry.Effect.DoFade(nextPanel, {duration: 1000, from: 0, to:
100, toggle: false, finish: function()
if (self.timerID)
self.start();
TabbedPanelsCycler.prototype.previous = function()
var tp = this.tp;
var curIndex = tp.getCurrentTabIndex();
tp.showPanel(((curIndex < 1) ? tp.getTabbedPanelCount() :
curIndex) - 1);
if (this.timerID)
this.start();
function MM_effectAppearFade(targetElement, duration, from,
to, toggle)
Spry.Effect.DoFade(targetElement, {duration: duration, from:
from, to: to, toggle: toggle});
</script>
<link href="SpryAssets/SpryTabbedPanels.css"
rel="stylesheet" type="text/css" />
<link href="assets/css/style.css" rel="stylesheet"
type="text/css" />
</head>
<body onload="cycler.start();">
<div id="page">
<div id="featurebox">
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0"
onclick="MM_effectAppearFade('panel_content1', 1000, 0, 100,
false)">1</li>
<li class="TabbedPanelsTab" tabindex="0"
onclick="MM_effectAppearFade('panel_content2', 1000, 0, 100,
false)">2</li>
<li class="TabbedPanelsTab" tabindex="0"
onclick="MM_effectAppearFade('panel_content3', 1000, 0, 100,
false)">3</li>
<li class="TabbedPanelsTab" tabindex="0"
onclick="MM_effectAppearFade('panel_content4', 1000, 0, 100,
false)">4</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent" id="panel_content1">
<div>Content 1<br />
<img src="CD_seiu_wongkovit_070102_035-250px.jpg"
width="250" height="191" /></div>
</div>
<div class="TabbedPanelsContent" id="panel_content2">
<div>Content 2<br />
<img src="CD_seiu_walthoun_070102_012-250px.jpg"
width="250" height="166" /></div>
</div>
<div class="TabbedPanelsContent" id="panel_content3">
<div>Content 3<br />
<img src="250px-Kraft_dinner.jpg" width="250"
height="188" /></div>
</div>
<div class="TabbedPanelsContent" id="panel_content4">
<div>Content 4</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">

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

Fade effect with tabbed panels

The background image of the tabbed panel flashes before the
new images fade in from 0% to 100%:
Demo page
Sometimes the effect works as intended and fades in
perfectly...however it consistently resorts to flashing first --
any ideas how to fix this?

These code snippet no longer work with the out of box 1.6
release. any hints on how to work around the initial blink problem?
Seems like these methods could be better designed.
I am building the code using the designer and this is my
tabbed pane:
<div id="MainTabbedPane" class="VTabbedPanels">
<ul class="TabbedPanelsTabGroup">
<li class="TabbedPanelsTab" tabindex="0"
onclick="Spry.Utils.updateContent('TabbedPanelsContent1','FrontPage.html');MM_effectBlind ('TabbedPanelsContent1',
1000, '0%', '100%', false)">Home</li>
<li class="TabbedPanelsTab" tabindex="0"
onclick="Spry.Utils.updateContent('TabbedPanelsContent2','SchedRates.html');MM_effectAppe arFade('TabbedPanelsContent2',
1000, 0, 100, false)">Schedule & Rates</li>
<li class="TabbedPanelsTab" tabindex="0">Program
& Description</li>
<li class="TabbedPanelsTab"
tabindex="0">Retreats</li>
<li class="TabbedPanelsTab"
tabindex="0">Bio</li>
<li class="TabbedPanelsTab" tabindex="0">Studio
Cats</li>
</ul>
<div class="TabbedPanelsContentGroup">
<div class="TabbedPanelsContent"
id="TabbedPanelsContent1">Front Page!!!</div>
<div class="TabbedPanelsContent"
id="TabbedPanelsContent2">Schedule & Rates</div>
<div class="TabbedPanelsContent"
id="TabbedPanelsContent3">Program &
Description</div>
<div class="TabbedPanelsContent"
id="TabbedPanelsContent4">Retreats</div>
<div class="TabbedPanelsContent"
id="TabbedPanelsContent5">Bio</div>
<div class="TabbedPanelsContent"
id="TabbedPanelsContent6">Studio Cats</div>
</div>
</div>
Likes like there is one sloppy method override as well:
function MM_effectAppearFade(targetElement, duration, from,
to, toggle)
Spry.Effect.DoFade(targetElement, {duration: duration, from:
from, to: to, toggle: toggle});
}

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_

IFrame-issues with Tabbed Panels

See for yourself
(the code may be messy, haven't gone through it yet)

Perhaps I wasn't clear enough when I phrased the question:
Does anyone know if iFrames are unsupported when using
Spry-elements, specifically the Tabbed Panels script? I have to use
iFrame to embed a my Zenphoto gallery.
Here's the site WITH iFrame:
http://hogfem.no/fjordpanorama
And here's WITHOUT the iFrame:
http://hogfem.no/fjordpanorama/index2.php

Help with front panel audio on K9N board.

Okay, I admit I'm a bit of a moron with front panel audio but I just can't figure out how to configure this board with my case. Here are the pins:
Case:
Mic In
Mic Bias
SpeakOut L
Return L
SpeakOut R
Return R
Ground
Motherboard:
PIN    SIGNAL      DESCRIPTION
1    PORT 1L      Analog Port 1 -Left channel
2    GND      Ground
3    PORT 1R      Analog Port 1 -Right channel
4    PRESENCE#     Active low signal -signals BIOS that a High Definition Audio dongle is connected to the analog header. PRESENCE# = 0 when a High Definition Audio dongle is connected.
5    PORT 2R      Analog Port 2 -Right channel
6    SENSE1_RETIRN     Jack detection return from frontpanel JACK1
7    SENSE_SEND     Jack detectionsenselinefrom the High Definition Audio CODEC jack detection resistor network
8    KEY      ConnectorKey
9    PORT 2L      Analog Port 2 -Left channel
10    SENSE2_RETIRN     Jack detection return from frontpanel JACK2
I haven't been able to make any sense of the two, so if anyone here can help, I would appreciate it very much.

Quote from: crazy on 09-June-06, 15:51:46
You may tell us more information about your mainboard, please give us the detailed name of your mainboard. :D Then there will be more users could give some suggestions.
Sorry, there aren't that many K9N boards out there, but mine is the K9N Platinum MS7250 Version 1.0. It's the AM2 non-SLI nVidia nForce 570 Chipset model.
Thanks for any help.

Problems with tabbed panels in Spry/DW CS3

Hi,
When I preview tabbed panels in IE (right now 7) the tab will
close and then give a split-second "flash of content" before
closing, is this a bug?? I have installed the Spry 1.61 updater
unless I have installed the updater incorrectly...thanks.

I don't know if you will have access to this because it's
still in test:
http://cinvmos10d:41031/Pages/sprytest.aspx
Thanks

Help with flexible panels in Accordian

I can't seem to get my panels to work as flexible when viewed in a browser. The scroll bars are gone, but only the first line of text shows up.
Here's what I tried...
I changed CSS of AccordianPanelContent to this...
.AccordionPanelContent {
     overflow: hidden;
     margin: 0px;
     padding: 0px;
Then at the very bottom of my source code added this.
<script type="text/javascript">

</script>
</body>
</html>
I'm guessing the problem lies in the fact that I have this form set up inside of a div. I tried to look for code forcing the height not to change but couldn't find the issue. There are no heights specified in the "SpryAccordian.css". Here's my CSS style sheet for the page. (Sorry it's long, but thought this might help someone see the issue... Please excuse my long-hand in the code -- not using shorthand to notate borders etc... I'm new and need it spelled out, for now...)
#MainContainer div is a box that hold two other divs. To the left is #LeftSide div. This has a logo, text... To the right, is the div containing the Spry Accordian.
@charset "UTF-8";
body {
     font-family: Verdana, Geneva, sans-serif;
     font-size: 100%;
     background-color: #960;
     background-image: url(../graphics/woodbkgsml.png);
     background-repeat: repeat;
     margin-top: 10px;
     margin-bottom: 10px;
#leftSide {
     float: left;
     width: 300px;
     border-right-width: 2px;
     border-right-style: dotted;
     border-right-color: gray;
     margin-top: 20px;
#header {
     text-align: center;
     width: 780px;
     margin-top: 5px;
     margin-right: auto;
     margin-left: auto;
     color: #F7E5A7;
#MainContainer {
     background-color: #FFF;
     width: 780px;
     border-top-width: 5px;
     border-right-width: 1px;
     border-bottom-width: 5px;
     border-left-width: 1px;
     border-top-style: solid;
     border-right-style: solid;
     border-bottom-style: solid;
     border-left-style: solid;
     border-top-color: #000;
     border-right-color: #000;
     border-bottom-color: #000;
     border-left-color: #000;
     text-align: center;
     padding: 25px;
     margin-top: 20px;
     margin-right: auto;
     margin-bottom: 0;
     margin-left: auto;
     font-family: Verdana, Geneva, sans-serif;
.logo {
     margin-top: 30px;
#leftSide p {
     font-weight: 100;
     font-style: italic;
     font-size: 85%;
.chkleft {
     float: left;
     margin-bottom: 10px;
     margin-left: 30px;
     text-align: left;
     margin-top: 5px;
Any ideas? I'd really like the panels to be flexible a height. Thanks! Jami

Hi Gary:
Thanks for the reply. I tried your suggestion, but alas, things got wacky.
When selected, the first panel text overflowed on top of the second accordian tab.
When I select the second panel, the first stays open, as well as the 2nd.
And the text for the next 4 accordian tabs gets out of wack -- they line up on the right hand of the accordian field, with multiple line breaks, rather than in a single line below each tab.
I noticed that overflow:hidden; shows up in two places in the Accordian css file. Tried deleting one, deleting both. but still "no go".
I feel I need to apologize to the forum. I wish I had a better handle on code. But I am actively trying to learn. Reading my book (and doing the exercises) for about an hour a day. And asking lots of questions. I hope it's OK to post these kinds of questions here, even though I'm not very advanced.
I really do appreciate your patience! Jami

Help with XMP Panels in Adobe BRidge

Hi All
I'm trying to create a XMP Panel for Adobe Bridge, and I'm having a weird problem I'm hoping someone can answer.
The Panel is created, and works, I can change a metadata field and the metadta field gets saved correctly.
However, I need to change one of the metadata fields in code, and although it's changing thee text within the field, when I close the panel it doesn't update the metadata.
Here's a code sippet:
First the form Items:
<fi:XMPFormItem
                              id="ftitle"
                              label="$$$/xmp/sdk/custompanels/Dave3/Title=Document Title:"
                              labelTooltip="$$$/xmp/sdk/custompanels/Dave3/TitleToolTip=The title of the document, or the name given to the resource. Typically, it will be a name by which the resource is formally known.">
<fi:XMPTextInput id="docTitle"
                                                             xmpPath="dc:title"
                                                             xmpType="Localized"
                                                             change="changeMe(event)"/>
</fi:XMPFormItem>
<mx:FormItem label="Change Title">
                    <mx:Button label="Digital"
                                           click="updateTitle(url.text)"
                                           />
</mx:FormItem>
And here's the function that changes the text:
                              private function updateTitle(url: String):void
                                        var st: String = "Hello Folks";
                                        docTitle.text = st;
                                        docTitle.enabled = true;
As expected, the text in the docTitle field changes, but when I close the FIleInfo panel the changed text is not written to the file.
Any Ideas?
Thanks in advance
David

Hi Gary:
Thanks for the reply. I tried your suggestion, but alas, things got wacky.
When selected, the first panel text overflowed on top of the second accordian tab.
When I select the second panel, the first stays open, as well as the 2nd.
And the text for the next 4 accordian tabs gets out of wack -- they line up on the right hand of the accordian field, with multiple line breaks, rather than in a single line below each tab.
I noticed that overflow:hidden; shows up in two places in the Accordian css file. Tried deleting one, deleting both. but still "no go".
I feel I need to apologize to the forum. I wish I had a better handle on code. But I am actively trying to learn. Reading my book (and doing the exercises) for about an hour a day. And asking lots of questions. I hope it's OK to post these kinds of questions here, even though I'm not very advanced.
I really do appreciate your patience! Jami

Help with collapsible panel in DW

I created a collapsible panel on my webpage and it's on-load state (when you open it in a browser and/or refresh the page) is open, meaning when I first open the page or refresh it the panel is open. I would like for it to be closed (in the on-load state. When you intially open the page in a browser) so that the visitor can just see the small tab and click on it if they choose to do so. My collapsible panel that I used is the standard one in Dreamweaver. Here's a link to my files (note: the one you want to pull up is: indextest.html and/or abouttest.html (either work) and SpryCollapsiblePanel.js): http://www.test.ashleysperrydesigns.com/
Thanks for the help in advanced.
ashmic

Add the highlighted part
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="SpryAssets/SpryCollapsiblePanel.css" rel="stylesheet">
</head>
<body>
<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Tab</div>
<div class="CollapsiblePanelContent">Content</div>
</div>
<script src="SpryAssets/SpryCollapsiblePanel.js"></script>
<script>
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1", {contentIsOpen:false});
</script>
</body>
</html>
Gramps

Help with draggable Panels

Hi All,
I am making some panels (3x3) which are draggable. When I
drag a panel over another panel these two panels must swap from
place. Therefore I use the DragManager.
On the mouseMove event I call a method which does:
if (_model.mouseIsDown) {
var dragsource:DragSource = new DragSource();
dragsource.addData(panelData, dataFormat);
DragManager.doDrag(panelWin, dragsource, event);
But this doDrag function is different from the startDrag()
function. With the startDrag function the Panel is visually
dragging instead of the doDrag function which only can show an
DragImage while the Panel itself stay's on it's own place.
What I want is to drag the Panel itself when I drag it (not
an DragImage) and when I enter another Panel(box) these Panels must
swap with a cool Move-effect.
Can anybody give me some help or hints on how to do this?
Thanks in advance!

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

Help with "Tabbed panels"

Similar Messages

Maybe you are looking for