Tweaking how accordion content panels opens

Referencing the accordion at www.Greensboro101.com.
I have an accordion of fixed height. The panels are not fixed height and open at varying heights based on content.
PROBLEM: When a panel tab near the bottom of the visible accorion is clicked, the tab remains staionary while the content panel opens downward, leaving the content panel partially hidden or completely hidden and requiring the user to scroll down in the accordion to see the conent.
DESIRED SOLUTION: I would like to make the tab and associated conent panel, when opened, slide up so that the tab panel is at the very top of the accordion. Is that possible?

Have a look here http://foundationphp.com/tutorials/spry_url_utils.php
Also have a look here where accordions have been used for the menu http://backyardfurniture.com.au/
Gramps

Similar Messages

Accordion content panels open on IE

I am using Spry 1.6.1. The Accordion works as advertised on Safari and Firefox. On IE all content panels are open. Clicking on them has no effect. A height value is specified in .AccordionPanelContent:
.AccordionPanelContent {
overflow: auto;
margin: 0px;
padding: 0px;
height: 200px;
background-color: #FFFFCC;
In trying to make this work I have added arguments to the Accordion object constructor call as well:
var rssAccordion = new Spry.Widget.Accordion("rssAccordion",
{useFixedPanelHeights: true, enableAnimation: true, defaultPanel: 0});
I would appreciate any help.
Alan

I have the same problem but I, as far as I can tell, do not have any fatal errors (like open tags) anywhere.
http://www.radioimaging101.com
If ANYONE sees why IE is doing this please let me know... I have tested in Chrome (which I hear behaves a lot like Safari) and in Firefox... they both display it perfectly. I'm using IE 8, btw.
Please help!! Gracias!

Combining image and text in accordion content panel

Hello,
I'm having difficulty displaying image and text together within an accordion content panel. What I need is a thumbnail photo of a staff member plus a short bio. I've put a panel together so it displays as needed in Live View, but not in IE8, Foxfire8, or Chrome. I'm using Dreamweaver 5.5, Spry 1.6.1, Windows 7.
Here's the code for the panel that includes an image not displaying:
<div class="AccordionPanel">
<div class="AccordionPanelTab">Stan Swiercz, Training Manager</div>
<div class="AccordionPanelContent">
<div class = "PanelImage"> <img src="/images/StanSwiercz.jpg"/></div>
Bio text goes here</div>
</div>
Here's a link to a test page (ignore funky color variations, still settling those). The panel that is set to open should display an image floating left with text wrapping, as it does in Live View.
http://cet-training.org/Test%20folder/people.html
I''ve double-checked documentation, help, and done searches, but can't find any information about what should be an easy thing to do. Any help out there?
Thank you very much,
George

The location of the image is http://cet-training.org/Test%20folder/images/StanSwiercz.jpg (click the link to see the image)
This is the markup from your document <img src="/images/StanSwiercz.jpg"/> which means that the image is located in the images folder which is located in the root directory.
Hence the image cannot be found by your document.
The following are possible solutions, please choose one only
change the location of the images folder to reside in the root directory
delete the leading slash from the link as in <img src="images/StanSwiercz.jpg"/>
change the link to an absolute value as in <img src="http://cet-training.org/Test%20folder/images/StanSwiercz.jpg"/>
Gramps

How to make Spry Accordion Content Panel with a variable content fit

I have a problem. The content panel has a fixed length so I changed it to auto so I can view all the content of each panel. The problem is that the content panel takes the dimensions of the longest content and applies that to ALL the panels. So as you click from one to the other, some are practically empty with all the space, while others seem full.
The question is, is there a way to vary the size of the content panel so on one that has not a lot of content stays to that size. This is the way I have the CSS for that. How can I achieve the variable heights?
.AccordionPanelContent {
overflow: auto;
margin: 0px;
padding: 5px 4px 6px 15px;
height: auto;
background: url(../images/backgrcolor0033.png);
color: #FFF;
Thank you.

<!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">
</head>
<body>
<div id="Accordion1" 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("Accordion1", { useFixedPanelHeights: false });</script>
</body>
</html>
Gramps

Accordion content panels

I am using accordion menus in my site( DWCS3) and have links in the content panel area. I would just like the the corresponding panel to stay open when clicking on the links contained within the content. Does anyone know how to achieve this? Thanks much!!

Have a look here http://foundationphp.com/tutorials/spry_url_utils.php
Also have a look here where accordions have been used for the menu http://backyardfurniture.com.au/
Gramps

Setting accordion content panel height with hidden content

Following previous instructions, I set

at the bottom of the content page. However, some of the
accordion panel content is hidden until the user selects a radio
button. The panel height is not dynamically adjusted to the
content. FYI, the content is hidden using
style.visibility = 'hidden
In SpryAccordion.css, I commented out the height attribute.
.AccordionPanelContent {
overflow: auto;
margin: 0px;
padding: 0px;
/* height: 200px; */
It appears to me that the panel height is still fixed, but by
what I am not sure. Any clues would be appreciated. Here's the demo
page:
http://www.phelpstek.com/cr/wildflower_wedding_favors/index.html
Thanks for any input/ideas.
Brian Phelps
www.phelpstek.com

graylensman wrote:
|| I'm working on a website with two column layout. The left
column
|| contains a list of site navigation links, the right column
contains
|| actual content for any given page. I'm using CSS to set a
left-hand
|| rule that runs the height of the right-hand column. On
some pages,
|| there's a lot of content; on others, very little. When
there's
|| little content, my rule doesn't run as long as the links
list,
|| because the rule is applied to the right column.
||
|| So, I want this rule to run at least as long as that left
column,
|| but run as long as the content in the right column when
needed. Here
|| are links to a couple of pages, so you can see what's
going on:
||
|| Good:
||
http://www.hillphoenix.com/web_redesign/techInfo/techInfo.html
||
|| Not so good:
||
http://www.hillphoenix.com/web_redesign/communications/whatsNew.html
||
||
|| Thanks for your help, in advance!
hello,
apply this to your right column div and change 430px to
whatever you want
min-height: 430px;
height:auto;
_height: 430px;
regards
bretz

Accordion Default Panel Based on Date

I created an accordion panel with a Spry dataset consisting of elements relating to an event schedule. By default, I have all content panels closed, but I would like to set the default content panel based on an event's date.
So, if the first event is on September 7, I would like the content panel open for the September 7 event (through the end of that day). On September 8th, I would like the next event's content panel open through that date and so on.
It looks like I'll need to set a javascript date conditional, then loop through the dataset with "addObserver" and have it set the default panel through scripting in the widget javascript.
Anyone have specific insight on how to accomplish this?
Much Thanks,
Colin
Here's my basic code:
                                <div style="width:622px" id="Acc1" class="Accordion" tabindex="0">
                                    <div spry:repeat="ds1" class="AccordionPanel">
                                    <div class="AccordionPanelTab" >
                                        <div class="rowsched" spry:even="schedeven" spry:odd="schedodd" spry:hover="schedhover">
                                        <ul style="display:inline;padding-left:4px">
                                            <li class="rositem" style="left:13px"><span spry:content="{Date}"></span></li>
                                            <li class="rositem" style="left:155px"><span spry:content="{Opponent}"></span></div> </li>
                                            <li class="rositem" style="left:310px"><span spry:content="{Location}"></span></li>
                                            <li class="rositem" style="left:455px"><span spry:content="{TV}"></span></li>
                                            <li class="rositem" style="left:555px"><span spry:content="{Time}{result}"></span></li>
                                          </ul>
                                    </div>
                                    </div>
                                    <div class="AccordionPanelContent">
                                        <div style="color:#000000"><img src="{icon}" alt="{Opponent}" width="100" height="67" /> Other content goes here</div>
                                  </div>
                                  </div>
<script type="text/javascript">
var acc1 = new Spry.Widget.Accordion("Acc1", { useFixedPanelHeights: false, defaultPanel: -1 });
</script>

You should be able to retrieve the value of other valueset using :$FLEX$.<valuesetname> I'm not sure about the exact syntax, it's been a while since i worked with applications.

How can I make the spry accordion remember the panel open when I refresh the page or jump to a new page?

How can I make the spry accordion remember the panel open
when I refresh the page or jump to a new page?
I am using the accordion feature on all my pages as a
navigation aid. It has three panels. When you refresh the page the
panel goes back to the default pane... Is there a way of
controlling this so that the browser can remember the pane that is
open (say set a variable, cookie, other?)

Look for "Set the default open panel" on the following page:
http://labs.adobe.com/technologies/spry/articles/accordion_overview/index.html
Keep in mind you would need to change that bit of code on
every page. The only way to do it more dynamically would be to
include a custom javascript or PHP/ASP style script in order to
change the value.

Prevent lower text from moving when accordion panels open

I tried out the Accordion Panel from Project Seven which is
really nice and works well. My only issue right now is that I would
like to prevent the rest of the text outside and below this widget
within the same column from moving. When any panel opens it causes
the contents of the entire column to shift down thus causing the
page to shift down as well.
I have tried using a new div for the content below the panels
and also a new table below but can't seem to figure out how to keep
the content from shifting. Curently I have a table cell nested and
have tried with CSS to keep it from moving but that is not working
either.
Thanks in advance for any help with this.
Here is the code for the column in question:

no takers on this one? Does anyone know how I could fix this
with divs? Is it possible to put this accordion into a separate div
and create another below it that would not move? Like on the new
apple site...They have some really awesome accordion style navs on
the sides that do not throw the rest of the page off when they open
or close.
Thanks.

"Can close all" option not working for content panel within accordion widget

Hi. I can close an accordion menu by clicking the header but it won't close by clicking on the content panel itself (even though I have can close all selected in the flyout.) I've seen tutorials where it works but I can't replicate. Seems like a bug.
Thanks for any ideas on how to fix or a workaround.
I'm on the CC 2014.3 release. Mac OS 10.10.2
P

Hello,
if you using OAW (Outlook AnyWhere) check the authentication method
get-OutlookAnywhere -Identity "<Servername>xpv00645\RPC (Default Web Site)" | fl *AuthenticationMethod*
I think it is set of NTLM or Negotiate.
Outlook 2007 has negotiate
problems at an OAW connection
authentication.
Change the authentication to NTLM for
the internal and Basic for the extenal method.
You need to reconfigure the Outlook Exhange settings to anonymous authentication and in the proxy settings to default authentication

Muse Accordion widgit, I need to know how I find the (Open Closed ) link it seems to have vanished

Muse Accordion widgit, I need to know how I find the (Open Closed ) link it seems to have vanished all I can find is ( Expand behavior and Overlap Items Below.)

If I got your query right, do you mean you don't have all the options in the Accordion Options panel as pictured below?
If the above is true, can you try re-inserting the Accordion panel and check if the options then become available for you. Also, please check if you're running the latest version of Muse i.e. 4.1.8 as on today.
If the problem persists, please try creating a new Muse project and see if you are able to replicate the behaviour on a fresh Muse site as well.
Thanks,
Vinayak

How to add a Description Column in the Content Panel (Bridge CS5)

Hi,
Is it possible to add a Description Column in the Content Panel. If so, how?
I'm talking about the Description from the IPTC Core data and I'm using Bridge CS5.
Thanks in advance,
Frank

This is the screenshot of the Metadata Workspace with the Content Panel (not Metadata Panel). As you can see it shows Name, Label, Keywords etc. but it's not possible to show Description in that list as a column.
I still agree that it would be a big bonus if you could alter this workspace with description field (even with more lines etc) but what Curt shows you might be an alternative. I couldn't help noticing that you have not created your own custom workspaces.
Try and play with this. You have the option to divide the window in 3 columns max but you can create different panels as a row in 1 column.
Grabbing a tab and move it to a new location until a single blue line appears (between the borders, a bit tricky). A vertical blue line means as a column and a horizontal line means a row. A surrounding blue line means same panel but adding as a tab. You can rearrange the tabs by dragging to left or right. under the menu window you can select which panels are visible or use right mouse click menu on top of a panel to choose.
Sadly enough only 3 columns and only one panel of it's kind per workspace, but you can resize the panels also to your own workflow needs.
In Bridge preferences you can change the colors for background in the general tab and in the metadata tab you can select what info to view in certain sections. Personally I have set my IPTC to view only description, keywords, date created and a few other subjects.
That is the nice thing about Bridge, creating custom workspaces, save them and being able to recreate them without problems :-)
I attach some screenshot of my daily workflow (with the luxury of having a 30' screen) but there are plenty of other options possible, don't forget to name and save your workspace.

Accordion Menu - need to control which panel opens

I have an accordion menu that works fine but when I put it
into action
on the site, I realized that I needed the accordion to open
up a
different section on each new page.
Since I have the accordion menu in an SSI (server side
include) I don't
want to have a different spry asset for each page. However, I
think
setting a session variable would work to control which
section is opened.
Anyone done this? What would it look like?

quote:
Danilo Celic wrote:
Try this page:
http://foundationphp.com/tutorials/spry_url_utils.php
Thanks a lot. This web page gave some answers, but now I have
a new problem:
When I test my accordion menu in a normal html page
everything works fine. When I put this accordion menu to my DW
template it stops working. The result is that every accordion's
panels are open!
Why? Can you assist me?
In template head I have this code:
<link href="../SpryAssets/SpryAccordion.css"
rel="stylesheet" type="text/css" />
<script src="../SpryAssets/SpryAccordion.js"
type="text/javascript"></script>
<script type="text/javascript"
src="SpryAssets/SpryURLUtils.js"></script>
<script type="text/javascript">
var params = Spry.Utils.getLocationParamsAsObject();
</script>
And in template end just before </body> tag I have this
code:
<script type="text/javascript">

</script>

Keeping at Least One Accordion Panel Open with Variable Heights

Hi -
Is there a way to keep at least one panel open when using {
useFixedPanelHeights: false }?
Here's an example:
http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html#VariablePan elHeights
If panel 4 is open, and you click the panel 4 heading, it
closes and no
panel is open.
Thanks,
Rod

Sorry, I didn't read my full message regarding wanting only
one panel to open.
What I ended up doing was using a PHP conditional to display
a message if a certain variable was not passed in the URL. See my
post on the Friends of Ed forum. Scroll to the bottom for my
solution.
http://friendsofed.infopop.net/4/OpenTopic?a=tpc&s=989094322&f=5283032876&m=3461018571

History panel opens in left side of window every time I open a Firefox session. How do I turn it OFF?

Windows forced a reboot while I had a Firefox window open with the History Panel (ctl+H) open on the left side of the window. Every since then, whenever I start Firefox, that history panel opens with it in the left side of the new window. How do I stop that?

You can check for problems with the localstore.rdf file.
*http://kb.mozillazine.org/Corrupt_localstore.rdf

Tweaking how accordion content panels opens

Similar Messages

Maybe you are looking for