Skip navigation
LAGooner10
Currently Being Moderated

Auto advance Accordion on page load

Aug 17, 2011 7:08 AM

Tried to find this elsewhere on the forum but had no luck. I have a Spry Accordion which I would like to automatically slide through each panel when the page loads. I would then like the animation to pause when you click or mouse over a panel. Searched everywhere and can't seem to find a solution.

 
Replies
  • Currently Being Moderated
    Aug 17, 2011 7:26 AM   in reply to LAGooner10

    The SpryAccordion widget will not do that as a standard feature. I'm afraid you will have to try to conjure one up for yourself. Using the Spry UI widgets will be a good place to start,

     

    Gramps

     

    Sorry, see here http://labs.adobe.com/technologies/spry/preview/

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 18, 2011 5:32 PM   in reply to LAGooner10

    Judging from your enthousiasm, I assume the script works. Make the whole script a function called animateAcc or similar. Write a second function that stops the animation called stopAcc or similar.

     

    Now all you need are the triggers to set each function off. For this you can use the onload event, the mouseover event and the mouseout event. You can use SpryDOMUtils or jQuery to capture the events.

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 19, 2011 2:52 AM   in reply to LAGooner10

    Hello,

     

    Here's what I came with yesterday night and polished this morning:

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Auto advance Accordion on page load</title>
    <script src="SpryAssets/SpryDOMUtils.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
    var c=0;
    var t;

     

    function start() {
        t=setTimeout("loop()",1000);
        c=c+1;
    }

     

    function loop() {
        if (c==5) {
            Accordion.openFirstPanel(0);
            c=0;
        }
        else {
            c=c+1;
            Accordion.openNextPanel();
        }
    t=setTimeout("loop()",1000);
    }

     

    Spry.Utils.addLoadListener(function() {
        Spry.$$(".AccordionPanel").forEach(function(n){
            Spry.Utils.addEventListener(n, "mouseover", function(){
                clearTimeout(t);
            }, false);
            Spry.Utils.addEventListener(n, "mouseout", function() {
                start();
            }, false);
        });   
       
        start();
    });

     

    </script>
    </head>

     

    <body>
    <div id="Accordion1" class="Accordion" tabindex="0">
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Etiquette 1</div>
        <div class="AccordionPanelContent">Contenu 1</div>
      </div>
    <div class="AccordionPanel">
        <div class="AccordionPanelTab">Etiquette 2</div>
        <div class="AccordionPanelContent">Contenu 2</div>
      </div>
      <div class="AccordionPanel">
        <div class="AccordionPanelTab">Etiquette 3</div>
        <div class="AccordionPanelContent">Contenu 3</div>
      </div>
    </div>
    <script type="text/javascript">
    var Accordion = new Spry.Widget.Accordion("Accordion1");
    </script>
    </body>
    </html>

     

     

    It is more or less what Gramps has advised. I also took the liberty to remove the start() action from the BODY tag and added a much more advisable load listener to your document. This way, you can still add other actions when the document has loaded.

    Change the timing in the setTimeout() function to suit your needs.

     

    Xav

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 19, 2011 4:36 AM   in reply to MyDreamweaverExtensions

    Xav,

     

    Bloody brilliant!

     

    I reckon you should get a 50 point recognition for that.

     

    Gramps

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 19, 2011 6:15 AM   in reply to Ben Pleysier

    Thanks Gramps! Coming from you, I am more than flattered!

     

    Xav

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 22, 2011 5:52 AM   in reply to LAGooner10

    Simon,

     

    I am at a loss of words to express how much I enjoyed your sample. It goes to show that, if the Spry framework had been more of an open source framework, similar to jQuery, it would have a much broader base than it has at present.

     

    You sample solves two issues, the first being a horizontal accordion, the second being an auto advancing mechanism that can also be applied to a vertical accordion.

     

    I would like to ask you to place your sample in the the Adobe Dreamweaver Cookbook so that others can benefit from it.

     

    Thank you.

    Gramps

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points