Question

I have 3 jQuery Tools Scrollables setup. They work like a champ.
What I can’t seem to find or wrap my head around is how to make them “delay” their initial starting point before they start scrolling.

What I don’t want is for all 3 to scroll at the exact same time.

I want the left one to scroll immediately on load. Then the middle to start it’s first time scrolling 800 milliseconds later, and then the right one to start it’s first time scrolling 1600 milliseconds later.

Here’s what I got so far… fireDelay or just Delay or InitialDelay etc… seem not to work at all.

I’m using jQuery Plugins from this site. http://www.jquerytools.org/demos/scrollable/plugins.html It’s called “Scrollable Plugins in Action”. I’m using this Standalone View of it 3 times. http://www.jquerytools.org/demos/scrollable/plugins-navigator.htm I gave each one it’s own ID to allow it to work.

Thoughts or ideas appreciated!

    <!-- javascript coding -->
    <script type="text/javascript">
    $(document).ready(function() {

    // heeeeeeeeeeere we go.
    $("#chained1").scrollable({circular: true, mousewheel: false}).navigator().autoscroll({
    fireDelay: 800,
    interval: 3000
    });

    $("#chained2").scrollable({circular: true, mousewheel: false}).navigator().autoscroll({
    fireDelay: 1600,
    interval: 3000
    });

    $("#chained3").scrollable({circular: true, mousewheel: false}).navigator().autoscroll({
    fireDelay: 3200,
    interval: 3000
    });

    });
    </script>

Answer 1

There is no fireDelay property in that plugin, but JavaScript counts with setTimeout and clearTimeout functions which you can use.

$.fn.timeout = function(fn, delay){
  var self = this;
  setTimeout(function(){
    self.each(function(){
      fn.call(this);
    });
  }, delay);
  return this;
};

Set autoplay to false, and then call .play() whenever you want to start it.

$("#chained1")
  .scrollable({
    circular: true,
    mousewheel: false
  })
  .navigator()
  .autoscroll({
    interval: 3000,
    autoplay: false
  })
  .timeout(function(){
    $(this).data("scrollable").play();
  }, 800);​