Skip navigation
Currently Being Moderated

Implimenting spry tabbed panel auto rotate

Jan 5, 2013 12:08 PM

Hello, Im trying to impliment the JS code on the site below with regards to my spry tabbed pannels. tm


I downloaded the file at iles/SpryTabbedPanelsExtensions.js and placed it in the root directory of my website.


To make this active, do i have to imbed the code from the first site into the HTML of the page with my tabbed panels? Here is the code:



<script language="JavaScript" type="text/javascript" src="../../widgets/tabbedpanels/SpryTabbedPanels.js"></script>

<script language="JavaScript" type="text/javascript" src="../../widgets/tabbedpanels/SpryTabbedPanelsExtensions.js"></scri pt>





<script language="JavaScript" type="text/javascript">

// Create the widget, and specify what interval you want

// to use when cycling through the panels.


var tp1 = new Spry.Widget.TabbedPanels("TabbedPanels1", { interval: 3000 });


// Start showing panels at regular intervals.




  • Currently Being Moderated
    Jan 5, 2013 12:37 PM   in reply to AndrewMichel1

    Starting with a blank document, add the SpryTabbedPanels widget.


    Ensuring that you have both SpryEffects.js and SpryTabbedPanelsExtensions.js in your SpryAssets folder, add a link to both of these files.


    Then modify the selector to add the interval and a trigger to start the animation.


    Your document should look like the following where the changes to the out-of-the-box widget have been highlighted.

    <!doctype html>



    <meta charset="utf-8">

    <title>Untitled Document</title>

    <link href="SpryAssets/SpryTabbedPanels.css" rel="stylesheet">




    <div id="TabbedPanels1" class="TabbedPanels">

      <ul class="TabbedPanelsTabGroup">

        <li class="TabbedPanelsTab" tabindex="0">Tab 1</li>

        <li class="TabbedPanelsTab" tabindex="0">Tab 2</li>


      <div class="TabbedPanelsContentGroup">

        <div class="TabbedPanelsContent">Content 1</div>

        <div class="TabbedPanelsContent">Content 2</div>



    <script src="SpryAssets/SpryTabbedPanels.js"></script>

    <script src="SpryAssets/SpryEffects.js"></script>

    <script src="SpryAssets/SpryTabbedPanelsExtensions.js"></script>


    var TabbedPanels1 = new Spry.Widget.TabbedPanels("TabbedPanels1", { interval: 3000 });





    Mark as:
  • Currently Being Moderated
    Jan 5, 2013 12:37 PM   in reply to AndrewMichel1

    You need all the supporting spry .js and .css files in your own site folder or it won't work.

    I think you can download them from Github as Adobe has given up on Spry. ork-availability.html



    Nancy O.

    Mark as:
  • Currently Being Moderated
    Jan 5, 2013 4:04 PM   in reply to AndrewMichel1

    jQuery Easy Tabs


    Can be styled manually or with jQuery Theme Roller


    Primer for Using jQuery Plug-ins tml



    Nancy O.

    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