Skip navigation
Currently Being Moderated

Sliding Panels Auto Advance w/ Timer

Jan 21, 2008 9:40 AM

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
 
Replies
  • Currently Being Moderated
    Feb 8, 2008 12:33 AM   in reply to VarenS
    http://www.3rd-eden.com/Spry-it.com/examples/slidingpanelsautomatic/
    ^
    a really really reallllllllllllllllllllly simple version.
     
    |
    Mark as:
  • Currently Being Moderated
    Jun 18, 2009 7:46 PM   in reply to VarenS

    No fair. The sample was removed.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 19, 2009 7:25 AM   in reply to jahflasher

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 19, 2009 8:01 AM   in reply to Arnout Kazemier

    Thank you so much for your help.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 29, 2009 11:54 AM   in reply to Arnout Kazemier

    Can you please email me the script, too?

     

    Cheers

    Denis

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 29, 2009 12:08 PM   in reply to MyCologne

    Send me a email, and I'll see if i can digg it up.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 29, 2009 12:14 PM   in reply to Arnout Kazemier

    meister@denis-online.de

    Thanks a lot!
    Denis

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 12, 2009 11:20 AM   in reply to MyCologne

    Hi Arnout,

     

    I cant get it to work.

     

    This is my slide so far: http://www.localhero.de/_Slide/_Slide.php

     

    I want to start it automaticly, and no start an no stop button.

     

    And it would be cool, if it goes forward and at the end backwards :-)

     

    Thanks

    Denis

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 12, 2009 12:00 PM   in reply to MyCologne

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

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 12, 2009 12:16 PM   in reply to Arnout Kazemier
    Hi Arnout,
    nice to hear from you, I fanally made it :-))) I got behind your code :-) I leave the buttons away. And directly started with setinterval.
    As you can see, I try to create a nice teaser.
    Backwards would be cool. And to set focus wiche panel is shown right now.
    Thanks for your help and your example.
    Denis
     
    |
    Mark as:
  • Currently Being Moderated
    Aug 12, 2009 3:01 PM   in reply to MyCologne

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

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 12, 2009 3:48 PM   in reply to jahflasher

    Just put that code in the head:


    Cheers

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 13, 2009 1:07 AM   in reply to DenisCGN

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 13, 2009 6:28 AM   in reply to Arnout Kazemier

    Hi Arnout,

     

    thanks a lot.

     

    Is it somehow possible, to ad an third direction?

     

    "FORWARD and BACKWARD"

     

    It starts forward comes to the end and goes back step by step and then starts forward again :-)

     

    like:  1 2 3 4 5 4 3 2 1 2 3 4 5 4 and so on.

     

    I gonna try your code NOW :-)

     

    Cheers

    Denis

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 13, 2009 6:50 AM   in reply to DenisCGN

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 13, 2009 7:07 AM   in reply to Arnout Kazemier

    :-) very cool.

     

    I got one other, for me important, question.

     

    Look at my slide: http://www.localhero.de/_Slide/Box.php

     

    At the right side there are thumbs. I want the one, which panel is on focus to be with a white border.

     

    Can I find out, which RowID is displayed?

     

    This is my Slide Code.

     

     

    <div id="TeaserContainer">
      <div id="TeaserArrowUp"><a href="#" onClick="sp1.showPreviousPanel();"><img src="../Slices/images/images/Arrow_04.png" border="0" /></a></div>
      <div id="TeaserArrowDown"><a href="#" onClick="sp1.showNextPanel();"><img src="../Slices/images/images/Arrow_03.png" border="0" /></a></div>
      <div spry:region="dsTeaser">
        <div spry:repeat="dsTeaser">
          <div id="TeaserThumbLink{ds_RowID}"><a href="#" onClick="sp1.showPanel('id{ds_RowID}');"><img src="{artistthumb}" width="60" height="40" border="0" /></a></div>
        </div>
      </div>
      <div id="slidingPanel_1" class="SlidingPanels" spry:region="dsTeaser">
        <div class="SlidingPanelsContentGroup">
          <div id="id{ds_RowID}" class="SlidingPanelsContent" spry:repeat="dsTeaser">
            <div class="TeaserLeft"><img src="{artistimage}" width="450" height="300" /></div>
            <div class="TeaserRight">
              <h1>{artistname}</h1>
              <p>Genre: {artistgenre}<br />
                Gründungsjahr: {artistyear}<br />
                Heimatort: {artistort}<br />
                Besetzung: {artistmembers}<br />
                <a href="#" class="TeaserLink">...mehr über dem Künstler</a></p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script language="javascript" type="text/javascript">
       var sp1 = new Spry.Widget.SlidingPanels("slidingPanel_1");
    </script>


    These lines create the thumbs:

     

     

    <div spry:region="dsTeaser">
        <div spry:repeat="dsTeaser">
          <div id="TeaserThumbLink{ds_RowID}"><a href="#" onClick="sp1.showPanel('id{ds_RowID}');"><img src="{artistthumb}" width="60" height="40" border="0" /></a></div>
        </div>
      </div>


    But what spry tag shows me which panel is on focus?

     

     

    Thanks a lot,

    Denis

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 13, 2009 7:34 AM   in reply to DenisCGN

    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 }
     
    |
    Mark as:
  • Currently Being Moderated
    Aug 14, 2009 12:51 AM   in reply to Arnout Kazemier

    HI Arnout,

     

    to insert the JS code you say just from line 121, so that means put it between 120 AND 121 to make the code bigger, or should I overwrite something?

     

    Denis

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 14, 2009 1:00 AM   in reply to DenisCGN

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 14, 2009 1:23 AM   in reply to Arnout Kazemier

    :-)

     

    So this starts at line 121 and ends at line 153.

     

    the next line will be something like : Spry.Widget.SlidingPanels.prototype.getElement = function(ele) at line 155.

     

    I delete that code and put your code right there in that place between 121 and 153?

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 14, 2009 1:27 AM   in reply to DenisCGN

    Yup

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 14, 2009 5:38 AM   in reply to DenisCGN

    DenisCGN wrote:

     

    Hi Arnout,

     

    thanks a lot.

     

    Is it somehow possible, to ad an third direction?

     

    "FORWARD and BACKWARD"

     

    It starts forward comes to the end and goes back step by step and then starts forward again :-)

     

    like:  1 2 3 4 5 4 3 2 1 2 3 4 5 4 and so on.

     

    I gonna try your code NOW :-)

     

    Cheers

    Denis

     

    Done, update Spry.Widget.SlidingPanels.prototype.start with the new function i specified below

     

     

    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){
                             
                             // set the correct panel index based on the direction
                             self.direction == 1 ? (i++) : (i--);
                             
                             // check if we want to do 1 2 3 2 1 .. looping instead of 1 2 3 1 2 3 ..
                             if(self.backAndForth){
                                  if(self.direction == 1 && i >= (panelcount -1)){
                                       self.direction = 0;     // reset the direction
                                       i = panelcount;
                                  } else if(self.direction == 0 && i == 0) {
                                       self.direction = 1; // reset direction
                                       i = 0;
                                  }
                             }                         
                             self.showPanel( self.direction == 1 ? (i >= panelcount ? 0 : i) : (i < 0 ? panelcount -1 : i));
                             
                             break; // stop looping, we already found and are displaying our new panel
                        }
                   }
         }, this.each || 3000);
    };
    

     

     

    This will add another option to your construction.

     

    - backAndForth:  true / false  [Boolean] false by default.

    It makes your panels slide like this: 1 2 3 4 5 4 3 2 1 2 3 4 5 4 3 2 1 2 3 4 5 4 3 2 1 2 3 .. you get the drill

     

    So, I think its all done now , this just shows you can virtually do anything you want with Spry and Spry Widgets as long you know where to look for.

     

    Working samples: https://dl.getdropbox.com/u/1381492/slidingpanels%20automatic/SprySlid ingPanels.html

     

    Temporarily online, just for laughs and giggles to show all the possibility and to show how it works and could be implemented..

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 14, 2009 6:25 AM   in reply to Arnout Kazemier

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 14, 2009 7:48 AM   in reply to DenisCGN

    I checked out SprySldingPanels.js and none of my changes are found in your file.

     

    So i would suggest, to redo them again ;D

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 14, 2009 8:01 AM   in reply to Arnout Kazemier

    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

    Attachments:
     
    |
    Mark as:
  • Currently Being Moderated
    Aug 14, 2009 10:20 AM   in reply to DenisCGN

    Its because you don't attach your SlidingPanel when your region gets regenerated.

     

    Apply the same techniques as they do in the Spry Accordion sample:

     

    http://labs.adobe.com/technologies/spry/samples/accordion/AccordionSam ple2.html

     

     

    var sp1; // place it outside the scope so you can still it through javascript
     
    Spry.Data.Region.addObserver("Teaser", {
         onPostUpdate: function(observer, region){
              sp1 = new Spry.Widget.SlidingPanels(region.regionNode, {automatic: true, direction: 1, each: 5000, backAndForth: true});
         }
    });
     
     
     
    

    That would do;

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 14, 2009 11:26 AM   in reply to Arnout Kazemier

    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

     
    |
    Mark as:
  • Currently Being Moderated
    Aug 14, 2009 1:14 PM   in reply to DenisCGN

    me again!

     

    I cant get that thing with the BORDERED Thumbs to work. I copied, the CODE and tried to figure out, how and where to put code.

     

    But now, the thumbs are gone and the slideshow stops :-(

     

    Its really hard to find out things if everything is only in english. I sometimes dont even know how and where to start. Like that OBSERVER thing, how should I know that :-)

     

    The best would be, if Adobe creates more, widgets.

     

    Now I open a beer and enjoy my working slider.

     

     

    Again, thanks a lot.

    Denis

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 14, 2009 2:10 AM   in reply to Arnout Kazemier

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 14, 2009 1:12 PM   in reply to jahflasher

    Its not nessesary but I remember again why i put it in there. I used it as reference. So you can also use Spry.Forward and Spry.Backward from the SpryEffects to define your sliding panel directions, just a handy extra that is build in. To make it more readable . Its not needed to make script work.

     

     

    The /js?f=effects is custom file combiner application i have written for Spry, it takes all specified files, and combines it in to one file with the correct license header. It can be prefixed with Spry or with out. In this case its points to the latest Spry version and gets a minified SpryEffects file. /js?f=1.6.1/effect would point to a specific version and /js?f=1.6.1/xpath/dataset/nestedxmldataset would combine multiple files.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 14, 2009 2:47 PM   in reply to Arnout Kazemier

    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.

     
    |
    Mark as:
  • Currently Being Moderated
    Sep 15, 2009 11:40 AM   in reply to jahflasher

    Its not needed. Its only added to the page because you can use the Spry.forward (that is included in the SpryEffects) to use as directions. But its not needed to use the script.

     
    |
    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