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, Ron

    Well 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 appl

    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!
    THanks

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

  • When I go to a web page power point presentation saved as Adobe the first page loads then I keep getting error message:

    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]

  • Spry accordion menu

    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,
    Dave

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

  • Suddenly I can't access photos on my iPod touch- opens a blank page and then closes- email- opens a blank page and then closes- the camera- opens but wont work and then closes. Facebook works ok though. Any ideas?

    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!

  • When i click on print menu in certain page, the pop page loaded then the print dialogue box appeared and immediately it close down all the pop up and print dialogue box without us to print it. What is the solution?

    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