Accordion Widget Starting Closed
I am trying to use the accordion widget on the following
page:
http://jalc.org/jazzED/s_eac.html
I am having a problem getting the page to load with the
widget panels closed except the first one. I have added the
following code to just below the DIV close tag and it didn't appear
to help:
var acc1 = new Spry.Widget.Accordion("Accordion1", {
useFixedPanelHeights: false });
</script>
<script type="text/javascript">
var acc1 = new Spry.Widget.Accordion("Accordion1", {
defaultPanel: 0 });
</script>
Any ideas would be GREATLY appreciated.
Thanks,
Andy
andrewmcgibbon wrote:
> I have added the following code to just below the DIV
> close tag and it didn't appear to help:
>
> var acc1 = new Spry.Widget.Accordion("Accordion1", {
useFixedPanelHeights:
> false });
> </script>
> <script type="text/javascript">
> var acc1 = new Spry.Widget.Accordion("Accordion1", {
defaultPanel: 0 });
> </script>
Your second JavaScript statement overwrites the first one.
The options
should be passed to the Accordion constructor in the same
statement like
this:
<script type="text/javascript">
var acc1 = new Spry.Widget.Accordion("Accordion1", {
defaultPanel: 0,
useFixedPanelHeights: false });
</script>
David Powers, Adobe Community Expert
Author, "The Essential Guide to Dreamweaver CS3" (friends of
ED)
Author, "PHP Solutions" (friends of ED)
http://foundationphp.com/
Similar Messages
-
Spry Accordion Widget Init Closed, Without Snap?
(This is a topic discussed in
another
thread, but I didn't want to hijack the thread with my own
question, so I started a new one...)
I want to start my Accordion widget in a closed state. I
figured out the trick of setting the default panel to '-1' and
turning fixed heights by altering the code in the footer of the
page to:
var Accordion1 = new Spry.Widget.Accordion("Accordion1",
{defaultPanel: -1,
useFixedPanelHeights: false});
When you do this, however, the page loads with the first
accordion panel open and visible for a split second until the page
is loaded, at which point the widget snaps the panel shut. This is
very ugly and undesirable, especially given that this accordion is
on a page element common to every page on the site.
I've tried setting an initial class that is hidden, however
the Spry Accordion widget is written in such a way that it
preserves whatever classes you have rather than replacing them.
Does anyone know a way to load the page with the accordion
panels shut without this initial flash of the first panel snapping
shut?
Thanks,
SteveHey Al,
Nice plug for your own application! Here is another one,
since I am one of your happy customers.
I used the Spry widgets in the new DW CS3 and spent a couple
of days trying to tweak things to get them to work the way I
wanted. After getting input from my brother (his site that I am
working on) he really wanted some more style than what I was coming
up with using the basic DW widget. I smacked my dollar on the
barrel head and tried out PVII Accordion instead.
I can't tell you how fast and easy it was to insert and
customize this plugin. Not to mention they had some nice little
themed styles, one of which (the cobalt blue) was a real close
match to the color scheme I originally was using! (PS - any chance
of getting more theme styles down the road for this plugin or
matching styles for the other ones???)
Changing the open or closed state of the panels - it was so
simple!!! I simply went into the modify option and chose the number
that corresponded to my different panels in the menu list. My buddy
used an expression about DW CS3 that fits nicely with using tools
like PVII Accordion Magic. You can use a screwdriver with some
precision and a lot of hand strength to build what you want but it
will take you alot of time...or you can plugin a power drill and be
done with it!
To see it in action on my current work in progress go to:
http://www.dvdflashbacks.com/williamsburghealth/index.php
As for sstringer's original question - how to do this in DW's
Spry widget...
I think you are onto the right track with the -1 setting. If
I am not mistaken though, Spry uses 0 for the first panel, so I
think you would need to use an option like {defaultTab: 1} to open
the 2nd panel and so on.
PS - Just so everyone knows - I am not a sales person for
PVII - just a very satisfied customer! -
Open an accordion widget in the closed state?
I have searched the forums but have yet to find a resolution
for this issue. I am using an accordion widget and would like for
all of my panels to appear closed when the page initially loads.
Only once the user has clicked the tab do I want the panels to
open. Any suggestions that do not require me to buy a separate plug
in? Thanks.This is directly from the Adobe documentation:
http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html#AllPanelsCl osed
However, one thing to keep in mind is that this is assuming
that you are using the 1.6.1 update (as that is what the references
refer to). If you have never updated your Spry this would be a good
opportunity to do so. The below is the to the official Spry
homepage. There you will find the update package which includes
some samples and an Extension. Install the extension and restart
DW. Then under the Sites menu you will see a new option to update
Spry. Run that script and your Spry will be updated. Also on that
homepage is a link to the official Spry forums:
http://labs.adobe.com/technologies/spry/home.html -
Mobile Site - Need Accordion Widget to start at top of page upon item selection
I have set up a mobile site. I use the accordion widget for topics. If I select any topic without diving into it and scrolling, it works fine. If I scroll through a topic after selection, the next topic starts in the middle or the bottom. Kind of annoying for the user. Any ideas?
ThanksHi Kevin,
Could you please share the site URL or any screen shot for reference?
Regards,
Neha -
Reliability of Spry Accordion Widget
I posed a question in this forum last week and was unable to
get a helpful answer to my problem. I am trying to use the Spry
Accordion Widget on a site:
http://www.jalc.org/JazzED/s_eac_B.html
I have researched here to learn how to get the panels to
start closed with one panel to be open by default. This works
exactly like expected in Firefox and Chrome but NOT in IE.
Am I wrong in my assumptions that:
1) Folks from Adobe monitor this board and chime in with
answers/solutions or acknowledgement of bugs; and
2) Spry widgets are a reliable cross-platform technology that
have had the bugs worked out
or, is the real case
1) Adobe folks only look into these forums on an occassional
basis, if at all; and
2) Spry widgets should be left alone if you are expecting
them to perform properly relative to cross-platform capabilities.
I appreciate anyone's feedback or suggestions on these
questions.
Thanks,
AndyI just re-read my post above and am mortified at the tone of
my message. It was in no way intended to come off as pissy, which I
fear it might have. Anyone with any thoughts on my issue, I would
appreciate your feedback.
Regards,
Andy -
SPRY accordion widget IE8 ONLY issue
hello everybody,
i noticed a strange "jumpy" behavior while using the spry accordion widget -- this affects IE8 only (currently using 8.0.6001.18882 on vista), other browsers (including IE7 and IE8 forced into IE7 mode) work as expected. this issue seems to be related to the margin property of the accordion container...
not shure whether this behavior is related to IE rendering or the spry javascript code itself... anyway i made NO changes to the spry script (my version is 0.15, 1.6.1, which i believe to be most recent one).
the xhtml (strict) and css are perfectly valid (there might be some MINOR css hacks which are not related to the accordion itself). i do NOT use ANY padding on the inner container of the accordion (which would definetely make the spry js count the tween in odd way). the accordions (especially the main menu on the left) are little more complex, but they were built according to the spry widget document, found on the adobe spry website.
so, here it is -- check the accordion on the left side (the bug seems to happen almost always while opening/closing the last BLUE "section" of the accordion, please play with the accordion for a while to reproduce it -- while the accordion closes, it "loses" it's bottom margin (i guess), what's even more wierd, everything gets back to place after you move a mouse):
http://www.prazskematky.cz/home.php
PLEASE NOTICE: since the website is still under development and i'm using a IE meta tag to force it into IE7 rendering, to reproduce this behavior please be shure to switch IE engine to IE8 standards mode
well, we all now how IE handles css... so it's propably an IE bug -- anyway if you have encountered a similar issue of even better found a fix, please let know. (i don't consider a fix switching to another js library, i would like to use the spry, because of it's DW integration)
many thanks,
p.s.ross m. greenberg wrote:
> Now however the entire .gif is not appearing in the
accordion panel is expanded. I insert the graphic using a standard
"menu insert/graphic/browse and select"
>
> the graphic file is not showing up properly on such an
insert...
Are you referring to what it looks like in Design view? If
so, that's
correct. Accordion panels have a fixed height. From memory, I
think it's
200px. However, if you test the page in a browser, you should
see a
scrollbar automatically generated on panels that have content
that
exceeds the height of the panel.
If you want flexible-height panels in the accordion, you need
to adjust
both the CSS and the script that initializes the accordion. I
have
covered all the details in my "Essential Guide to Dreamweaver
CS3" (and
the forthcoming CS4 edition). You can probably find online
tutorials as
well. Try a Google search for Spry flexible height accordion.
The accordion widget has been around since CS3, and it hasn't
changed in
CS4, so a Google search should bring up a lot of information.
David Powers, Adobe Community Expert
Author, "The Essential Guide to Dreamweaver CS3" (friends of
ED)
Author, "PHP Solutions" (friends of ED)
http://foundationphp.com/ -
Accordion widget - Toggling the Panel?
I know this is probably simple but...
1) How do I make the Accordion widget Panels "Open &
Close" by clicking on the same Panel twice?
What I mean is that my Accordion Panel works fine &
"Opens" when clicked once, but will not "Close" when clicked again?
(I want to be able to quickly open & close selected
panels at ease)
2) How do I apply a CSS to the Accordion without affecting
the original CSS style?
Earlier when went in to the Accodion.css file & started
making changes, it messed up the Accordion itself & I could not
get back to it's original look?
Thanks for the help,
jligCristian, Thanks for the update.
In regards to using Accordions & Panels, it would really
help to see a video tutorial on the workshop site that shows how to
use ADDT Forms & Lists with SPRY widgets like the Collapsible
Panel. Many of us are a bit unclear on how to target links between
the two and general integration of the two.
For example:
- What is the sequence?
1. Create a Blank DW page
2. Add the SPRY Panel
3. then ADDT records/Forms?
Or
1. Create a Blank DW page
2. Add the ADDT records/Forms
3. Add the SPRY panels, etc?
Also, From an RIA point of view it seems like the purpose of
AJAX is to get rid of all the "screen/page changes". Can you help
us understand for example, the process of converting regular
dynamic forms (via ADDT or otherwise) that have many pages, to AJAX
enabled links that point to Panels, Tabs & Accordions instead?
Thanks for all your expertise,
jlig -
Have a Dreamweaver question about the Spry Accordion widget.
I am designing a website for a real estate company. I will have different pages set up as a state page with a sub-level of cities within the page. I am using the accordion widget for the cities. As you know, you click on the panel tab and the next panel drops up or down closing/opening the previous panel.
What I would like to do is add an action anchor (view all properties) outside the spry widget to open all the panels at once if a client wanted to see the entire list. However, I would still want the functionality of the panels to be collapsible. Is this possible? Is there a bit of code restructuring I would have to do to the JavaScript?Try
<!DOCTYPE html>
<html>
<head>
<title>Untitled Document</title>
<link href="SpryAssets/SpryAccordion.css" rel="stylesheet">
<style>
.openit .AccordionPanelContent {
display: block !important;
overflow: visible !important;
height: auto !important;
</style>
</head>
<body>
<a href="#" class="openAll">open all</a> - <a href="#" class="closeAll">close all</a>
<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 src="SpryAssets/SpryAccordion.js"></script>
<script src="SpryAssets/SpryDomUtils.js"></script>
<script>
function MyOpenAllEventHandler() {
Spry.$$("#Accordion1").addClassName("openit");
function MyCloseAllEventHandler() {
Spry.$$("#Accordion1").removeClassName("openit");
Spry.$$(".openAll").addEventListener("click" , MyOpenAllEventHandler, false);
Spry.$$(".closeAll").addEventListener("click" , MyCloseAllEventHandler, false);
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
</script>
</body>
</html>
The "!important" on these rules is necessary because the Accordion widget places inline styles on the actual AccordionPanelContent elements when opening and closing them. Since inline styles have a higher CSS specificity then CSS class rules, "!important" is necessary to "trump" the inline styles.
Gramps -
Using CP 7, I am trying the accordion widget for the first time, and I have it working rather nicely. Then I added audio to each of the options, to accompany the text that is revealed when the option is chosen, so that as each option is selected, and its text appears, the specific audio would play. That makes sense and that is how I would expect it to work. However, as soon as the screen loads one audio plays, and none of the audio clips play when their option is chosen.
Is this really the way it works? I would expect no audio until the user clicks one of the options, and then that audio would play. The way it is working for me makes no sense. Why have an audio icon for each content area (under each accordion option) if they don't play when the user opens that option?
As I created content for each of the options, I added an audio clip, using the audio icon specific to each accordion option. But it appears that only one audio is being used for the entire accordion.
I read through the string about problems with audio and the accordion, but that issue was different from this.
The way this is working now is not acceptable, and I will need to throw away everything I have done so far and start over if I can't make this work.I just tried it in Windows with exactly the same behavior.
Can someone confirm how this is supposed to work? Logically, when a user selects one of the accordion options, and the option expands to show the text within it, then the associated audio should play. In the image below, you see the audio icon associated with the content for one option. However, in the documentation I found it is very vague about what the audio is assicated with. If the audio is just associated with the entire object, then the interface below is misleading at best. -
Why is my text in one of my text blocks in my accordion widget going vertical?
I need a break! Now, in my accordion widget one of the text blocks are vertical. Or what I should say is the text looks correct but the T tool is showing that it is vertical and the menu at the top of my screen shows it's vertical. I was trying to get rid of extra space after my wording and noticed that the vertical tool shows. I have tried everything to get it to go back to normal text. As soon as I click back into the text frame it reverts back to vertical. I have wasted so much time with problems with widgets today I'm ready to give up. Anyone know the answer?
I was so frustrated I decided to try to delete the text box for that accordion section and start over. It seemed to be ok now. Now I'm having problems with anchors. It's always something when I am working with deadlines. Could you look at my site? I still have a lot to do but the business catalyst site is opitsourcebook01.businesscatalyst.com. If you go to the accordion widget on the left under "Associations and Organizations and click "Click this link" at the beginning of the paragraph it will take you to the page. Again, very frustrated but in the menu bar with "Physicians - Pharmacists - Nurses - General" I removed all but one anchor because they would not line up. If you click on "General" it doesn't go to where the anchor is farther down the page just right above "General Listings". I have spent all day reviewing tutorials and I can't seem to see what I have done wrong. Going for a run to rethink. Thanks for your help.
-
Dreamweaver Accordion Widget default panel
I'm relatively new to javascript.
I'm using the Spry Accordion widget that comes with dreamweaver.
I want to use it as a menu, so I have tables inside it with links.
I have all the tabs closed for the index page
I am looking for the clicked tab to remain open.
How does one go about doing this?
Thanks in advance for your help.Check out these samples
http://go.spry-it.com/cookie -
Spry Accordion widget Question
Have a Dreamweaver question about the Spry Accordion widget.
I am designing a website for a real estate company. I will have different pages set up as a state page with a sub-level of cities within the page. I am using the accordion widget for the cities. As you know, you click on the panel tab and the next panel drops up or down closing/opening the previous panel.
What I would like to do is add an action anchor (view all properties) outside the spry widget to open all the panels at once if a client wanted to see the entire list. However, I would still want the functionality of the panels to be collapsible. Is this possible? Is there a bit of code I would have to add to the JavaScript?
Is there a genius out there that can hook me up with some knowledge?I actually did away with the accordian widget and went a different route. It was too glitchy. Thanks for your input though. I will take note of the suggestions you provided and maybe try it out one day.
-
Dropdown Menu with Accordion widget
Hallo,
Ich habe folgendes Problem. Ich habe mit dem Accordion Widget ein Dropdown Menü erstellt. Ich möchte gerne, dass sich dieses Menü nicht wieder schließt wenn ich z.B auf Start klicke. Der Start Menüreiter hat 3 unter themen und diese sollen immer sichtbar bleiben.Hi
Can you please share the site url where you have placed the widget ?
You can also pm me the site url.
Thanks,
Sanjit -
Can I set my accordion widget to "expand all" tabs?
I am using an accordion widget to display content on my web page. Is there a way to allow the user to "expand all" of the accordion tabs at once?
One way you can achieve this is by creating single panel accordion files, just copy the file down for each section, make sure to set the accordion setting to "Can close all".
See attached screen shot when published.... the panels are all closed, but you can open all to view. -
Close all in accordion widget?
Is there a way / I wish you would add a Close ALL option to the accordion widget. Because the widget can push content down the page, if the accordion is left open and a user clicks on a nav bar that has an anchor placed when the accordion is closed, the anchor now is not in the correct position.
Kind of a "lose focus, then close all" action.Hi
Accordion has the inbuilt feature to Close all , so when user clicks on the open tabs they can close all.
For this you would need to enable close all in Accordion control interface.
If you are referring to add a button on page itself where if user clicks then all open tabs should close , then probably you would need some customization.
Because open tab in Accordion will only close on click on the tab itself.
Thanks,
Sanjit
Maybe you are looking for
-
I can't seem to figure out why I can't delete and redownload my apps. I'm very confused. I've tried turning my phone on and off, and doing a soft reset.
-
Hi I lost my stuff from iTunes after I synced with my iTouch
Hi, I don't know if anyone else may have experienced this problem but I lost all my content from iTunes after I synced with my iTouch, but I had a message saying that my iTouch was authorized from a different user but I authorized it on my account bu
-
Just installed it,from Creative Cloud CS6. Some pages in PDFs won't show the existing black color that I can still see in Acrobat X. (All that white around the title "ABOVE THE FOLD" shouold be black.) Anybody got a lead on what's going on here? (See
-
Would be an Macbook Pro with Retina screen with 128gb ssd enough?
Heya there! I'm gonna begin with college in 2 months in The Netherlands. I am gonna do Programming such as: Php, html, jquery, mysql and much more. (It must be to have microsoft office on my laptop, and I guess also adobe PS, Illustrator, dreamweaver
-
Does iPhone Config Utility Have an admin password to override?
Hey guys, Very new to the iPhone Config Utility. I'm wondering if it's possible to limit a phone (or iPad actually) using the iPhone Config Utility, BUT have an admin password that overrides those limitations? So: 1) install a limited profile on an i