Embed and Accordion in a Tab Panel

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

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

Similar Messages

Help! I have and issue with my tabbed panels

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

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

Spry Tabbed Panels - not correct in IE but correct in Chrome and MF

Hi,
I'm having problems with an extension I used for a client, so I want to use the Spry tabbed panels form dreamweaver, but they in IE8 it puts all the content under each other in the first tab ??
In Chrome and MF its correct. Do you know about this problem or is it because I did something wrong?
see: www.zorgfilosofie.nl/index2
The other pages where made with an extension but with that script my client can't edit with contribute. That's why I want to implement Dreamweaver Spry Tabbed Panels.
Thanks for answering!
Carla

Hello there from down under J
Het was mooi weer, maar vandaag regent het.
Toch zijn hier in deze kamer veel zonnestralen, want het probleem is opgelost!
I searched the whole evening for alternative but it did’t work with templates.
With the js files the problem is solved.
I don’t understand why the js file was not correct, because I just bought CS5.5
Where do I have to put de file so the problem will not happen again when I make another site?
Thanks a lot!
Best regards and take some sun with you!
Carla
Van: altruistic gramps [email protected]
Verzonden: woensdag 5 oktober 2011 2:16
Aan: Carla Leliveld
Onderwerp: Spry Tabbed Panels - not correct in IE but correct in Chrome and MF
Re: Spry Tabbed Panels - not correct in IE but correct in Chrome and MF
created by altruistic gramps <http://forums.adobe.com/people/altruistic+gramps> in Spry Framework for Ajax - View the full discussion <http://forums.adobe.com/message/3954185#3954185

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.

Google Analytics on Spry Tabbed Panels

I have created a website where I am using a few main html pages and have vertical Spry Tabbed panels for sections of information within most of the pages. I wish to track the clicks on the vertical Tabbed panels, but I am not having much luck implementing it. I could probably figure it out if I saw an example somewhere. I have also implemented a "back button" feature (thanks to Arnout Kazemier!) and clicking to go directly to a tab on a page using the SpryUtils into the default tab option for Spry Tabbed Panels. The Google Analytics web pages have information on gadget tracking, and one on tracking AJAX, and one on using the newer asynchronous tracking (which is supposed to be better for Ajax, etc).   I have tried to implement asynchronous tracking along with the "Tracking AJAX" recommendation by Google with no information being posted in a couple of days.
My website page where I have tried to implement it is here:
http://www.phostech.com/opt_con_v2.html
I have also seen examples where a counter is used just to count, but I would like the information on which pages were clicked.
I would rather not do this using the event tracking (but if that's the only way I'm OK), partly because the event tracking would be separate from the page tracking and the other features woudn't be as useful (exit page, sorting based on content, etc.).
I am not a great programmer, but I could probably manage it I saw an example close enough to what I need.
If anyone has any ideas, solutions, implemented examples that could help me, I would greatly appreciate it.
Thanks!

I have checked out your page using Firefox, firebug net panel that monitors requests from and to your page. And i do see a successful call to the google servers. But I also noticed a JavaScript error on your page caused by these lines of code:
http_request.onreadystatechange = sendAlert;
       http_request.open('GET', url, true);
       http_request.send(null);
You might want to remove those.

Open tabbed panels from dropdown list option value

I have about 10 tabbed panels on my page.
I created a dropdown list, <option value></option value>.
I need to open the specific panel when an option is selected from the dropdown list. I know how to open tabbed panels by URL, a button, and a link on the same page. But how do i open a tabbed panel from a dropdown list. The <option value> in IE does not allow for onclick events in IE.

Yes and I have been trying to find that. Right now I have it setup where the onchange event is "location = this.options[this.selectedIndex].value;">
and then I have each<option> in the dropdown list with teh value=http://URL.com?tab=3#tabbedpanels1.
It works but it isn't as dynamic as I would like. When i select each option in the dropdown, it refreshes the page and opens the correct tabbed panel. Then the dropdown list is reset to the default value because the page refreshed. I wanted to do this without the page refreshing, that way the dropdown list item remains at what I selected to open the tabbedpanel. and plus, I didn't want the page to refresh everytime but to just open the tabbedpanel the same way as if i made a button to open it.

Spry Accordions, Tabbed Panels, and Collapsible Panels: changing colors

I wanted to alert everyone to a great new Community article published by our very own David Powers. The article details the various best practices and methods for changing the colors of Accordion, Tabbed Panels, and Collapsible Panels widgets, including tab backgrounds, borders, and so on.
Here's the article:
http://kb2.adobe.com/community/publishing/504/cpsid_50437.html
Customization questions are pretty frequent in both the Spry and Dreamweaver forums. This new styling guide is sure to answer lots of peoples' questions.
Furthermore, the appearance of such an article is a great example of how Community content can interact and live symbiotically with Adobe Help. We've linked directly to David's piece from our own customization pages for the Spry Accordion, Tabbed Panels, and Collapsible Panels widgets:
Customize the Accordion widget
Customize the Tabbed Panels widget
Customize the Collapsible Panels widget
Thanks a lot to David for hammering out this article.
If you're interested in publishing Community articles of your own, you can download the Community Publishing AIR application and get right to work!

The borders you see, are called outline, its a accesiblity feature of the browsers,
Actually called 'focus' lines :-)
Here's an article about the Bluefocus lines seen in Safari.
http://www.brunobergher.com/blog/2009/01/19/safaris-blue-focus-lines/
Without creating a Spry widget myself right now to test, but I'm sure thata there is a 'focus' rule in the css...
trying the
{outline:none;}
on that rule.

Tabbed and accordion widgets not working after latest export.

The accordion widget was working on the sites I built, but now when I export the sites after changes, the accordion and tabbed panels don't work.
The link below shows the old accordion and the new one I was placed from Muse.
http://www.thresholddrain.co.nz/newsite/faqs.html
I don't have time to redo every accordion and tab on the site. Any ideas why it is not working and what I can do to fix it.
Thank you,
Ana

rodyaj wrote:
I'll check that error message out when I get home, but for now, you could try adding this to your .xinitrc instead:
setxkbmap -option caps:escape
This helped. Thanks!
rodyaj wrote:
Or maybe try setting by keycode rather than keysym in .Xmodmap. e.g.,
clear Lock
keycode 0x42 = Escape
(I think you'll need to use xev to find out what keycode your escape key is though.)
This one didn't work though. I tried removing the clear Lock line, and I don't get any errors. But then it doesn't work properly.

Spry Tabbed panels + Progressive Enhancement and Dynamic Loading of Content With Spry

Is there any way to combine tabbed panels together with "Progressive Enhancement and Dynamic Loading of Content With Spry"?
Visit: http://labs.adobe.com/technologies/spry/articles/best_practices/progressive_enhancement.ht ml#updatecontent
And click on the "Using Spry.Utils.updateContent()"
The 3rd example shows how to use a fade transition whenever the content changes.
I already have tabbed panels. My menu contains buttons (on tabs) and my Content div contains the panels.
Tabs code;
<ul class="TabbedPanelsTabGroup">
          <li class="TabbedPanelsTab">
               <table class="Button" >
                    <tr>
                    <td style="padding-right:0px" title ="Home">
                    <a href="javascript:TabbedPanels1.showPanel(1);" title="Home" style="background-image:url(/Buttons/Home.png);width:172px;height:75px;display:block;"><br/></a>
                    </td>
                    </tr>
               </table>
          </li>
etc
etc
etc
and the panel code:
<div class="TabbedPanelsContent" id="Home">
     CONTENT
</div>
I hoped i can use the example code from the link into my tabbed panels.
I thought this code:
onclick="FadeAndUpdateContent('event', 'data/AquoThonFrag.html'); return false;"
could be added to the tab code like this:
<a href="javascript:TabbedPanels1.showPanel(1);" onclick="FadeAndUpdateContent('event', 'data/AquoThonFrag.html'); return false;" title="Home" style="background-image:url(/Buttons/Home.png);width:172px;height:75px;display:block;"><br/></a>
But the content doesnt fade...
I know i need to change the header etc.
The following is from the link:
<!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>Aquo Events</title>
<script src="../../../includes/SpryEffects.js" type="text/javascript"></script>
<script src="../../../includes/SpryData.js" type="text/javascript"></script>
<script type="text/javascript">

</script>
<style type="text/css">
/* IE HACK to prevent bad rendering when fading. */
#event { background-color: white; }
</style>
</head>
So i changed my header etc, put the SpryEffects.js and SpryData.js into position and nothing changed...
Is there a way to keep my tabbed panel (or change as less as possible) and let
A. The fade work
B. The loading work.
The problem now is that it loads all pages instead of only the home. Therefore i wanted this Progressive Enhancement.
And the fading part is just because its nice...

It doesnt show in the post but off course i changed this link;
"data/AquoThonFrag.html"
into;
"javascript:TabbedPanels1.showPanel(1);"
I must say i dont know if this even works...

I have 2 tab panels on my website and 1 is not working

I have 2 tab panels on my website and 1 is not working one on a templet so it shows on all pages and one for some of the pages when I upload it to my server it brakes the ones on the pages heres an exaple
http://ol.helpmetechteam.com this is main page
http://ol.helpmetechteam.com/computer_repair.html this is one of the pages i need to have a tabed panle set up
I ran the test
http://validator.w3.org/check?uri=http%3A%2F%2Fol.helpmetechteam.com%2F&charset=%28detect+ automatically%29&doctype=Inline&group=0&verbose=1&user-agent=W3C_Validator%2F1.2
but I dont kow how to fix the error im getting I thought the doc type was right can any one help?
Thank you
Aaron Dye

You need to add the constructor for the second TabbedPanels as follows
var TabbedPanels2 = new Spry.Widget.TabbedPanels("TabbedPanels2");
Gramps

Spry tabbed panels and "The tag: "li" doesn't have an attribute: "tabindex" ..."

Hi,
I've been using the DW CS4 "Spry Tabbed Panels" on a few pages. When I validate the website (with DW tool for that), I get the following messages for each use of the tabbed panels: The tag: "li" doesn't have an attribute: "tabindex" in currently active versions. [XHTML 1.0 Transitional].
Should I worry about this? I'd like to have a code as clean and XHTML valid as possible. Is there a way to fix this so the message doesn't come up anymore?
Emilie
Example of code this message is linked to:
<div class="TabbedPanels" id="TabbedPanelsADMS">
<ul id="TabUL" class="TabbedPanelsTabGroup">
    <li id="TabLI1" class="TabbedPanelsTab" tabindex="0">About</li>
    <li id="TabLI2" class="TabbedPanelsTab" tabindex="0">Assets</li>
    <li id="TabLI3" class="TabbedPanelsTab" tabindex="0">Input</li>
    <li id="TabLI4" class="TabbedPanelsTab" tabindex="0">Output</li>
    <li id="TabLI5" class="TabbedPanelsTab" tabindex="0">Support</li>
    <li id="TabLI6" class="TabbedPanelsTab" tabindex="0">Purchase</li>
</ul>
<div class="TabbedPanelsContentGroup">
    
    <div class="TabbedPanelsContent">
      
    </div>
    
    <div class="TabbedPanelsContent">
      
    </div>
    
    <div class="TabbedPanelsContent">
      
    </div>
    
    <div class="TabbedPanelsContent">
      
    </div>
    
    <div class="TabbedPanelsContent">
      
    </div>
    
    <div class="TabbedPanelsContent">
      
    </div>
    
</div>

</div>

Should I worry about this? I'd like to have a code as clean and XHTML valid as possible. Is there a way to fix this so the message doesn't come up anymore?
If validation is important to you, you need to remove tabindex. Should you worry about it? Not really. Sometimes it makes sense to ignore validation to achieve a particular goal, which is why Spry widgets use tabindex in a technically invalid way.
The explanation as to why Spry does that can be found here: http://blogs.adobe.com/spryteam/2007/03/spry_widgets_and_tab_index.html.

Problem with Spry Tabbed Panels and Mac Safari

On a site I'm working on I have implemented Spry Tabbed
Panels. Everything was great until my boss looked at it on his Mac
Safari. Spry doesn't seem to honor the 100% width, and cuts it off.
I have looked at the CSS and don't see what is holding it up.
Here is
a link to a screenshot.
The CSS that defines the width is attached.
Can anyone help? Thanks!

Wow, so I am the only one that has ever used Spry that
doesn't work in Safari? I find that hard to believe.
So let me twist this another way. Does anyone know why a div
does not stretch 100% of it's parent in Safari?

Tabbed panels, Collapsible Panel, and Server Side Include

Hi,
I'm having a problem with the way a Server Side Include inside a Collapsible Panel displays.
Here is how this particular page is set up.
The page has spry tabbed panels.
>>A panel has one overall Collapsible panel (the main product tab)
>>>>Nested in that Collapsible panel are four other collapsible panels (Overview, Features, Screenshots, What's New).
>>>>>>In each of these four collapsible panels is a server side Include that features that category's content
E verything works fine as far as opening and closing is concerned. However, the problem is with the display. The content panel doesn't resize with the Include content, and therefore, the Include content extends outside the border of the content panel.
I'm thinking this is because it is Include content rather than normal content. Is that right?
Do I fix this by changing the overflow value of one the Tabbed Panel CSS styles? If so, which one should I change, and to what value?
Or if that's not how to fix it, can anyone tell me how?
Thanks a lot,
Mike

Hi, I'm using the latest version of Spry. I modified some CSS rules of the tabbed panels, but not the javascript file. I didn't do anything to the Collapsible Panel rules.
Since first posting this thread, I changed the overflow of the Tabbed Panels Content Group CSS rule to "scroll". That did produce a scroll, but I'd much rather have the panel expand. So, I changed it back the way it was.
Here's the page I'm working on. Click the Court Solutions tab to get to the problem panel.
http://www.ptssolutions.com/Test/public_safety_products_3.shtml
It has different results in IE and FireFox, but doesn't work correctly in either.
Thanks a lot for all your help,
Mike

Spry Tabbed Panels and Master/ Detail Page Set interraction

Hi,
I have created a feedback form and am using a Spry Tabbed Panel to allow users to review all responses to one question and then all responses to the next question in different tabs, there are 6 tabs in all. In each tab I have created a Master/ Detail Page set - well actually just the Master appears in the tab. This is working fine. I allow up to 20 responses to be shown on each tab, after which the user selects First/Previous/Next/Last. When they do this the screen refreshes and the tabbed panel display goes back to the default tab, clicking on the tab previously used correctly displays whichever of First/Previous/Next/Last the user selected. I'd like the display to remain on the user's current tab when they select First/Previous/Next/Last.
The page in question is here http://www.hollisterairshow.com/feedback-results2.php, then scroll about half way down the page and select one of the tabs.
Thanks.
Tony

Hi Tony,
Look at the following, blue coded is comment only, red coded is what has to be added to your existing code and orange coded is added by the SpryDataSet creator if done properly. Where the orange part starts, thats where you place your cursor when creating the dataset.
    <p> </p>
   <div id="TabbedPanels1" class="TabbedPanels">
      <ul class="TabbedPanelsTabGroup">
        <li class="TabbedPanelsTab" tabindex="0">All feedback</li>
        <li class="TabbedPanelsTab" tabindex="0">Suggestions for improvement</li>
        <li class="TabbedPanelsTab" tabindex="0">What did you like the most</li>
        <li class="TabbedPanelsTab" tabindex="0">What did you like the least</li>
        <li class="TabbedPanelsTab" tabindex="0">What else would you like to see</li>
        <li class="TabbedPanelsTab" tabindex="0">Any other comments</li>
      </ul>
      <div class="TabbedPanelsContentGroup">
        <div class="TabbedPanelsContent">
          <table border="1" align="center" id="allFeedback"> .... start feedback table tag (line 763)
            <tr>
              <td width="80"><strong>Feedback Number</strong></td>
              <td><strong>Days attended</strong></td>
              <td><strong>Arrived by</strong></td>
              <td><strong>Arrival arrangements</strong></td>
              <td><strong>Expectations met</strong></td>
              <td><strong>Ticket price</strong></td>
              <td><strong>Zip code</strong></td>
            </tr>
.................... rest of table probably your PHP repeat area
              </tr>
          </table> .... end feedback table tag
          <div spry:region="dsAllFeedback">
            <table>
               <tr>
                <th spry:sort="Feedback_Number">Feedback Number</th>
                <th spry:sort="Days_attended">Days attended</th>
                <th spry:sort="Arrived_by">Arrived by</th>
                <th spry:sort="Arrival_arrangements">Arrival arrangements</th>
                <th spry:sort="Expectations_met">Expectations met</th>
                <th spry:sort="Ticket_price">Ticket price</th>
                <th spry:sort="Zip_code">Zip code</th>
              </tr>
              <tr spry:repeat="dsAllFeedback" spry:setrow="dsAllFeedback" spry:odd="row_odd" spry:even="row_even" spry:hover="row_hover" spry:select="row_select">
                <td>{Feedback_Number}</td>
                <td>{Days_attended}</td>
                <td>{Arrived_by}</td>
                <td>{Arrival_arrangements}</td>
                <td>{Expectations_met}</td>
                <td>{Ticket_price}</td>
                <td>{Zip_code}</td>
              </tr>
            </table>
          </div>
          <br />
          <table border="0">
I hope this helps.
Ben

Spry Tabbed Panel and Master/Detail Page Set interraction

Hi,
I have created a feedback form and am using a Spry Tabbed Panel to allow users to review all responses to one question and then all responses to the next question in different tabs, there are 6 tabs in all. In each tab I have created a Master/ Detail Page set - well actually just the Master appears in the tab. This is working fine. I allow up to 20 responses to be shown on each page, after which the user selects First/Previous/Next/Last. When they do this the screen refreshes and the tabbed panel display goes back to the default tab, clicking on the tab previously used correctly displays whichever of First/Previous/Next/Last the user selected. I'd like the display to remain on the user's current tab when they select First/Previous/Next/Last.
The page in question is here http://www.hollisterairshow.com/feedback-results2.php, then scroll about half way down the page.
Thanks.
Tony

Hi Tony,
Have a look here http://labs.adobe.com/technologies/spry/samples/data_region/PagingSample.html and here http://labs.adobe.com/technologies/spry/samples/data_region/SpryPagedViewSample.html
If you need further assistance, go to the Spry Forum http://forums.adobe.com/community/labs/spry
I hope this helps.
Ben

Embed and Accordion in a Tab Panel

Similar Messages

Maybe you are looking for