Question

this is kinda tricky to explain,but here goes….I have multiple hidden divs that swap with one another when clicking a link using

$(document).ready(function(){
  $('a').click(function () {
    var divname= this.name;
    $("#"+divname).show("slow").siblings().hide("slow");
  });
});

I have also made a slider function which works great, but when the div changes the slider will not work. How can I get it to target the hidden div when they are called up? I assume its a variable thing?

this is my slider code

$(function() {
var scrollPane = $('#info'),
    scrollableHeight = scrollPane.height() - scrollPane.parent().height() || 0;

$("#slider-vertical").slider({
  orientation: "vertical",
  range: "max",
  min: 0,
  max: scrollableHeight,
  value: scrollableHeight,
  slide: function(event, ui) {
    scrollPane.css({top: ui.value - scrollableHeight});
  }
});

});

here is a working example to better understand…..please excuse the messy code

http://www.kerrydean.ca/tizzest.html#

thanks in advance

Answer 1

Your slider is only set to scroll the #info div when you set var scrollPane, and not your other two divs (#info2 and #info3). Instead give your all sliding divs a shared class, such as class="info" and set scrollPane like so:

var scrollPane = $('.info'),
    scrollableHeight = scrollPane.height() - scrollPane.parent().height() || 0;

Then make sure you set your slider to a default position when showing/hiding your divs:

$(document).ready(function(){
  $('a').click(function () {
    var divname= this.name;
    $("#"+divname).show("slow").siblings().hide("slow");

    // Reset slider to top
    var max = $("#slider-vertical").slider("option", "max);
    $("#slider-vertical").slider("value", max);
  });
});