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!

Similar Messages

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

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

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

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

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.

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.

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.

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

"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

Try to keep accordion panel open when selected

Hello,
Could someone help me find the code to "keep the selected panel open" instead of having them closed on each pages.
There is 2 spry collapsed panels. Within the first one there is 1 Spry Accordion with 5 panels which need to stay open when selected.
You will find the site here : www.otaa.fr (but you may use Safari)
Here the codes:
<Head>
<script type="text/javascript" src="SpryAssets/SpryURLUtils.js"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script type="text/javascript"> var params = Spry.Utils.getLocationParamsAsObject(); </script>
<style type="text/css">
</head>
<body>
<div id="CollapsiblePanel2" class="CollapsiblePanel">
          <div class="CollapsiblePanelTab" tabindex="0">PROJETS</a></div>
          <div class="CollapsiblePanelContent">
                <td><div id="Accordion1" class="Accordion">
                  <div class="AccordionPanel">
                    <div class="AccordionPanelTab">Logements</a></div>
                    <div class="AccordionPanelContent">
                        <tr>
                          <td height="21" align="left"><a href="html/Vignoles.html">Rue des Vignoles</a></td>
                      </tr>
                    </table>
            <div class="AccordionPanel">
                    <div class="AccordionPanelTab">Maisons</a></div>
                    <div class="AccordionPanelContent">
                        <tr>
                          <td align="left"><a href="html/Serrieres.html">Maison Serrières</a></td>
                      </tr>
                    </table>
               <div class="AccordionPanel">
                    <div class="AccordionPanelTab">Bureaux et Sièges Sociaux </a></div>
                    <div class="AccordionPanelContent">
                        <tr>
                          <td align="left"><a href="html/Tchad.html">Ambassade du Tchad</a></td>
                      </tr>
                    </table>
               <div class="AccordionPanel">
                    <div class="AccordionPanelTab">Aménagements Intérieurs</a></div>
                    <div class="AccordionPanelContent">
                        <tr>
                          <td align="left"><a href="html/Martin.html">Appartement Martin</a></td>
                      </tr>
                    </table>
               <div class="AccordionPanel">
                    <div class="AccordionPanelTab">Equipements</a></div>
                    <div class="AccordionPanelContent">
                        <tr>
                          <td align="left"><a href="html/Aquatonic.html">Centre Aquatique</a></td>
                      </tr>
                    </table>
< /body>
<script type="text/javascript">
var CollapsiblePanel2 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel2", {contentIsOpen:false});
var CollapsiblePanel3 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel3");
var accordion1 = new Spry.Widget.Accordion("Accordion1", { useFixedPanelHeights: false, defaultPanel:(params.panel?params.panel:-1)});
          </script>
Thanks for you help.

Forget about the tutorial by David Powers. There is an easier way to achieve what you want.
If I understand right, you want the about panel to be open when on the about page and the homw panel when you are on the home page. Simply set the default panel for each page as follows
For the Home page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Home Page</title>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet">
<script src="SpryAssets/SpryAccordion.js"></script>
</head>
<body>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Home</div>
    <div class="AccordionPanelContent"><a href="index.html">Home</a></div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">About</div>
    <div class="AccordionPanelContent"><a href="about.html">About Us</a></div>
</div>
</div>
<script>
var Accordion1 = new Spry.Widget.Accordion("Accordion1", {defaultPanel: 0});
</script>
</body>
</html>
and for the About page
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>About Us</title>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet">
<script src="SpryAssets/SpryAccordion.js"></script>
</head>
<body>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Home</div>
    <div class="AccordionPanelContent"><a href="index.html">Home</a></div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab">About</div>
    <div class="AccordionPanelContent"><a href="about.html">About Us</a></div>
</div>
</div>
<script>
var Accordion1 = new Spry.Widget.Accordion("Accordion1", {defaultPanel: 1});
</script>
</body>
</html>
Repeat this process for each of your pages.
Gramps

Accordion tabs flash open on page load

My accordion is set to load with no panels open. But when the
page loads all panels remain open until everything from the page is
downloaded, then they close as they're supposed to. Is there a way
to keep them closed the whole time until a tab is clicked?
Thanks!

This is great! Thank you so much! The widget is working
beautifully now with cookies enabled. I don't really have any idea
how it works, but it does!
The only problem now, that I didn't notice before I made
these last changes, adding the cookies effect, updating to v1.6.1,
and adding onDOMReady, and onDOMUtils.js, is that when I click a
link to a new page within the site that the browser hasn't loaded
yet (if I clear the cache first, then browse around), then every
new page flashes my default background color across the entire
screen before letting me see the new content. Once the pages have
been loaded and are in the cache, then I can navigate through them
nicely with only the main content area changing, rather than the
whole page. Is it possible to make it so that when new links are
clicked, the side and top navigation areas, which are the same on
all pages, stay visible while the new content is loaded?
Thanks again for your help!

Bridge CC - Content Panel looks different than Preview

Problem - Images in the Content panel look dull and desaturated. The view of the same image in the Preview Panel, as well as Photoshop CC, looks fine (ie, like I expect from working with these images in CS6). This applies to NEF, JPEG and PSD files. In the attached screenshot, note the distinct lack of red in the skin tones in the Content Panel compared to Preview. Blues look a little dull as well. This is a PSD file. This image is tagged sRGB, verified in the Metadata panel as well as in Photoshop CC.
I have read similar threads here (where all of Bridge was dull and desaturated), but I don't see anything that mentions the two panels in Bridge displaying images differently.
Background - 10 years as a pro photographer, and I know what I'm doing around a Mac and color management. I finally "upgraded" from CS6 to CC when I got my new Mac.
System -
Retina iMac w/Yosemite. Second monitor - HP LP2475w (Bridge sits on the HP monitor)
Both monitors have profiles generated with an i1 Display and the i1 Profiler application.
Both monitors are using their correct profiles
Steps Already taken (condensed)
1. Purge cache (multiple times throughout the process).
2. Check color cache and cache permissions.
3. Reinstall Bridge at the behest of Adobe support, even though this was a new install.
4. Check that "Always high quality" thumbnails is checked in Bridge (this seems to have no effect either way).
5. Check color settings - NA GP2 in Bridge. Interestingly, the same behavior is exhibited no matter what I select here.
6. Drag Bridge to the iMac display - everything now looks good. Drag back - now BOTH Content and Preview are desaturated. Will stay like this until Bridge is restarted.
7. Recalibrate the HP (Bridge) monitor. No change in behavior.
8. Verify no sidecar xmp for this image, to rule out ACR in the problem.
9. Open Output module to verify that the content panel looks the same way there (it does).
10. Investigate ~user/Library/Caches/Adobe/Bridge CC/Cache/ folders. Wow, the preview for this particular image in /1024/xxxx LOOKS CORRECT (like it does in the Preview panel). So Bridge IS generating high quality previews correctly.
Thoughts -
1. This seems unlikely to be a monitor profile issue. Bridge itself is displaying the same PSD two different ways. A bad profile would make everything on that monitor look wrong, wouldn't it?
2. Some of my images sit on an external drive, but the screenshot here is from the internal mac drive, to try and rule that out.
3. It's not some strange issue with the HP monitor not displaying color evenly across it's surface - if it were, than the screenshot would not show the difference between the panels. I also moved the Bridge window around the display to further verify that color is the same across the whole panel.
4. Maybe Bridge ignores the profile for the content panel - but in the case of no profile, it assumes sRGB (or does it?) which is exactly what this image is. I have tried this with Adobe RGB images and the same behavior is exhibited.
5. Previews are being generated correctly, but do not seem to be what is read off disc to display in the Content Panel.
Any thoughts would be appreciated. My gut feeling is that for some reason, Bridge is not showing me the saved high quality preview in the Content panel. But why?

Is your file tagged? I.e. does it have the proper color profile embedded?
Is your monitor accurately calibrated and profiled?
What are your preferences in Bridge re previews and profiles?

Accordion content panels open on IE

Similar Messages

Maybe you are looking for