Sliding Panels Auto Advance w/ Timer

Question

Hi everyone. I'm looking to make my sliding panels advance
with a simple timer. I know this can be done (right?) but can't
find any way to do this. I have text content in my panels (no
images) so the posted example of a gallery doesn't help me much.
I have no problem setting up the panels as I want, I just
want to make them advance every few seconds.
Anyone please help!!
Thanks so much,
Varen Swaab

Answer 1

Instead of creating a custom script, I decided to extend the widget it self. So everything can be controlled from the widget constructor.
Before we get started a small side note:
I would advice to put the changes in a seperate script, and not to modify the current SlidingPanels.js. This way, if you happen to update to Spry 1.7 it will not overwrite the change you made. But if you do not wish to update just paste it in the SprySlidingPanels.js (This saves a HTTP request, resulting in a slightly faster page load, maintainablity vs performance)
The changes allow you specify the following new options in the constructor:
- automatic: true / false [boolean]
turns automatic sliding panels on or off, off by default
- direction: 0 / 1 [number or Spry.forward , Spry.backward if you have SpryEffects included]
direction that panels should automaticly slide to, 1 is forward, 2 is backward
- each: 1000 [number]
time in miliseconds, note I had to name this "each" instead of duration, because duration handles the sliding panel animation duration.
Example constructor:
var sp1 = new Spry.Widget.SlidingPanels("SlidingPanels1", { automatic: false, direction: 0, each: 5000 });
It also adds 3 new methods to the sliding panel:
- .start  [ sp1.start(); ]
This allows you to start the automatic sliding of the panels, this will also work, if you did not specify automatic in your constructor
- .stop  [ sp1.stop(); ]
Stops automatic sliding of the panels
- .setDirection [ sp1.setDirection(1); ]
Sets a new direction for the sliding panels, requires the same values as you can specify in the sliding panels constructor
The new code:
// line 121 of SprySlidingPanels.js
Spry.Widget.SlidingPanels.prototype.attachBehaviors = function()
     var ele = this.element;
     if (!ele)
          return;
     if (this.enableKeyboardNavigation)
          var focusEle = null;
          var tabIndexAttr = ele.attributes.getNamedItem("tabindex");
          if (tabIndexAttr || ele.nodeName.toLowerCase() == "a")
               focusEle = ele;
          if (focusEle)
               var self = this;
               Spry.Widget.SlidingPanels.addEventListener(focusEle, "focus", function(e) { return self.onFocus(e || window.event); }, false);
               Spry.Widget.SlidingPanels.addEventListener(focusEle, "blur", function(e) { return self.onBlur(e || window.event); }, false);
               Spry.Widget.SlidingPanels.addEventListener(focusEle, "keydown", function(e) { return self.onKeyDown(e || window.event); }, false);
     if (this.currentPanel)
          // Temporarily turn off animation when showing the
          // initial panel.
          var ea = this.enableAnimation;
          this.enableAnimation = false;
          this.showPanel(this.currentPanel);
          this.enableAnimation = ea;
     if (this.automatic){
          this.start();
// These are all new methods
Spry.Widget.SlidingPanels.prototype.start = function(){
     var self = this; // reference to this, so we can use it inside our function
     this.automaticStarted = setInterval(function(){
               var panels = self.getContentPanels(),
                    panelcount = panels.length,
                    current = self.getCurrentPanel(),
                    newpanel;
               // locate the current panel index, and check if we need to increase or decrease the panel
               for(var i = 0; i < panelcount; i++){
                    if(panels[i] == current){
                         self.direction == 1 ? (i++) : (i--);
                         self.showPanel( self.direction == 1 ? (i >= panels.length ? 0 : i) : (i < 0 ? panels.length -1 : i));    
                         break; // stop looping, we already found and are displaying our new panel
     }, this.each || 3000);
Spry.Widget.SlidingPanels.prototype.stop = function(){
     if(this.automaticStarted && typeof this.automaticStarted == 'number'){
          clearInterval(this.automaticStarted);
          this.automaticStarted = null;
Spry.Widget.SlidingPanels.prototype.setDirection = function(direction){
     this.direction = direction;
Hopes this helps