4

I am looking to implement horizontal scrolling using jQuery.SerialScroll (based on jQuery.ScrollTo).

I currently have a continuous horizontal scrolling working with liScroll as I discuss in this post.

However, now I need discrete scrolling and I have SerialScroll working perfectly for vertical scrolling.

For some reason, if the 'axis' property is specified as 'x' nothing happens.

I can't even get the SerialScroll example for right to left scrolling to work.

I have HTML like this:

<div id="pane">
   <div>Item 1</div>
   <div>Item 2</div>
   <div>Item 3</div>
</div>

I have jQuery like this, that works when axis is 'y'

 jQuery(function($) {
      var $pane = $('#pane');
      $pane.serialScroll({
          items: 'div',
          next: $pane, // the container itself will get bound
          duration: 2100,
          force: true,
          axis: 'x',
          step: 1, //scroll 1 news each time
          event: 'showNext' //just a random event name
       });

       setInterval(function() {//scroll each 12 seconds
          $pane.trigger('showNext');
       }, 12000);
   });

Any ideas?

//Edit (answer accepted)

For those that come along, the accepted answer gets rid of the need for "serialScroll" (just need scrollTo). Heights weren't required. Be sure to change $('scroller') to something like $('mywrap') or $(target.parent().parent()). You can also set up automatic scrolling like this:

 var index = 2;

 setInterval(function() {//scroll each 5 seconds
 index = index > $('#news ul li').length ? 1 : index;
  sliderScroll($('#news ul li:nth-child(' + index + ')'));
  index ++;
 }, 5000);

replacing #news ul li to your appropriate selector.

1 Answer 1

11

I was recently working with scrollTo to implement a Coda-like slider wizard.

Here's the steps I took:

  1. Set a containing div to the dimensions I wanted the slider to appear as. overflow:auto; helps for testing, but you'll probably want to use overflow:hidden in the end.
  2. Inside that place another div, make it big enough to hold all your elements horizontally.
  3. Float the panels. give them explicit dimensions.

My CSS:

.scroller{
  position: relative;
  overflow: hidden;
  height: 410px;
  width: 787px;}
  .modal-content{width: 3400px;}
    .modal-content div{float:left; width:728px; height: 405px; padding: 0 30px;} 

My JS:

function sliderScroll(target){
  if(target.length <1)return false;
  $(".current").removeClass("current");
  target.addClass("current");
  $(".scroller").scrollTo(target,500,{axis:'x'});
  return false;
}

My HTML:

<div class="scroller">
  <div class="modal-content">
     <div>...</div>
     ...
  </div>
</div>
1
  • Great! - For those interested please see my edits in the question for some minor modifications. Apr 28, 2010 at 6:40

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.