Spry Accordion open on page load

How do you stop the Spry Accordion from being open while the page is loading - as soon as the page loads the Accordion closes to the way it has been designed - it is just annoying!

Starting with All Panels Closed
This feature is only supported when using variable height panels, so you must pass a false into the Accordion's constructor for the "useFixedPanelHeights" constructor option, and a -1 for the "defaultPanel" option.
Gramps

Similar Messages

Automatically Animating Spry Accordion Widget on Page Load

I've been searching and searching and still can't find a clue
as how to make the Spry Accordion Widget automatically open the
next panel. I want the panels to expand automatically and loop back
at the last panel.
Do I need to create another function for this or is there
already a function created in the .js file?
Any help is appreciated...even if you can point me in the
right direction.
Thanks!

DeviseInnovations wrote:
> I've been searching and searching and still can't find a
clue as how to make
> the Spry Accordion Widget automatically open the next
panel. I want the panels
> to expand automatically and loop back at the last panel.
>
> Do I need to create another function for this or is
there already a function
> created in the .js file?
>
> Any help is appreciated...even if you can point me in
the right direction.
Sounds more like you'd want sliding panels:
http://labs.adobe.com/technologies/spry/samples/slidingpanels/SlidingPanelsSample.html
I've seen an automatic version created that might do what you
want:
http://www.3rd-eden.com/Spry-it.com/examples/slidingpanelsautomatic/
But if you really want an Accordion, then you might be able
to adapt the code in the auto sliding panels above.
FYI: There's a Spry forum that would be better to post Spry
related question in:
http://www.adobe.com/cfusion/webforums/forum/categories.cfm?forumid=72&catid=602
Danilo Celic
|
http://blog.extensioneering.com/
| WebAssist Extensioneer
| Adobe Community Expert

Spry Accordion menu opens on page load then closes

Hello,
I'm having issues with a SPRY Accordion menu loading with all of the tabs open, then closing once the page finishes loading.
Example page is here:
http://thesparkmachine.com/mca2009/academics
(site is still being worked on, so forgive any oddities)
Is this something that is occurring because of the large amount of material loading on the page at once? The site is Joomla!-based, and there are close to a dozen modules on the page, plus an random background image script.
Any advice would be helpful.
Thanks!

I see you have also fixed your menu sections linking..
But i still wanted to give you some advice on why it opens and closes.
If you check out the source of your page, you will see that the constructor for your accordion is at the bottom of the page. When the browser loads the page, it parses from top to bottom, so it has parsed the accordion markup. But not yet the constructor for the accordion, so once it finally done with parsing the rest of the markup it finds the constructor and executes it.
What would have helpt, if you just moved the <script> with the constructor to directly under the accordion. So when the accordion markup has been parsed the brower directly executes the scripts.

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!

How to make no panels on Spry accordion open by default?

I have a Spry Accordion with several panels. I want the default behavior for none of the panels to be opened until one is clicked. Currently the default behavior is for the first panel to be automatically expanded when the page is first visited. How do I correct this?

It's here:
http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSample.html
Under the sub heading "starting with all panels closed".
<script type="text/javascript">
var acc1 = new Spry.Widget.Accordion("Acc1", { useFixedPanelHeights: false, defaultPanel: -1 });
</script>
Martin

Random tab open on page load?

If someone could figure this one out... oooo what a gem that
would be and good bye Flash.
I have a tabbed menu scripted and of course on a page load
the same tab and its content load everytime. Is it possible to have
a random tab open when the page loads in a browser?
Thank you in advance for your time!

Include SpryDOMUtils.js in your header (required for onload
listener)
Spry.Utils.addLoadListener(function(){
var
tabs =
5 //(amount of tabs u have)
TabbedPanels1.showPanel(Math.round(
tabs*Math.random())); //TabbedPanels1 beein the name of the
tabwidget constructor change to your own name.
);

Spry accordion open on mouseover with extra content if too fast

So I already did this and got the spry to open with a hover,
Go to line 213 (or thereabouts) to find
Spry.Widget.Accordion.prototype.onPanelTabClick = function(e, panel)
and change that to
Spry.Widget.Accordion.prototype.onPanelTabMouseOver = function(e, panel)
but if you move too fast up and down the menu it opens the other contents and leaves it there see webpage: move your mouse fast up and down the menu to see. How do I make sure it is completely closed. I noticed this does happen to on a Click if you switch too fast between tabs.
http://www.abbottsportslincoln.com/index.php
Thanks for any help!
Jacey

so is there really no way to fix it? My client already has that, and it's not practical, we want to be able to see all the options for the sub-menus open when we are in one of the tabs.
Let me know if there is really no way around it. I'm actually pretty sure that the background for the next tab is stuck behind the content. Take a look at this site and see how they have a delay in there accordion.
http://www.targetcenter.com/
Thanks, Jacey

Dialog Box Open before Page load using af:CommandNavigationItem

Hi,
I have a CommandNavigationItem menu, the requirement is simple.
Use Case:
1. On click of one of the menu item, i need to display a message or prompt user to select "OK" or "Cancel"
2. If user clicks "OK" will navigate to the require page. and "Cancel" will stay on the page.
I have used couple of things like, creating a af:popup with a af:dialog and calling this popup from managed bean on page load, it works fine get a popup with a "OK" "Cancel" text. But the problem is it opens the popup fine but the parent page get loaded also.
Please help me to find any solution? Will appreciate your time!!
Thanks
Neeraj Halder

thanks vinod,
I have tried but struggling with binding of the popup.
1. let say when i login to my application my first page is "homeView.jspx", so on homeView.jspx i have written the code for popup.
2. And in the menu i have "home" and "details", so when i click the "details" menu this popup should open, and on clicking ok it should navigate me to the Details page, as you suggested ActionListner for that.
Please see below what i have done till yet.
ActionListener Code:
/*code in jsp
actionListener="#{backingBeanScope.testViewBean.checkOnClickofDetails}"
/* code in java with a backing bean scope
private RichPopup validationMessageDialog;// popup id
public void checkOnClickofDetails(ActionEvent actionEvent) {
RichPopup.PopupHints popupHints = new RichPopup.PopupHints();
getValidationMessageDialog().show(popupHints); //
popup in homeView.jspx
<af:popup id="validationMessageDialog"
binding="#{backingBeanScope.testViewBean.validationMessageDialog}">
<af:dialog id="d3" cancelTextAndAccessKey="cancel"
dialogListener="#{backingBeanScope.testViewBean.loadDetails}"
title="Prompt">
<af:outputText value="#{msg.AGENT_NOT_FOUND}" id="ot3"/>
</af:dialog>
My doubt is i am doing something wrong with the scope of the managed bean. in the above code i have used backing bean scope,
let say i have a java file example ABC.java, which is a backing bean scope given in adfc-config.xml. can i use this one java file for two of three different jspx as a backing bean? Hope i am clear here? :)
2) when we create a jspx and its backing bean at a time, is there any internal mapping happen apart from adfc-config.xml that one jspx will have only one java file as a backing bean?
Sorry if i am making this more complicated, above question comes because, when i move the same popup code in "Details.jspx" page and at the time of creation of this page i have created backing bean also so when i calling this function on page load "checkOnClickofDetails" which is in the Details.java (backing bean) the popup comes fine. but unfortunately cannot use this because parent page get laoded with this popup also.
let me know if i am doing something wrong?
Thanks,
Neeraj Halder

How to make spry accordion open on mouse hover ?

hi everybody i have just a simple question about spry accordion in cs4 it try to open it using mouse hover not onclick
can anyone help me plz ?

This is one way
<!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" onMouseOver="Accordion1.openPanel(0); return false;">Label 1</div>
    <div class="AccordionPanelContent">Content 1</div>
</div>
<div class="AccordionPanel">
    <div class="AccordionPanelTab" onMouseOver="Accordion1.openPanel(1); return false;">Label 2</div>
    <div class="AccordionPanelContent">Content 2</div>
</div>
</div>
<script type="text/javascript">
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
</script>
</body>
</html>
Another way is to have a SpryEventListener. Look that up for further info.
Ben

How do I have spry effect trigger on page load?

I do not want to use the on click behavior to trigger spry
effects, is it possible to have the effects triggered by the on
page load command?
Please help and thanks very much.
Patrick

quote:
Originally posted by:
dynchuck
I attach it to an image:
<img src="images/bookcover.png" width="240" height="375"
onload="MM_effectAppearFade('buttonCol', 6000, 0, 100, false)"
/>
Actually the effect is applied on the entire page and is
currently triggered by the onclick button command.
So I was wondering if I could leave it that way but have it
triggered by the onload command.
Here is the site, the effect is only on the first tab for
now.
http://www.patrickjudson.com/weddingIndex.php
Patrick

Accordion Panels Open During Page Load

All my accordion panels appear open for a second before my page completely loads. http://home.comcast.net/~steven.kay/
I found this thread, but am still not clear on the solution given. http://forums.adobe.com/message/22365#22365
Thanks.

Never mind... I downloaded the new js file... (duh)

Spry accordion - open url in separate frame on click

I'm trying to load a page in a frame at the same time a user clicks on an accordian panel.
Javascript doesn't seem to fire and I can't find help on the topic.
Can someone point me in the right direction?

Although this example http://labs.adobe.com/technologies/spry/samples/utils/updateContent_TabbedPanels.html is for tabbed panels, the same can be applied to an accordion.
Gramps

Spry accordion open panel

Hello,
is there a way, that if I have a page without the accordion, and I click on that page a link, that link goes to the accordion panel page, and when it goes, specifically opens one of the pannels.
THank you

Yes. But you need the SpryURLUtils.js files. And you won't find them on Adobe Labs anymore because Adobe abandoned Spry last year. The files have been moved to GitHub.
Tutorial:
http://foundationphp.com/tutorials/spry_url_utils.php
Spry Files:
Adobe GitHub account
Nancy O.

Spry keys show on page load.

Hello,
Well...I don't know how to explain this, so I will just let
you guys see it, when a user loads the page on the browser it first
show the spry {keys} and then it relaods after a couple of seconds
with the actual data. I am using "XML Recordset Export" extension
and then using Spry Data Set to display the info. I don't know if
this is slow server or maybe not a good practice.
This is the
page...
Thanks in advance

Starting with All Panels Closed
This feature is only supported when using variable height panels, so you must pass a false into the Accordion's constructor for the "useFixedPanelHeights" constructor option, and a -1 for the "defaultPanel" option.
Gramps

All my content appears on page load - is this Spry related?

I remember having this issue when using Spry in the past. I changed the padding settings I think, and all the Accordions were open on page load - for only a second - and then closed.
I'm working with a new site, and the template seemed fine but when I populate, all tabbed-content and a scroller content appear on page load. Then snap shut. Is it related? or a similar issue... I'm pretty desperate to be posting here but I it looks like the same sort of problem I had with Spry... maybe the template has been built with some of the same technology (?)
http://bit.ly/ptaBVN
Please help!

Try this:
1. Set a class that sets visibiliity to hidden:
.hideGroup{visibility:hidden;}
2. Add this class to your content group:
<div class="SlidingPanelsContentGroup hideGroup">
3. Add a line to sp_unobtrusive.js to remove this new class
after the widget made.
Spry.$$(".SlidingPanelsContentGroup").removeClassName("hideGroup");
Add that right under the addEventListener lines.
That should do it.
Don

Spry Accordion open on page load

Similar Messages

Maybe you are looking for