Accordian panel widget dysfunctionality

Before I added an accordian panel widget, I pulled the content area on my page down to enlarge it vertically and allow enough room for panels to close and expand. It works fine if you leave "can close all" and "close all initially" options unchecked, but I don't want that. They should all be closed initially, so the visitor to the site can decide which to open and view. Anyways, if these options are checked the widget will move all text and placed image objects that lie below it, up and down, along with the bottom-most panel as it is opened and closed. This is extremely annoying and dysfunctional and renders the widget pretty useless for what I would like to do. Obviously the (css?) code is jacked. I hope the coders can fix this because the accordian panels is one of the slickest widgets in the palette.

I am getting an issue with the accordian as well. For me, my issue is that when I preview the page and I click on the accordians, everything underneath it sometimes moves and sometimes doesn't move and goes in front or behind the images. How does this stay consistant and always have the content that is underneath the accordian move? (look at the photo...I don't know if you can see it but the type and images is going over the dotted line and the dotted line is supposed to move when the accordian is open and closed).

Similar Messages

Spry accordian panel not closing

I have created a page using both the spry tabbed panels and
accordian panels. The accordian panels are in the content sections
of the tabbed ares. I want the accordian panels to be closed
initially, and whenever you click on the tab of the panel it will
open if it is closed, and close if it is open. I have modified the
code (as described in the Adobe Resource section) at the bottom of
the div. I got it to work on a simpler page (without the tabbed
panels) but I can't get it to close when click on if open. It will
close if another tab is clicked, but that isn't what I want. I'm
thinking it has something to do with the fact that it is in the
tabbed panels spry, or I am overlooking something. I am not very
verse in javascript, so I can't troubleshoot it. Can someone look
at the code and suggest a solution? The site is
http://www.capitolphotointeractive.com/test

Hi amilesslady,
You'll need to replace the version of the SpryAccordion.js
file on your site with a more recent one. You can get the the one
from Spry 1.6.1 here:
http://labs.adobe.com/technologies/spry/widgets/accordion/SpryAccordion.js
Or you can download the Dreamweaver 1.6.1 updater and use it
to update the Spry related files in Dreamweaver and your sites.
http://download.macromedia.com/pub/labs/spry/1/spry_p1-6-1_updater_022508.mxp
--== Kin ==--.

Accordian Panel content size

Hi,
I am using Accordian Panel in several pages. When I go to CSS styles paneland and change Accordion Panel content size/height to 600 for example, it changes all the Accordian panels throughout my site to 600.
Is there a simple way of changing each panel individually.Am I missing something very obvious. I am learning CSS but not quite there yet. Any help would be appreciated.
Michael

To start with, especially when you are a novice at CSS, do not alter the original Spry Style Sheets. You will thank me for this tip once you get into more complicated web sites.
To have variable panel heights use the following constructor
<script type="text/javascript">
var acc1 = new Spry.Widget.Accordion("Acc1", { useFixedPanelHeights: false });
</script>
If you want fixed heights per accordion then you have numerous options of which I will show one. Apply a unique ID to your accordion and style accordingly has follows.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css">
<style>
#Accordion600 .AccordionPanelContent {
    height: 600px;
</style>
</head>
<body>
<div id="Accordion600" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">Content 1</div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 2</div>
    <div class="AccordionPanelContent">Content 2</div>
</div>
</div>
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion600");
</script>
</body>
</html>

Problems editing accordian panels

Hi,
Have an issue where InContext editing was capable last month of editing a page with Spry accordian panels, but recently weno longer can edit the panels.
The subject page is
http://www.peradance.com/Atlanta-Dance-Classes-Calendar.html
which is a dance class calendar.
Each class is defined as a repeating region consisting of a title and a description, both within a Spry accordian panel which when click expands the accordian detail window to show the description.
I set this up for the client weeks ago and to my surprise it worked OK with InContext editing. However, now we find it is difficult to edit the text in the title windows -- perhaps some recent update to InContext editing has broken this ability.
We can add or duplicate a repeating region to add a new class, but when we try to click inside the Title box for that class we can't seem to insert a cursor anymore to change the text -- InContext editing now seems confused and wants to expand/contract the description panel, rather than let us insert a cursor to edit the title. We can insert the cursor in the description and edit it OK.
This fails using Windows Firefox, IE8 and IE7 so trying another browser doesn't help.
I tried to talk the client into a simpler calendar without the Spry expanding accordian (just have the class title and description always exposed) but he would rather abandon Adobe's software than give up that functionality. What he really wanted rather than the accordian was for the class description to appear in a popup window when the cursor hovers any title, but I discovered there is no way to use Spry tips or any javascript popup in a way that the client can edit with InContext editing. I was surprised to find the Accordian panel did work fine. Why it has now stopped working is a mystery.
The code for a day on the calendar looks like this:
<div class="day">
<p class="title">Monday</p>
<div id="Accordion2" class="Accordion" tabindex="0" ice:repeatinggroup="*">
      <div class="AccordionPanel AccordionPanelOpen" ice:repeating="true">
        <div class="AccordionPanelTab" ice:editable="*">
            <p align="center"><span style="font-weight: bold;"><span style="font-style: italic;">7:00 PM BELLY DANCE BASICS & FITNESS</span></span></p>
        </div>
         <div style="height: auto; display: block;" class="AccordionPanelContent" ice:editable="*">
         Learn the fundamentals of the art of belly dance from multi award winning instructor Aziza Nawal. In this class, you will learn the basics of middle eastern dance, improve your tecniques, all while you get a nice workout and toning your body
         </div>
      </div>
<div class="AccordionPanel AccordionPanelClosed" ice:repeating="true">
    <div class="AccordionPanelTab" ice:editable="*">
        <p align="center"><span style="font-weight: bold;"><span style="font-style: italic;">8:00 PM  FOCUS on CLOSE EMBRACE TANGO</span></span></p>
     </div>
     <div style="height: 0px; display: none;" class="AccordionPanelContent" ice:editable="*">
In our Monday classes, we focus on concepts dealing with the technique of close embrace tango while always keeping a sharp focus on musicality and navigation. The moves that we teach in this class will be simple, musical and elegant. We will focus on different tango orchestras as well as vals and milonga and give you specific tools and moves to interpret these in an interesting and satisfying way. We will try to always spend time focusing on the followers role in the dance.</div>
   </div>
</div>
</div>

The Accordion keyboard navigation feature (the ability to change the open panel using the keyboard keys ) is preventing InContext Editing to properly edit the contents of the editable region.
You can disable to keyboard navigation feature of an Accordion by setting it to false in the constructor:
    var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false , enableKeyboardNavigation:false});
Note: to disable keyboard navigation when the page is loaded inside InContext Editing use:
var useKeyboard = typeof(top.ice) == "undefined";
var Accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false , enableKeyboardNavigation:useKeyboard });
This will make the editable regions editable only in Internet Explorer.
There's a CSS rule used by the Accordion widget to disable text selection on the panel titles in Firefox and Safari:search .AccordionPanelTab in the SpryAccordion.css file and remove:
    -moz-user-select: none;
    -khtml-user-select: none;
See the InContext Editing known issues and limitations, the Editing section, from Adobe Labs InContext Editing page.
Regards,
Dan Popa

Accordion Panel Widget - open and close speed.

Hello,
Is there any way to change the speed that an Accordion Panel Widget opens and closes?
I would like it to be slower than it is now.
For my project it would be more relaxed and graceful.
Thanks,
Chris.

HI Chris
With Accordion we cannot setup the speed as of now , but you can try out composition widget where we can define transition, auto play speed.
Thanks,
Sanjit

Edit JS on spry sliding panels widget to fix auto panel height problem

Hi guys,
Ive been trying for a while to make the sliding panels widget
show each panel in its own height instead of the longest panel's height in the container.
I tried reading all the js file to play with it and find a solution but the truth is i dont know how to do what i want.
I do, however, have a list of things that i believe if implemented should work,
could you help me do these fixes on the js? ( any one you know how to or think will work )
1. edit so that: Panels dont have any height ( or panel content display none ) if it isnt current panel. If current panel is "id:1" the assume class 1 style properties. As soon as it looses focus/"currentpanel" class it looses its class 1 properties. And the new current panel ("id:2") assumes its own class 2 properties. And so on.
2. edit so that: PanelContainer ( the one that holds all the panels ) displays none BUT the current panel. So all panels could be display none unless they assume the "currentpanel" class and so they change to display. Maybe this way the container assumes only the height of the displayed panel and looses it once its no longer displayed assuming the next displayed one.
3. edit so that: Panel container checks for current panel's height and assumes that height instantly ( there is still a panel inside the container that would be longer than the current panel, maybe with overflow hidden this isnt a problem )
4. Using SpryDOMUtils.js I am currently playing with the code pasted below,
the idea came from Gramp's Spry Sliding Panels Group Navigation Buttons cookbook
He addresses a different problem, but since it has to do with identifying the current panel and doing something when the panel is x number, i thought there could be a height property set for each panel when each is the current one, atleast something can be done with this, my problem is i dont know how to set that something. Please check out the following code:
<script>
// The following function - setPanelNavigation() - assumes the following
// 1. Sliding Panels have a class of SlidingPanelsContent AND a unique ID
// 2. The Previous Panel button has an ID of previousPanel
// 3. The Next Panel button has an ID of nextPanel
// 4. SpryDOMUtils.js has been linked
function setPanelNavigation() {
    var current = sp1.getCurrentPanel(); // Get the current panel
    var panelCount = sp1.getContentPanelsCount(); // Get the total number of panels
    var panelNumber=1; // Give a value to the first panel number
    Spry.$$(".SlidingPanelsContent").forEach(function(node) { // Cycle through the panels
                 if (node.id==current.id){ // The current panel now receives a number
         if ( panelNumber==1 ) Spry.$$(".SlidingPanelsContentGroup").setAttribute('height', 750); //
           if ( panelNumber==2 ) Spry.$$(".SlidingPanelsContentGroup").setAttribute('height', 250); //
        panelNumber++; // Go to next panel after incrementing the count
Spry.Utils.addLoadListener(setPanelNavigation); // Set buttons to initial value
var sp1 = new Spry.Widget.SlidingPanels("panelwidget");
</script>
What am i doing wrong in that bit ? I thought i had it there, but it didnt work.
Anyone, please help. Thank you.

wait my bad, the link to my page is:
http://www.pupr.edu/department/industrial/students.asp
** no s on department

Problem with Accordion Widget INSIDE Sliding Panel Widget

Hello,
perhaps I should not do this, but I nested an Accordion
Widget inside a Sliding Panels Widget:
- There are eight Panels.
- Each one contains a complete Accordion.
The sliding works fine, and so does the Accordion animation,
but the text inside the Accordion Panel Tabs won't move along, when
a tab is activated. I need to hover the mouse over the accordion to
make the panel texts appear again.
Of course, when I un-nest the widgets and move the Accordion
widget out of the Sliding Panel widget, everything is fine.
My question is:
- am I demanding "too much" by nesting the widgets?
- or should this basically work, and the problem arises from
rivalling scripts?
Here is a link:
Nested
widgets Test
The horizontal top menu will activate the sliding panels, but
as of now only the leftmost menu item contains an Accordion (I know
the CSS does not look nice yet).
Is there anything I can optimise to get this to work?
Thank you so much,
Greetings, Jensen
Edit: The problem does NOT occur in Firefox, but in
Safari.

Hi John,
That is the expected behavior if the "Overlap items below" is unchecked. Please refer to the following link http://screencasteu.worldsecuresystems.com/aish/2013-08-21_1947.png. If you don't want the page to wiggle up and down, please check the box shown in the screenshot.
Regards,
Aish

Display external html page in (Collapsible Panel widget)

i everybody
is there a way to display external html page in (Collapsible Panel widget)
All the example a seen is with raw text in it
is the panel can display different object instead of simple text
At least a internal designed html page
Thanks

Thanks... surely a easy one for you
But its a great tool and its exatly what i want
even my js button works trough it
Thanks again

Multi page recordset output from ASP page on Spry Tabbed Panel Widget

I am using a simple Spry Tabbed panel set on my asp page to show the output from different ASP pages, inside the tabbed panels. The tabbed panels on the page under consideration (destination page) display the output from different asp pages (source pages). The source asp pages generate multi page outputs which are paginated on the source page itself and pagination links are displayed on the source page itself.
However, we dont want to display the source page outside of the tabbed panel, but instead the output content from the source asp pages should show inside the tabbeed panels only. The first page generated by the source asp page displays correctly inside the tabbed panel. However, when the user clicks on the links for the next page generated by the source asp page, but which is being displayed inside the destination page tabbed panel, they dont display the next page inside the tabbed panel. Instead the source asp page displays the output outside the tabbed panel destination page.
Please advise on how to ensure that the user can page through the recordset generated by the source asp page by clicking on the pagination links at the bottom of the records, while ensuring that the output displays within the tabbed panels on the destination asp page.
I am enclosing the source code being used to generate the spry tabbed panel widget and also updating it with the output from the source asp page. In this case, the code given below is from the main page containing the widget and the source asp page is "sample.asp", which generates multi page output.
Please note that I am not too keen on using xml data sets output from the source asp page, but would be more comfortable with directly using the asp pages to fill the tabbed panel content.
Please help
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script language="javascript" src="/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script src="/SpryAssets/xpath.js" type="text/javascript"></script>
<script src="/SpryAssets/SpryData.js" type="text/javascript"></script>
<link href="/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
      <li class="TabbedPanelsTab" tabindex="0" onclick="Spry.Utils.updateContent('two','sample.asp?page=' <%=i%>); Spry.Data.initRegions();" >Tab 1</li>
       <li class="TabbedPanelsTab" tabindex="0">Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
    <div id=two class="TabbedPanelsContent">Content 1</div>
    <div class="TabbedPanelsContent">Content 2</div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>

I fully agree that the problem does not lie with tthe tabbed panels.
The solution would probably be first required to be tried using ajax on any div tab.
Then the same code would have to be used on Sprytabbed panel. Hence, the following may be advised:
1. Sample code for server side pagination and displaying inside any div tag and refreshing it using ajax. the update link would also lie inside the div tag which would show the next/ previous page without reloading the page.
2. Then adapting the refresh technique using ajax in the Spry Tabbed panel using the inbuilt updatecontent method of the Spry Tabbed panels.
In order to achieve the above, I am getting the recordset output in the tab content as expected. The recordset is also getting the pagination links from server side asp as required.
However, it is also generating the following error.
Webpage error details
Message: Unterminated string constant
Line: 9
Char: 56
Code: 0
URI: http://localhost/test/test5.asp
The sourcecode is as given below. If you can help with the error indicated above, my problem would probably get solved.
<html><head>
<title>Untitled Document</title>
<link href="/SpryAssets/SpryTabbedPanels.css" rel="stylesheet" type="text/css">
<script src="/SpryAssets/SpryURLUtils.js" type="text/javascript"></script>
<script src="/SpryAssets/SpryTabbedPanels.js" type="text/javascript"></script>
<script src="/SpryAssets/SpryData.js" type="text/javascript"></script>
<script src="/SpryAssets/xPath.js" type="text/javascript"></script>
</head>
<body>
<div id="TabbedPanels1" class="TabbedPanels">
<ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" tabindex="0" onclick="Spry.Utils.updateContent('one','untitled-5.asp');">Tab 1</li>
    <li class="TabbedPanelsTab" tabindex="0" >Tab 2</li>
</ul>
<div class="TabbedPanelsContentGroup">
    <div id=one class="TabbedPanelsContent">Content 1</div>
    <div id ="two" class="TabbedPanelsContent">Content 2</div>
</div>
</div>
<script type="text/javascript">
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
</script>
</body>
</html>

Draw an Indesign Template Icon into a generic panel widget

Hello friends
I want to draw an image preview of perticular indesign template file into a generic panel widget.
I refer bascic panel treeview ,but thing is that it will support jgp,pdf file format not indt or indd format.
My Requirement is As follows
i have root folder and this root folder contains the template file ,when user select the template from this folder preview of that file is drwan into the generic panel.
if anybody knows the solution for the same please help me.
Thanks
Tahir

Hi Hans
If you want to use PNG image, that is embedded in plugins binary you can simply use PlatformIconClass in your GenericPanelWidget Draw method.
"How can I draw an icon form the fr resource into this widget?"
PlatformIconClass thePIC;
thPIC.LoadIcon(kYOURPluginID, kPicIcoTopOutsidePictureRsrcID);
thPIC.Draw(inYOURViewPort, iconSysRect, kFalse);
other way is to use PNGArt class which gives a pointer to AGMImageRecord
PNGArt pngArt;
pngArt.SetRsrc(kYOURPluginID, kPicIcoTopOutsidePictureRsrcID, false);
AGMImageRecord* theImageRecord2 = pngArt.GetBitmap();
"Instead of PNG, can I use BMP (Bitmap)?"
InDesign resources are based on PNG image format. Don't think you can work with other formats.
Regards
Bartek

Re: Spry Accordian Panels

Hi. I used Spry Accordian Panels in a new website I created using Dreamweaver CS6. Most people can see and click the panel to open it and see the content in it. However, I know someone that's blind that would like to use the site but is having a lot of trouble with it. The panel tabs are not links so it doesn't tell him to click it. I've tried putting the tabindex attribute on each panel tab and the aria-polite:polite but it hasn't helped. Any ideas?

Hi. I used Spry Accordian Panels in a new website I created using Dreamweaver CS6. Most people can see and click the panel to open it and see the content in it. However, I know someone that's blind that would like to use the site but is having a lot of trouble with it. The panel tabs are not links so it doesn't tell him to click it. I've tried putting the tabindex attribute on each panel tab and the aria-polite:polite but it hasn't helped. Any ideas?

Need help with horizontal accordian panels

Hi,
I'm wondering how I would re-create a horizontal accordian panel set, such as the one used in this website link, "http://www.thecapriapts.com/".
When I insert a "spry accordian" panel set, the panels are stacked on top of each other. I guess you would consider that a "vertical" accordian. Is it possible to manipulate the CSS to have it display horizontally, like the link I attached? Or.. is this a common javascript that I sould look into?
As always, thanks for your help out there...
Chris

With spry, there are two different kinds you can use: horizontal and vertical. What you're looking at in that site is horizontal. Usually, it appears as rectangles placed next to each other with the spry flying out below. In DW, you can go to your CSS rules for your spry menu and change the width and height of your boxes in your spry, depending upon which rule you have selected. Play around with that and see if you can just manipulate the horizontal accordian spry to where the rectangles end up being tall and thin. This will make it difficult, however, to get the text on its side like you see in that site. I'm not sure how you would go about doing that. But I would suggest trying to play around with the values in your CSS styles panel on the right (this is me looking at CS5 mind you. I'm not sure what you're running.)
Either way, for times sake and also readability, might I respectfully suggest playing around with other sprys to see if any look more aesthetically pleasing for your site? It would also make it a lot simpler to tweak to your liking.

Tabbed panel widget vertical alignment

In IE9, Chrome and Mozilla I have a vertical alignment problem in all browsers with the labels of a tabbed panel widget when sub-element positioning is set to horizontally-centererd or horizontally-top aligned.
Also this tabbed panel in IE9 has a 50% opacity whereas in Chrome and Mozilla it is shown as expected.
Please press the horn icon on my website http://www.timberexpert.gr to see the problem.
I am frustrated! Please recommend a solution.

IE9
Mozilla
I have drawn a horizontal yellow line to show vertical alignment of tabbed legends

Tabbed Panel Widget

I have two questions about changing the behavior of the SPRY
tabbed-panel widget that come with CS3 DW. For those very familiar
with this widget the answers should be easy.
1) Is it possible to close all tabs and have each panel of a
tab open only when its tab is clicked?
2) In a similar light, is it possible to inactivate the
panels of certain tabs, so that their respective tabs can be used
as buttons to effectuate other kinds of behavior, such as closing
any tab that has been left open.
If you can answer affirmatively to any of the above
questions, please point me in the direction I need to go in order
to achieve my goal.

Hello. Thank you for responding to my delima.
I have "did" as you suggested. Except I see some code after my link href that is not included in yours.
See the page at www.AmericanContractorsExchange.com Now the upper "collapsable panel remains open and the tab is not in a closed state..
Date: Tue, 3 Jan 2012 00:03:25 -0700
From: [email protected]
To: [email protected]
Subject: Tabbed Panel Widget
Re: Tabbed Panel Widget created by altruistic gramps in Dreamweaver - View the full discussion
1) Is it possible to close all tabs and have each panel of a tab open only when its tab is clicked?
Have a look at the following example
.hidden
Tab 2
Content 1
Content 2
var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1");
Spry.$$("li.TabbedPanelsTab").addEventListener("click", MyOnClickHandler, false);
function MyOnClickHandler(e) {
Spry.$$("div.TabbedPanelsContentGroup").removeClassName("hidden");
return false;
2) In a similar light, is it possible to inactivate the panels of certain tabs, so that their respective tabs can be used as buttons to effectuate other kinds of behavior, such as closing any tab that has been left open.
Have a look at the spry Element Selector http://labs.adobe.com/technologies/spry/articles/element_selector/
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/4115011#4115011
To unsubscribe from this thread, please visit the message page at http://forums.adobe.com/message/4115011#4115011. In the Actions box on the right, click the Stop Email Notifications link.
Start a new discussion in Dreamweaver 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.

Tabbed panel widget - broken line

Why does this happen with the tabbed panel widget (see pink arrow in screenshot)? I've tried moving the elements around and stroking the individual right element tab but nothing works.
http://www.cancerdxpathology.org.au/useful-links.html
Chris

Under Layers go to the content Area and move the Textfields to the left and/or remove the pictures , after that you can resize the tabbed panel.
Hope that helps

Accordian panel widget dysfunctionality

Similar Messages

Maybe you are looking for