Question

I have a content scroller based on the great work at flowplayer. This has a left navigation panel with buttons that each scroll content across to the right place. I have put a slider in place beneath the content that also scrolls content back and forth. I would like the scroller and slider to interact so that when I click one of the left navigation buttons the slider at the bottom moves across also.
E.g. if there are four buttons and I click the second one then the slider moves across a quarter of the way.

See my demo here:
http://www.dinosaurus.com.au/clients/slidertest/test2/

Code:

$(document).ready(function() {

// main horizontal scroll
$("#main").scrollable({

// basic settings
vertical: false, 

// up/down keys will always control this scrollable
keyboard: 'static',

// assign left/right keys to the actively viewed scrollable
onSeek: function(event, i) {
    horizontal.eq(i).data("scrollable").focus();
}

// main navigator (thumbnail images)
}).navigator("#main_navi");

// vertical scrollables. each one is circular and has its own navigator instance
var vertical = $(".scrollable").scrollable({

circular: true,

// basic settings
vertical: true

}).navigator(".navi");

// when page loads setup keyboard focus on the first vertical scrollable
vertical.eq(0).data("scrollable").focus();

});

// **this is the bottom scroller <- need it to interact with the $("#main").scrollable() function above**
$(function() {

//vars
var conveyor = $("#pages", $("#wrapper")),
item = $(".page", $("#wrapper"));

//set length of conveyor
//conveyor.css("width", item.length * parseInt(item.css("width")) +20 );

//config
var sliderOpts = {
  max: (item.length * parseInt(item.css("width"))) - parseInt($("#main",$("#wrapper")).css("width")),
  slide: function(e, ui) { 
    conveyor.css("left", "-" + ui.value + "px");
  }
};

//create slider
$("#slider").slider(sliderOpts);

});

Please view the source code for the page structure. The query calls are at the bottom.

Thank you for your help in advance.

Answer 1

You can use the value option inside the ‘scrollable’.’onSeek’ event – there is a bit math with the logic you are using…