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.

 

http://www.shinarp.com/SprySamples/tabbedpanels/tabbed_panel_sample3.h tm

 

I downloaded the file at http://www.shinarp.com/SprySamples/tabbedpanels/tabbed_panel_sample3_f 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.

 

tp1.start();

</script>

 
Replies
  • 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>

    <html>

    <head>

    <meta charset="utf-8">

    <title>Untitled Document</title>

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

    </head>

     

    <body>

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

      <ul class="TabbedPanelsTabGroup">

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

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

      </ul>

      <div class="TabbedPanelsContentGroup">

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

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

      </div>

    </div>

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

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

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

    <script>

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

    TabbedPanels1.start();

    </script>

    </body>

    </html>

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

    http://blogs.adobe.com/dreamweaver/2012/08/update-on-adobe-spry-framew ork-availability.html

     

     

    Nancy O.

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

    jQuery Easy Tabs

    http://os.alfajango.com/easytabs/#tabs1-html

     

    Can be styled manually or with jQuery Theme Roller

    http://jqueryui.com/themeroller/

     

    Primer for Using jQuery Plug-ins

    http://alt-web.blogspot.com/2012/11/primer-for-using-jquery-plug-ins.h 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