Spry Accordian Panel not showing?? What am I missing?

http://www.neighbor.org/plan_giving2.htm
Take a look at the last accordian panel, it is not showing fully, but you can still click on it depending in what browser. How do I adjust it to show fully - The Planned Giving Council Tab.
Thanks,
TD

I'm not seeing the problem on any of my browsers, but I see you have built the page in Frames, which are an old technology, and a little hard to troubleshoot from here.
It could be that the height of your Accordion is falling deeper than the Browser Viewport, then being hidden by the bottom of the Frame. Try shortening up the accordion; there could be a little space taken out between the accordion tabs.
Beth

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 ==--.

Spry Accordian Panel not Working in IE6

I'm designing on a Mac in Dreamweaver CS3 and the Spry widget
Accordian is not expanding right when testing in IE6. Does anyone
know if there is a fix for this?
Missy

The samples work fine In IE6.
So if u can give us a piece of code & constructor or a
online url so we could investigate this behavior.

Spry Tabbed Panel not showing correctly on Remote Server

Hi Folks,
Here is something that is bugging me since a few days and I can't find the error or the culprit; I have the same page on another domain on the remote server and that is showing correctly. I even checked with Win Merge and the files are completely identical. It has no errors and is showing correctly on the local server. It also shows correctly in Dreamweaver CS4 or when viewed as a web page in Firefox etc.
Link: http://www.venture-wilderness.com/services.php
Please have a look and let me know what is happening.
Thank you,
zabberwan

Hi zabberwan,
Please have a look and let me know what is happening.
My IE 8 show's me this (in snippets):
and this:
and here (http://www.venture-wilderness.com/) I can see this:
It seems to me, that all is ok!?
Hans-G.

Spry tabbed panel not displaying correctly in IE , in other browsers it is fine, what is the fix

Spry tabbed panel not displaying correctly in IE , in other browsers it is fine, what is the fix

As an FYI: Adobe discontinued developing the Spry framework last year. And Spry was removed from DW CC. You can keep using Spry if you wish, but most of us have switched to other solutions that work better in IE10 and Touch Screens.
Nancy O.

Horizontal Spry Menus are not showing up in ANY browser HELP!

www.tvnewsjunkie.com
I am a novice web designer and I need help!
The above site listed is the site I am currently working on. As you can see the menu bar...is not a menu bar at all but a long list of links along the left side.
HOWEVER, when I click on LIVE VIEW in DreamWeaver everything looks fine.
There should be 7 total menu bars with 7 Dropdown menu options each (except on the bottom menu bar which there will only be 4 I believe)
What am I doing wrong??

Thank you so much for your help!This matter is certainly closed.
I just want to add, however, that somehow my Spry Assets folder was placed somewhere outside of the rest of my files! no wonder I was confused.
Thank you again!
Grant
Date: Fri, 17 Dec 2010 23:43:25 -0700
From: [email protected]
To: [email protected]
Subject: Horizontal Spry Menus are not showing up in ANY browser HELP!
You have forgotten to upload the support files - SpryMenuBar.js and SpryMenuBarHorizontal.css - to the server.
Gramps
>

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?

JColorChooser : "Swatches"-tab's recent-panel not showing recent color

Hello all,
in JColorChooser on "Swatches" tab we have one panel named "recent" and another
named "Preview".
Problem 1.
After i close my Color-chooser-dialog and reopen again , Preview-panel shows
the last selected ie recently selected color BUT recent-panel not showing any color.
Although on other Tab like "RGB" i am getting the selected color's RGB values .
Below is the code-snippet , Am I doing anything wrong ?
Problem 2.
This problem is not consistent. What happens that whatever RGB values i set,
next time when i open the chooser , Red-value gets educed by 1 !!!
/// code snippet
Color defaultForeground = conFont.getForeground(); /// this gives last selected color
Color newColor = JColorChooser.showDialog(GSCommonUtility.getAMStudioFrame(),CommonToolProperties.bundle_ToolProperties.getString("ComContributionsAdapter_ChooseForeground"),defaultForeground);
Can someone please through some light on these 2 problems?
thanx n regds,
Rajesh

I'm having the same problem with the default color chooser. Whenever it is closed it seems to lose all of the recent colors information. If you figure it out please let me know!!

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

Playbook Bridge Calendar Not Showing What's on the Phone Calendar

There are calendar items that display of my Curve 9330 but not on the Playbook bridge calendar . If I open the calendar item on my phone and from the menu select either "save" or "send," the item will appear on the Playbook bridge calendar - but it then disappears if I close the calendar and reopen it, or when the Playbook wakes up after it goes to sleep.
This issue pre-dates the OS upgrade and still exists. For many months, everything worked fine, but then this problem arose.
I have reinstalled- re-Paired, re-booted. I backed up the Playbook, reinstalled the OS, deleted and reinstalled the bridge on the phone, pulled the phone's battery -- whatever I try, I still have the same problem - the bridge calendar does not show what is on the phone's calendar.
Appointments added to the calendar on my desktop (we use Lotus Notes) show up on the phone but not in the bridge calendar.
I don't use the native calendar.

Hi JerryPasternak,
I would recommend contacting BlackBerry® PlayBook™ tablet support for further investigation into this issue. You can find the contact information here: http://bbry.lv/MgKtEp
Thanks.
-FS
Come follow your BlackBerry Technical Team on Twitter! @BlackBerryHelp
Be sure to click Kudos! for those who have helped you.
Click Solution? for posts that have solved your issue(s)!

Pages 4.9 will open Appleworks Documents, but I Pages 5 will not. What am I missing? or is the software just not as good as 4.9?

Pages 4.3 will open Appleworks Power PC Documents, but I Pages 5 will not. What am I missing? or is the software just not as good as 4.3?

"Some users have reported" is a mild way to put it. To answer your question "or is the software just not as good as 4.3?" more directly... it's only better in transparency between platforms. Everything else is pretty gutted. Dozens of features deleted, as listed occassionally in this long thread: https://discussions.apple.com/thread/5468056?tstart=0
Oh, one other improvement- it DOES run faster, but then of course it would since it's so much more lightweight.

Spry Accordian panel content height for more than 1 accordian in site

Hi,
I have added a couple of accordians to my website on different pages.
When I adjust the panel content height for 1 it automatically changes it for all of them on my site causing scroll bars to be visible - which I am trying to avoid.
I'm new to Spry coding and am not sure what to change.
Thank you for your help

This is a frequent question, in one form or other. It helps to understand that when you insert a Spry Widget, the associated javascript and CSS files are also added to your site files. And if you insert a second of the same type of Widget, DW checks and sees the original js and css files and does not add a second (or third). This is efficient, and also keeps your styling uniform across all instances of that Widget in your site.
If you want Widgets of the same type styled differently, you need to add to your CSS stylesheet style selectors that focus on those parts you want to be different.
Because Widgets are already ID'd, you can't add a new ID directly to the Widget <div> But you can wrap the Widget in a new div and put an ID on that.
Say you want two accordions on a page, one with panel content height of 100px and one with panel content height of 200px.
ID your accordions' wrapper divs: <div id="normalheight"> and <div id="doubleheight"> (use better descriptive IDs).
In the CSS stylesheet, do this:
.AccordionPanelContent {
    overflow: auto;
    margin: 0px;
    padding: 0px;
    height: auto;
#normalheight .AccordionPanelContent {
     height: 100px;
#doubleheight .AccordionPanelContent {
     height: 200px;
Be sure to add them directly after the given rule for .AccordionPanelContent; you are re-writing the height in that style selector for your two more specific accordions.
Beth

Accordian panel not resizing between records

I have a spry table on the left of my page and when you click
a row the detail of the row will appear in an accordian to the
right. The accordian has two tabs on it - the top one contains data
that always fills the same height between records, but the lower
one has data that changes in height between records.
When I select a row and click on the lower tab for the first
time the tab will expand to fit the data correctly. However, if I
move to other rows in the table and leave the lower tab open, the
accordian will not expand/contract to fit the new data - it stays
the same height as the first row clicked. In order to get it to
resize I have to click on the top tab of the accordian (therefore
closing the lower tab) then reclick on the lower tab and it resizes
correctly. I hope I have explained this correctly.
If you'd like to see what I mean go to
http://66.148.0.112/orderstatus/249000/test.asp
and try it out for yourself.
Simon

Hello Simon,
This problem appears because when you open a panel we are
animating the transition from the element current height to 0px and
the other way around by setting a gradual fixed height. Because of
this the last height value used to animate will remain set to the
element. When you change the content into the Panel, the Panel is
no longer able to resize automatically. Unfortunately there is no
solution to this issue other then to disable the animation by
passing "enableAnimation" option to false into the constructor.
Regards,
Cristian

How to apply different styles to multiple spry accordian panels?

Hi all,
I have a website that I'm building that has multiple spry accordian features on it.
I am trying to apply different styles to each accordian. A problem arises when I try to place an accordian within another accordian.
I have styled two different background images for two of the accordians for the styles (AccordionPanelTab, AccordionPanelTabHover and AccordionPanelOpen AccordionPanelTabHover) which work fine.
When I try and place an accordian within another accordian the background image for this accordian for the styles (AccordionPanelTab and AccordionPanelOpen AccordionPanelTabHover) has the different style applyed that I stated in the accordion.css file, however the style (AccordionPanelTabHover) has the same style as the accordian it is within even though in the accordion.css file I stated a different background image.
I hope all this makes sence below is my source and CSS Code.
I appriciate any help that can be given to help resolve this issue I am running in too.
Source Code
<div id="content">
<p><span class="first_header_word_packages">Welcome</span> <span class="header_word_packages">to our packages page</span></p>
<p class="content_txt">Here you can build the website package that matches your business needs as well as being able to work out the cost of your site without having to worry about scary hidden costs at a later date.</p>
<p class="content_txt"> We have two packages available for our customers;</p>
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab"></div>
    <div class="AccordionPanelContent">
   <p>Text Goes Here</p>
    <div id="Accordion2" class="Accordion" tabindex="0">
      <div class="AccordionPanel">
    <div class="AccordionPanelTab"></div>
    <div class="AccordionPanelContent">
    <p>Text Goes Here</p>
    </div>
</div>
</div>
    </div>
</div>
</div>
<div id="Accordion3" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab"></div>
    <div class="AccordionPanelContent">
         <p>Text Goes Here</p>
      <div id="Accordion4" class="Accordion" tabindex="0">
        <div class="AccordionPanel">
    <div class="AccordionPanelTab"></div>
    <div class="AccordionPanelContent">
     <p>Text Goes Here</p>
    </div>
</div>
</div>
    </div>
</div>
</div>
</div>
CSS
@charset "UTF-8";
/* SpryAccordion.css - version 0.5 - Spry Pre-Release 1.6.1 */
/* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
/* This is the selector for the main Accordion container. For our default style,
* we draw borders on the left, right, and bottom. The top border of the Accordion
* will be rendered by the first AccordionPanelTab which never moves.
* If you want to constrain the width of the Accordion widget, set a width on
* the Accordion container. By default, our accordion expands horizontally to fill
* up available space.
* The name of the class ("Accordion") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style the
* Accordion container.
.Accordion {
          border-left: solid 1px gray;
          border-right: solid 1px black;
          border-bottom: solid 1px gray;
          overflow: hidden;
/* This is the selector for the AccordionPanel container which houses the
* panel tab and a panel content area. It doesn't render visually, but we
* make sure that it has zero margin and padding.
* The name of the class ("AccordionPanel") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel container.
.AccordionPanel {
          margin: 0px;
          padding: 0px;
/* This is the selector for the AccordionPanelTab. This container houses
* the title for the panel. This is also the container that the user clicks
* on to open a specific panel.
* The name of the class ("AccordionPanelTab") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel tab container.
* NOTE:
* This rule uses -moz-user-select and -khtml-user-select properties to prevent the
* user from selecting the text in the AccordionPanelTab. These are proprietary browser
* properties that only work in Mozilla based browsers (like FireFox) and KHTML based
* browsers (like Safari), so they will not pass W3C validation. If you want your documents to
* validate, and don't care if the user can select the text within an AccordionPanelTab,
* you can safely remove those properties without affecting the functionality of the widget.
.AccordionPanelTab {
          background-color: #CCCCCC;
          border-top: solid 1px black;
          border-bottom: solid 1px gray;
          margin: 0px;
          padding: 2px;
          cursor: pointer;
          -moz-user-select: none;
          -khtml-user-select: none;
/* This is the selector for a Panel's Content area. It's important to note that
* you should never put any padding on the panel's content area if you plan to
* use the Accordions panel animations. Placing a non-zero padding on the content
* area can cause the accordion to abruptly grow in height while the panels animate.
* Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
* Content container.
* The name of the class ("AccordionPanelContent") used in this selector is not necessary
* to make the widget function. You can use any class name you want to style an
* accordion panel content container.
.AccordionPanelContent {
          overflow: auto;
          margin: 0px;
          padding: 0px;
/* This is an example of how to change the appearance of the panel tab that is
* currently open. The class "AccordionPanelOpen" is programatically added and removed
* from panels as the user clicks on the tabs within the Accordion.
.AccordionPanelOpen .AccordionPanelTab {
          background-color: #EEEEEE;
/* This is an example of how to change the appearance of the panel tab as the
* mouse hovers over it. The class "AccordionPanelTabHover" is programatically added
* and removed from panel tab containers as the mouse enters and exits the tab container.
.AccordionPanelTabHover {
          color: #555555;
.AccordionPanelOpen .AccordionPanelTabHover {
          color: #555555;
/* This is an example of how to change the appearance of all the panel tabs when the
* Accordion has focus. The "AccordionFocused" class is programatically added and removed
* whenever the Accordion gains or loses keyboard focus.
.AccordionFocused .AccordionPanelTab {
          background-color: #3399FF;
/* This is an example of how to change the appearance of the panel tab that is
* currently open when the Accordion has focus.
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
          background-color: #33CCFF;
/* Rules for Printing */
@media print {
.Accordion {
overflow: visible !important;
.AccordionPanelContent {
display: block !important;
overflow: visible !important;
height: auto !important;
#Accordion1 .AccordionPanelTab {
height:75px;
width:285px;
background:url(../images/package_spry_tab_bg1.png);}
#Accordion1 .AccordionPanelTabHover,
#Accordion1 .AccordionPanelOpen .AccordionPanelTabHover {
background:url(../images/package_spry_tab_bg1_RO.png);}
#Accordion2 .AccordionPanelTab {
height:44px;
width:469px;
background:url(../images/packages_spry1.png);}
#Accordion2 .AccordionPanelTabHover,
#Accordion2 .AccordionPanelOpen .AccordionPanelTabHover {
background:url(../images/packages_spry1_ro.png);}
#Accordion3 .AccordionPanelTab {
height:75px;
width:285px;
background:url(../images/package_spry_tab_bg2.png);}
#Accordion3 .AccordionPanelTabHover,
#Accordion3 .AccordionPanelOpen .AccordionPanelTabHover {
background:url(../images/package_spry_tab_bg2_RO.png);}
#Accordion4 .AccordionPanelTab {
height:44px;
width:469px;
background:url(../images/packages_spry2.png);}
#Accordion4 .AccordionPanelTabHover,
#Accordion4 .AccordionPanelOpen .AccordionPanelTabHover {
background:url(../images/packages_spry2_ro.png);}

Okay guys,
I figured it out, if anyone was having the same problem as me and looking on this thread for the answer, here it is.
Firstly if you're wanting to seperatly style two or more Spry Accordions that are not within each other e.g.
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">
   <p>Content Goes Here </p>
</div>
</div>
</div>
<div id="Accordion2" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">
   <p>Content Goes Here </p>
</div>
</div>
</div>
You don't have to do this, as long as you have seperate ID's for the divs (which dreamweaver automatically does anyway) you'll be fine.
However if for some reason you want to put one accordion inside another like I did e.g.
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">
   <p>Content Goes Here </p>
<div id="Accordion2" class="Accordion" tabindex="0">
<div class="AccordionPanel">
    <div class="AccordionPanelTab">Label 1</div>
    <div class="AccordionPanelContent">
   <p>Content Goes Here </p>
</div>
</div>
</div>
</div>
</div>
</div>
Too style Accordian 1 & 2 so their tabs both have different backgrounds and Hover background when the content panel is open and closed you have to style it in the CSS they following way;
CSS
#Accordion1 .AccordionPanelTab {
height:75px;
width:285px;
background:url(../images/package_spry_tab_bg.png);}
#Accordion1 .AccordionPanelTabHover,
#Accordion1 .AccordionPanelOpen .AccordionPanelTabHover {
height:75px;
width:285px;
background:url(../images/package_spry_tab_bg_RO.png);}
#Accordion2 .AccordionPanelTab {
height:44px;
width:469px;
background:url(../images/packages_spry.png);}
#Accordion2 .AccordionPanelClosed .AccordionPanelTabHover,
#Accordion2 .AccordionPanelOpen .AccordionPanelTabHover {
height:44px;
width:469px;
background:url(../images/packages_spry_ro.png);}
Normally when styling two seperate spry accordions you can just use the following code
#Accordion1 .AccordionPanelTab {
height:75px;
width:285px;
background:url(../images/package_spry_tab_bg.png);}
#Accordion1 .AccordionPanelTabHover,
#Accordion1 .AccordionPanelOpen .AccordionPanelTabHover {
height:75px;
width:285px;
background:url(../images/package_spry_tab_bg_RO.png);}
The only difference with styling a Spry accordion within another to ensure they have different hover backgrounds when the content panel is open and closed is ".AccordionPanelClosed".
Hope this helped anyone who was having the same issue I was.

Search hover panel not showing up in Internet Explorer with custom master page

The hover panel is not showing up in internet explorer. I am using a custom master page and it works no problem in the other browsers. When I fire up the debugger there is an error message when i hover over a search result item:
I tried debugging the JavaScript but i am not sure what is going on with it.
Am I missing reference or something done like that? It has to be something simple because I have been scratching my head for a while on this.
Any ideas?
Brad Wight

Have you tried rendering the site in IE Compatability Mode? Compatability Mode solves a lot of problems in this area because older versions of IE had a unique interpretation of HTML code.
Start here:
http://windows.microsoft.com/en-us/internet-explorer/use-compatibility-view#ie=ie-8
I trust that answers your question...
Thanks
C
|
RSS |
http://crayveon.com/blog |
SharePoint Scripts | Twitter |
Google+ | LinkedIn |
Facebook | Quix Utilities for SharePoint

Spry Accordian Panel not showing?? What am I missing?

Similar Messages

Maybe you are looking for