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.
Similar Messages
-
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 - Tabs open and then close after page loads
I am using a Spry Accordion menu driven from a database.
The menu opens up during the page load and then closes.
I'm using SpryAccordion.js 1.6.1
And to open a preset tab, I'm using:
<script type="text/javascript">
<!--
var Accordion1 = new Spry.Widget.Accordion("Accordion1",{useFixedPanelHeights:false, enableAnimation: false, defaultPanel: 0 });
//-->
</script>
But, all of the tabs open and then close on page load.
My page: http://www.texashotjobs.us/00C01.aspx
Any fix for this??
Thanks, RonWell to both thanks. Actually I wasn't disappointed as I had a two part question...
I tested the 1.6 JS and remembered that I had to modify the 1.4 so that tabs actually would link. So I reverted back to 1.4.
So, going to 1.6 fixed the open panel on load but "unfixed" the panel tab from linking.....
So changing this in the 1.6 js fixed the link issue as well:
Spry.Widget.Accordion.prototype.onPanelTabClick = function(e, panel)
if (panel != this.currentPanel)
this.openPanel(panel);
else
this.closePanel();
if (this.enableKeyboardNavigation)
this.focus();
// if (e.preventDefault) e.preventDefault();
// else e.returnValue = false;
// if (e.stopPropagation) e.stopPropagation();
// else e.cancelBubble = true;
I t appears everything is working........
Thanks, Ron Gaddis
Visual Reality Productions -
Using an image as label in Spry Accordion Menu
I was wondering if it was possible to use an image instead of
text in the spry accordion menu. I have replaced the text that is
there with a roll-over image link however I'm unable to label it
since it uses the text as the label and therefore can't set the
default panel I want opened. Is there a way to do this? Thanks for
your help.Stefaan Lesage wrote:
Is this possible with Pages 09 ? And can I achieve this ?
Is it possible to look at the Help or at the Pages User Guide
In the English one, page 17, we may read:
• Some graphics, such as watermarks or logos, appear on pages. These objects are called master objects. If you cannot select an object in a template, it’s probably a master object. To learn more, see “Using Master Objects (Repeated Background Images)” on page 60.
You can drag or place objects on a page, including imported graphics, movies, and sound, or objects that you create within Pages, including text boxes, charts, tables, and shapes.
You can also insert pages that have been preformatted for the template you’re using. Click Pages or Sections in the toolbar and choose a template page. The new page is added immediately after the page where you placed the insertion point.
Yvan KOENIG (from FRANCE vendredi 27 février 2009 23:01:32) -
Spry Accordion Menu Tab Link css - totally confused
Thanks folks from an l-plater but I've totally confused myself trying to work this out and I'm hoping some fresh eyes will see the answer clear as day. I've created a spry accordion menu with links in the actual panel tabs. Menu and links all working fine - problem is in css styling, particularly panel tab link open and hover states which should be blue text over green background, same as non-link panel tabs. You'll see from code that I've tried a few styles but can't get this to work. I'm thinking I've totally overdone it and some styles are overriding others and solution is a simple deletion of some unnecessary or conflicting styles.
Thanks so much in advance for your help - I just can't see for looking any more though I'm sure it can't be hard.
<div id="sidebar1">
<div id="Accordion1" class="Accordion">
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="Index.html" onclick="window.location = this.href">Home</a></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Photo Gallery</div>
<div class="AccordionPanelContent">
<ul>
<li><a href="PhotoGallery.html">Gallery 1</a></li>
</ul>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Unit Newsletters</div>
<div class="AccordionPanelContent">
<ul>
<li><a href="Newsletter.html">February 2010</a></li>
</ul>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="Sponsors.html" onclick="window.location = this.href">Sponsors</a></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="Merchandise.html" onclick="window.location = this.href">Merchandise</a></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="Links.html" onclick="window.location = this.href">Links</a></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="Events.html" onclick="window.location = this.href">Events</a></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Forms</div>
<div class="AccordionPanelContent">
<ul>
<li><a href="">Joining Instructions</a></li>
<li><a href="">Enrolment</a></li>
<li><a href="">Next of Kin</a></li>
<li><a href="">Volunteer Blue Card</a></li>
</ul>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="Contact.html" onclick="window.location = this.href">Contact</a></div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab"><a href="LogIn.html" onclick="window.location = this.href">Log In</a></div>
<div class="AccordionPanelContent">
<ul>
<li><a href="WhatsOn.html">Whats On</a></li>
<li><a href="PSG.html">Parent Support Group</a></li>
</ul>
</div>
</div>
</div>
</div>
.AccordionPanel {
margin: 0px;
padding: 0px;
.AccordionPanelTab {
background-color: #036;
border-bottom: 1px #93b747 solid;
margin: 0px;
padding-left: 10px;
padding-top: 2px;
padding-bottom: 2px;
font-size: 12px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
text-decoration: none;
.AccordionPanelTabOpen {
color: #036;
background-color: #93b747;
display: block;
text-decoration: none;
.AccordionPanelTabHover {
color: #036;
background-color: #93b747;
text-decoration: none;
border-bottom: 1px solid #036;
display: block;
.AccordionPanelTab a {
color: #93b747;
margin: 0px;
font-size: 12px;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
text-decoration: none;
display: block;
.AccordionPanelTab a.open {
font-color: #036;
color: #036;
background-color: #93b747;
text-decoration: none;
display: block;
.AccordionPanelTab a.active {
color: #036;
background-color: #93b747;
display: block;
text-decoration: none;
.AccordionPanelTab a.hover {
color: #036;
background-color: #93b747;
font-weight: bold;
text-decoration: none;
display: block;
.AccordionPanelTab a.close {
color: #93b747;
background-color: #036;
text-decoration: none;
display: block;
.AccordionPanelContent {
margin: 0px;
padding-left: 10px;
padding-top: 2px;
padding-bottom: 12px;
background: #fff;
font-size: 12px;
color: #036;
font-weight: 500;
.AccordionPanelContent ul li {
margin-left: -40px;
padding-top: 2px;
padding-bottom: 2px;
background: #fff;
font-size: 12px;
color: #036;
font-weight: 500;
text-decoration: none;
list-style-type:none;
list-style:none;
.AccordionPanelContent ul li a:link {
color: #036;
text-decoration: none;
list-style-type:none;
list-style:none;
.AccordionPanelContent ul li a:hover {
color: #036;
font-weight: bold;
text-decoration: none;
.AccordionPanelContent ul li a:visited {
color: #036;
text-decoration: none;
.AccordionPanelOpen .AccordionPanelTab {
color: #036;
background: #93b747;
border-bottom: 1px solid #036;
.AccordionPanelOpen .AccordionPanelTab.a {
color: #036;
background: #93b747;
border-bottom: 1px solid #036;
.AccordionPanelOpen .AccordionPanelTabHover {
color: #036;
font-weight: bold;
.AccordionPanelOpen.a .AccordionPanelTabHover.a {
color: #036;
font-weight: 600;
.AccordionFocused .AccordionPanelTab {
color: #036;
font-weight: 600;
a.AccordionFocused .AccordionPanelTab {
color: #036;
font-weight: 600;
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
color: #036;
font-weight: 600;
a.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
color: #036;
font-weight: 600;Yes Beth, you're right and I've corrected my css - I think - problem with AccordionPanelTab link open and hover states still happening so css still wrong. I've uploaded site so you can see what's happening (www.11acu.org). All tab states should be as per Photo Gallery, Newsletters and Forms. Hover state in tab links seem okay until mouse moves away from "a href" block - rest of tab area not working so its like the two styles, ie "AccordionPanelTab" and "AccordionPanelTab a:hover" are both working at the same time but I only want the latter to work. Now I've probably got you confused as well! lol Apologies! Recreated css for tab links below. Html same as in original post. Any help much appreciated.
.AccordionPanelTab {
color: #93b747;
background-color: #036;
border-bottom: solid 1px #93b747;
margin: 0px;
padding-left: 10px;
padding-top: 2px;
padding-bottom: 2px;
font-size: 12px;
text-decoration: none;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
.AccordionPanelTab a {
color: #93b747;
background-color: #036;
margin: 0px;
padding-left: -10px;
padding-top: -2px;
padding-bottom: -2px;
font-size: 12px;
text-decoration: none;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
display: block;
.AccordionPanelTab a:link {
color: #93b747;
background-color: #036;
margin: 0px;
padding-left: -10px;
padding-top: -2px;
padding-bottom: -2px;
font-size: 12px;
text-decoration: none;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
display: block;
.AccordionPanelTab a:hover {
color: #036;
background-color: #93b747;
margin: 0px;
padding-left: -10px;
padding-top: -2px;
padding-bottom: -2px;
font-size: 12px;
text-decoration: none;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
display: block;
.AccordionPanelTab a:active {
color: #036;
background-color: #93b747;
margin: 0px;
padding-left: -10px;
padding-top: -2px;
padding-bottom: -2px;
font-size: 12px;
text-decoration: none;
cursor: pointer;
-moz-user-select: none;
-khtml-user-select: none;
display: block;
.AccordionPanelOpen .AccordionPanelTab {
color: #036;
background-color: #93b747;
border-bottom: solid 1px #036;
text-decoration: none;
.AccordionPanelTabHover {
color: #036;
background-color: #93b747;
text-decoration: none;
border-bottom: solid 1px #036;
.AccordionPanelOpen .AccordionPanelTabHover {
color: #036;
background-color: #93b747;
text-decoration: none;
font-weight: bold;
.AccordionFocused .AccordionPanelTab {
color: #93b747;
background-color: #036;
text-decoration: none;
.AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
color: #036;
background-color: #93b747;
border-bottom: solid 1px #036;
text-decoration: none; -
When I try to open Adobe Reader, it just opens a gray page and then closes by itself. This also applies to any pdf files I try to access; they'd all follow the same pattern: Gray page-->automatically closes after 2 to 3 seconds time. I have tried accessing the Eula.exe via C:\Program Files (x86)\Adobe\Reader 11.0\Reader, however, the only available button for me to click is the "Decline" button and not the "Accept" license agreement. Please help!
THanksThanks for your help!!!!
-
PDF files will not open and eratically open multiple pages and then freezes up the page
PDF files will not open and eratically opens multiple pages and then the laptop freezes up. Please help.
E Denice wrote:
PDF files will not open and eratically opens multiple pages and then the laptop freezes up.
Doesn't make much sense to me. Methinks details are needed. -
I have Adobe Acrobat Pro XI
And its up to date.
When I go to a web page Power point presentation saved as Adobe the first page loads then I keep getting error message:
There was a problem reading this document (14)
I've tried refreshing the download.
Im using IE 11
windows 8.1
Any ideas how to fix this?[moving discussion to Creating, Editing & Exporting PDFs forum]
-
Hello,
I have a Spry Accordion menu with links inside the Accordion
Panel Content. I’m trying to style them using CSS, but
can’t figure out how. I tried this(below) but doesn’t
work.
#AccordionPanelContent a {
font-size:9px;
color:#FF6600;
font-weight:bold;
text-decoration:none;
padding-left: 2px;
padding-right:15px;
Here's the HTML code:
<div id="Accordion1" class="Accordion" tabindex="0">
<div class="AccordionPanel">
<div class="AccordionPanelTab">Places</div>
<div class="AccordionPanelContent">
<ul>
<li><a
href="jordan.html">Jordan</a></li>
<li><a
href="bhutan.html">Bhutan</a></li>
<li><a
href="london.html">London</a></li>
<li><a
href="spain.html">Spain</a></li>
<li><a href="rocky.html">Rocky Nat'l Park,
USA</a></li>
</ul>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">WildLife</div>
<div class="AccordionPanelContent">Content
3</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">Close-ups</div>
<div class="AccordionPanelContent">
<ul>
<li><a
href="flowers.html">Flowers</a></li>
<li><a
href="insects.html">Insects</a></li>
</ul>
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">People</div>
<div class="AccordionPanelContent">Content
4</div>
</div>
</div>
<script type="text/javascript">
<!--
var Accordion1 = new Spry.Widget.Accordion("Accordion1");
Thanks for any help on how to style these link,
DaveLinks are not coded into the CSS for the Accordian panel. You
could add the lines in yourself.
Here is what I would recommend. If you want the same link
color regardless of where it is on the document, make another css
document on your own, attach it to the document, and put the
following in it:
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
That would just change the color of the links. Active and
Link can be the same if you want even though this example does not
show it. If you need something else, like underlining or bold, you
could use the Reference Panel of DW or post here, and you could
also check out this example:
http://www.w3schools.com/css/tryit.asp?filename=trycss_link2
This comes from a very good tutorial located at:
http://www.w3schools.com/css/default.asp
(the Hyperlink stuff is under "psuedo-class" under advanced on the
left menu)
Or if you just need this code to work on the panel only you
would need to do this:
#AccordianPanelContent a:active,
#AccordianPanelContent a:link { CSS CODE HERE }
#AccordianPanelContent a:visited { CSS CODE HERE }
#AccordianPanelContent a:hover { CSS CODE HERE }
Hope this helps some. -
My iPod touch has stopped working in selective areas. The camera turns on, I can see the image but the buttons don't work. The camera then closes.
When I try to access photos, I get a blank page which then closes. The same is true when I try to access mail. Facebook and my music works fine though. Ideas?Try:
- Reset the iOS device. Nothing will be lost
Reset iOS device: Hold down the On/Off button and the Home button at the same time for at
least ten seconds, until the Apple logo appears.
- Restore from backup. See:
iOS: Back up and restore your iOS device with iCloud or iTunes
- Restore to factory settings/new iOS device.
If still problem, make an appointment at the Genius Bar of an Apple store since it appears you have a hardware problem.
Apple Retail Store - Genius Bar -
HT4191 my notes app on my IPad opens for a second then closes - it's working ok on my Iphone though
My notes app. on my Ipad opens for 1 second then closes - however it's working ok on my IPhone. Checked settings and all seems fine, compared settings to another Ipad and identical, so unsure why this has suddenly occured. Have shut down /restarted Ipad 3 or 4 times, and closed app. from programmes running screen - but still happening. Any thoughts ?
Try reset all settings
Settings>General>Reset>Reset All Settings
Note: Data will not be affected but settings will be reset. -
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 -
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! -
On that website (member only site), when i clicked on print menu on the site, it normally loaded the page and then the print dialogue box appear and immediately, it closed down all the pop up and print dialuge so that i cannot print it at all. It happened only after i upgrade Firefox to version 6.0.2, previous version it worked fine.
Hello,
The Reset Firefox feature can fix many issues by restoring Firefox to its factory default state while saving your essential information. <br>
'''Note''': ''This will cause you to lose any Extensions and some Preferences.''
*Open websites will not be saved in Firefox versions lower than 25.
To Reset Firefox do the following:
'''For Firefox versions previous to 29.0:'''
#Go to Firefox > Help > Troubleshooting Information.
#Click the "Reset Firefox"[[Image:Button reset]] button.
#Firefox will close and reset. After Firefox is done, it will show a window with the information that is imported. Click Finish.
#Firefox will open with all factory defaults applied.
'''For Firefox 29.0 and above:'''
#Click the menu button [[Image:New Fx Menu]], click help [[Image:Help-29]] and select ''Troubleshooting Information''.Now, a new tab containing your troubleshooting information should open.
#At the top right corner of the page, you should see a button that says "Reset Firefox"[[Image:Button reset]]. Click on it.
#Firefox will close and reset. After Firefox is done, it will show a window with the information that is imported. Click Finish.
#Firefox will open with all factory defaults applied.
Further information can be found in the [[Reset Firefox – easily fix most problems]] article.
Did this fix your problems? Please report back to us!
Thank you. -
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.
);
Maybe you are looking for
-
I keep pictures in Albums, specifically by year and then other topic albums. As a result some pictures are in several albums. Sometimes they are assigned in error. I used to be able to click on a picture and see not only the tags but the albums asso
-
Every time I double click to run Quick Time I get the following:- "QuickTime Player has encountered a problem and needs to close. We are sorry for the inconvenience." and I am given the option to tell Microsoft about the problem. I don't know if this
-
JavaFX 2.2 not installing after JDK7u6 installation on Windows 7 x64
Please everybody ignore this message of mine, I've had a D'OH! moment! This new installation of JDK7u6 has completely thrown me because of the existing documentation, as some of the documentation still states the following: http://docs.oracle.com/jav
-
Error installing AIR.InstallPackage
my computer automatically restart when installing AIR.InstallPackage but after that i cant found that installed package, and as additional info i run XP with AMD 64 Athlon X2 3600+ thanks
-
Upload XML data using XSQL and HTTP Post ?
Upload XML data using XSLQ and HTTP Post: is that possible ? An xsql contains an <xsql:insert-request table="aTable"> The XML data file follows the ROWSET/ROW paradigm. What is the HTML form to upload the xml file to the XSQL ? I tried: <form action=