Vertical Custom Scrollbars with JqueryTools RangeInput

Question

I am attempting to replace the browser's native scroll-bar using the rangeinput function of JqueryTools.

Here is the example page: http://conceptionkit.co.uk/ck/support

The page has multiple scrollable divs with the following html structure:

<div class="scrollwrap"><!-- scrollwrap doesn't move and has overflow:hidden -->

   <div class="scroll"><!- this is the scrollable pane --></div>

    <!-- this is the rangecontrol that is converted into a 
                            vertical scrollbar by the script -->
   <input class="hide" type="range" max="300" step="1" />

</div>

For a single instance on the page the following code works:

var scroll = jQuery(".scroll");

// initialize rangeinput
jQuery(":range").rangeinput({

  // slide the DIV along with the range using jQuery css() method
  onSlide: function(ev, step)  { scroll.css({bottom: -step});},

  // display progressbar
  progress: true,

  // initial value. also sets the DIV initial scroll position
  value: 100,

  // this is called when the slider is clicked. we animate the DIV
  change: function(e, i) { scroll.animate({bottom: -i}, "fast");},

  // disable drag handle animation when when slider is clicked
  speed: 0
}); 

However, when I try to generalize the script, it doesn't work. I think the problem is having multiple instances of the variable named "scroll". Maybe they are conflicting?

Here is my attempt at a script to put scrollbars on all the scrollwrap instances on the page. Since I have to correlate each rangeinput to the correct pane, it iterates over the jQuery(".scrollwrap").each() and finds the scroll pane and the range control in each one:

// default style for .scroll is overflow:auto for no-js browsers.
// must turn that off first
jQuery(".scroll").css('overflow','hidden');

jQuery(".scrollwrap").css('overflow','hidden').each(function(index){

    // Inject range control element
    jQuery(this).append('<input class="hide" type="range" max="300" step="1" />');

    var scroll = jQuery(".scroll",this);

    // initialize rangeinput
    jQuery(":range", this).rangeinput({

      // slide the DIV along with the range using jQuery css() method
      onSlide: function(ev, step)  { scroll.css({top: -step});},

      // display progressbar
      progress: true,

      // initial value. also sets the DIV initial scroll position
      value: 100,

      // this is called when the slider is clicked. we animate the DIV
      change: function(e, i) { scroll.animate({top: -i}, "fast");},

      // disable drag handle animation when when slider is clicked
      speed: 0
    });             

});

The script above doesn't generate any errors, it does create the slider control, but moving the slide does not move the related .scroll div.

What am I doing wrong here?

Answer 1

The javascript code above was actually working, the problem was css. Here is the necessary css to make it work. Note: this css sets the .scroll divs to use the browser's scrollbar by default. If js is on, then we will change the styles to make it work.

    .scrollwrap, .panes > div.scrollwrap {
        position:relative;
        overflow:hidden;
        padding-right:50px;
        height:250px;
    }

    .scroll {
        height:250px;
        overflow:auto;
        position:relative;
        width:610px;
    }

/* height is now larger than width  */
.slider {
    background:#ccc; 
    cursor:pointer;
    border:none;
    margin-top:10px;
    border-radius:5px; 
    height:220px;
    width:9px;
    margin:0 0 0 60px;

    position:absolute;
    right:18px;
    top:10px;
}

    /* tweak drag handle position */
.handle {
    background:#09C; 
    height:28px;
    width:8px;
    position:absolute; 
    display:block; 
    margin-top:1px;
    cursor:move;
    border-radius:3px;
    box-shdow:2px 0px 2px rgba(0,0,0,0.5);

    top:0;
    left:1px;       
}

/* position progressbar on the bottom edge */
.progress {
        width:9px; 
        position:absolute;
        bottom:0;   
}

Here are the important elements:

1. The .scrollwrap div must have a set height, and overflow hidden, and it must have position (either relative or absolute). This is the "window" you are peering through to see the scrolling div behind it.

2. The .scroll div must have position (relative or absolute), and initially you set it to have a set height and overflow:auto so it will work with javascript turned off.

3. Once your script loads, the first thing you do is change the properties on .scroll so that height:auto and overflow:hidden. This will force the div to take its full length.

Here is the revised Initialize script that works for me:

jQuery(".scrollwrap").each(function(index){

    var scroll = jQuery(".scroll",this);

    vheight = scroll.css({overflow:'hidden', height:'auto'}).height();

        // Inject range control element
        jQuery(this).append(
               '<input class="hide" type="range" max="' + vheight + '" step="' 
                  + (vheight/220) + '" />');

        // initialize rangeinput
        jQuery(":range", this).rangeinput({

          // slide the DIV along with the range using jQuery css() method
          onSlide: function(ev, step)  { scroll.css({top: step});},

          // display progressbar
          progress: true,

          // initial value. also sets the DIV initial scroll position
          value: 0,

          // this is called when the slider is clicked. we animate the DIV
          change: function(e, i) { scroll.animate({top: i}, "fast");},

          // disable drag handle animation when when slider is clicked
          speed: 0
        });             

});

Note: I am still having trouble with using the vheight var to measure the height of the slide in order to correctly scale the scrollbar. If the content has not completely loaded, or if javascript it populating the slide container, say with an accordion of variable height, this method seems to miscalculate the height. It needs to be queued to run last.

Also, I am dividing vheight by 220 which is the height of the slider element, in order to get the step size.

It would also be good to attach a function to the div if the size changes to recalculate the height and then update the scrollbar accordingly.

I will post improvements as I work them out.