Yes, I'm aware of the fact that its removed from the server. I still have a local backup. And will e-mail it to you within a few minutes.

Can you please email me the script, too?

Cheers

Denis

meister@denis-online.de

Thanks a lot!
Denis

I'll try to poke up a more extended example tomorrow, with forward and backwards functionality. Any other feature requests? ?

Could you please post your changes to allow it to start automatically? Thank you.

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

Hmz,

Sure it possible

As you can just switch direction to backwards once you are at the end, or forwards once your are the beginning..

I'll build a option for that. something like

{ each: 5000, infinite : true, automatic : true }

I'll see what i can do.

Note: its rather annoying that I can't edit the above post, I just spotted a little inefficent code above..

im doing panel.length instead of reusing the panelcount variable. Bummer.

The best thing for that is, again.. to modify the Spry file. I once had the same issue.  Here is the code i used:

(I'm using sliding panels as wizzard atm, and want breadcrumb paths to be highlighted based on current panel)

Its a modification to the showPanel method:

Spry.Widget.SlidingPanels.prototype.showPanel = function(elementOrIndex)
          {
          var pIndex = -1;
          
          if (typeof elementOrIndex == "number")
               pIndex = elementOrIndex;
          else // Must be the element for the content panel.
               pIndex = this.getContentPanelIndex(elementOrIndex);
     
          var numPanels = this.getContentPanelsCount();
          if (numPanels > 0)
               pIndex = (pIndex >= numPanels) ? numPanels - 1 : pIndex;
          else
               pIndex = 0;
     
          var panel = this.getContentPanels()[pIndex];
          var contentGroup = this.getContentGroup();
     
          if (panel && contentGroup)
          {
               if (this.panelChange){
                    this.panelChange(pIndex);
               }
               
               if (this.currentPanel)
                    this.removeClassName(this.currentPanel, this.currentPanelClass);
               this.currentPanel = panel;
     
               var nx = -panel.offsetLeft;
               var ny = -panel.offsetTop;
     
               if (this.enableAnimation)
               {
                    if (this.animator)
                         this.animator.stop();
                    var cx = contentGroup.offsetLeft;
                    var cy = contentGroup.offsetTop;
                    if (cx != nx || cy != ny)
                    {
                         var self = this;
                         this.addClassName(panel, this.animatingClass);
                         this.animator = new Spry.Widget.SlidingPanels.PanelAnimator(contentGroup, cx, cy, nx, ny, { duration: this.duration, fps: this.fps, transition: this.transition, finish: function()
                         {
                              self.removeClassName(panel, self.animatingClass);
                              self.addClassName(panel, self.currentPanelClass);
                         } });
                         this.animator.start();
                    }
               }
               else
               {
                    contentGroup.style.left = nx + "px";
                    contentGroup.style.top = ny + "px";
                    this.addClassName(panel, this.currentPanelClass);
               }
          }
     
          return panel;
     };

This modification allows you to specify a callback function in the sliding panel constructor using the following option:

panelChange: [function]

The function to be called once the panel is changing.

Example:

function setStep( index ){
     alert(index); // current panel index
 
}
var sp1 = new Spry.Widget.SlidingPanels('id', {panelChange: setStep});

My finished implementation of it:

funtion updateBread( index ){
     // this example uses SpryDOMUtils.js
     var steps = Spry.$$('ol.steps li'); // my amount of LI's match the amount of panels
 
     steps.removeClassName('selected'); // remove all selected classNames
     steps[index].className = 'selected'; // set selected to the current
}
 
var sp1 = new Spry.Widget.SlidingPanels('id', {panelChange:updateBread});

Hopefully it helps you out a bit.

You change it for your need, add an id attribute on your:..

Example:

<div spry:repeat="dsTeaser">

To:

<div spry:repeat="dsTeaser" id="thumbs">

var steps = Spry.$$('ol.steps li'); would become:

var steps = Spry.$$('#thumbs a');

And CSS:

#thumbs .selected img { border : 2px solid white }

If you just want to overwrite the existing SprySldingPanels.js you 

should overwrite the complete 

Spry.Widget.SlidingPanels.prototype.attachBehaviors which is found 

near line 121

function with the coded i created.

Yup

Arnout,

Thanks so much for your great work!

Maybe you can attach the final js file with all the new functions. I think I am to stupid to include all the new code :-(

I copied it from your demo, but my slide didnt start runing.

http://www.localhero.de/_Teaser/lh.php

Denis

This is what I use. The slide only starts if you click on the down arrow two times :-(

http://www.localhero.de/_Teaser/lh.php

It did, and it looks cool. What is that observer, where to read about it?

Next is, to make the focus panel highlight the thumb.

Thanks, for making the slide panel to be used so easy!

Denis

Looking on your working eample i saw this reference:

<script type="text/javascript" src="http://config.spry-it.com/js?f=effects"></script>

Looking on the code i  dont know what is it for . i have tried your example and it seem to work fine without it. Could you say if this reference is neccessary, and if so what does it do.

Ok thanks for the explanation but as a rooky i do not understand your strong japanize accent. The only think i understand thus far is " Its not needed to make script work". I would like to thank you for making my life easier with your great extention to the sliding panel widget. Great work.