{"id":779,"date":"2010-06-10T14:49:19","date_gmt":"2010-06-10T13:49:19","guid":{"rendered":"http:\/\/www.simonbattersby.com\/blog\/?page_id=779"},"modified":"2014-03-04T12:27:23","modified_gmt":"2014-03-04T12:27:23","slug":"vertical-scrollbar-using-jquery-ui-slider","status":"publish","type":"page","link":"https:\/\/www.simonbattersby.com\/blog\/vertical-scrollbar-using-jquery-ui-slider\/","title":{"rendered":"Vertical scrollbar using jQuery UI slider"},"content":{"rendered":"

Also available as a jQuery plugin<\/a>.<\/p>\r\n

Here’s my attempt at using jQuery UI Slider as a vertical scrollbar. I began this in 2010 by adapting the code on the jQuery UI site<\/a> for a horizontal slider. This worked, but seemed unnecessarily complex, so I had another go, starting from the vertical slider<\/a> code. Since then I’ve had numerous requests for different variations on the basic scrollbar, and these are all now incorporated into a single piece of code.<\/p>\r\n\r\n

The code assumes a div with fixed height (#scroll-pane<\/code> or .scroll-pane<\/code> in my examples) which contains the content for scrolling. The script wraps the contents of the div to be scrolled in another div (.scroll-content<\/code>) which is used positioned absolutely, and then the top<\/code> value of #scroll-content<\/code> is changed via the slider to make the content scroll up and down. The scrollbar itself is positioned within #scroll-pane<\/code>, using absolute positioning on the right hand side, but it can go anywhere you like.<\/p>\r\n\r\n

There’s a fundamental aspect of the way the vertical slider works which took me a little time to get my head round, and that’s that the slider as a default starts from zero at the bottom and increases upwards – which is the wrong way round for a vertical scroller, hence the need for a bit of extra calculation.<\/p>\r\n\r\n

So, here’s the css:<\/p>\r\n

#scroll-pane,.scroll-pane{position:relative}\r\n.scroll-content {position:absolute;top:0;left:0}\r\n.slider-wrap{position:absolute;right:0;top:0;background-color:lightgrey;width:20px;border-left:1px solid gray;}\r\n.slider-vertical{position:relative;height:100%}\r\n.ui-slider-handle{width:20px;height:10px;margin:0 auto;background-color:darkgray;display:block;position:absolute}\r\n.ui-slider-handle img{border:none}\r\n.scrollbar-top{position:absolute;top:0;}\r\n.scrollbar-bottom{position:absolute;bottom:0;}\r\n.scrollbar-grip{position:absolute;top:50%;margin-top:-6px;}\r\n.ui-slider-range{position:absolute;width:100%;background-color:lightgrey}\r\n<\/pre>\r\n\r\n
and here’s the javascript. For convenience I’ve wrapped all the code needed for all the different variations below into one function called setSlider()<\/code>.<\/p>\r\n
function setSlider($scrollpane){\/\/$scrollpane is the div to be scrolled\r\n<\/span>\t\r\n\t\/\/set options for handle image - amend this to true or false as required\r\n<\/span>\tvar handleImage = false;\r\n\t\r\n\t\/\/change the main div to overflow-hidden as we can use the slider now\r\n<\/span>\t$scrollpane.css('overflow','hidden');\r\n\t\r\n\t\/\/if it's not already there, wrap an extra div around the scrollpane so we can use the mousewheel later\r\n<\/span>\tif ($scrollpane.parent('.scroll-container').length==0) $scrollpane.wrap('<\\div class=\"scroll-container\"> \/');\r\n\t\/\/and again, if it's not there, wrap a div around the contents of the scrollpane to allow the scrolling\r\n<\/span>\tif ($scrollpane.find('.scroll-content').length==0) $scrollpane.children().wrapAll('<\\div class=\"scroll-content\"> \/');\r\n\t\r\n\t\/\/compare the height of the scroll content to the scroll pane to see if we need a scrollbar\r\n<\/span>\tvar difference = $scrollpane.find('.scroll-content').height()-$scrollpane.height();\/\/eg it's 200px longer \r\n<\/span>\t$scrollpane.data('difference',difference); \r\n\t\r\n\tif(difference<=0 && $scrollpane.find('.slider-wrap').length>0)\/\/scrollbar exists but is no longer required\r\n<\/span>\t{\r\n\t\t$scrollpane.find('.slider-wrap').remove();\/\/remove the scrollbar\r\n<\/span>\t\t$scrollpane.find('.scroll-content').css({top:0});\/\/and reset the top position\r\n<\/span>\t}\r\n\t\r\n\tif(difference>0)\/\/if the scrollbar is needed, set it up...\r\n<\/span>\t{\r\n\t\tvar proportion = difference \/ $scrollpane.find('.scroll-content').height();\/\/eg 200px\/500px\r\n<\/span>\t\t\r\n\t\tvar handleHeight = Math.round((1-proportion)*$scrollpane.height());\/\/set the proportional height - round it to make sure everything adds up correctly later on\r\n<\/span>\t\thandleHeight -= handleHeight%2; \r\n\t\t\r\n\t\t\/\/if the slider has already been set up and this function is called again, we may need to set the position of the slider handle\r\n<\/span>\t\tvar contentposition = $scrollpane.find('.scroll-content').position();\t\r\n\t\tvar sliderInitial = 100*(1-Math.abs(contentposition.top)\/difference);\r\n\t\t\r\n\t\tif($scrollpane.find('.slider-wrap').length==0)\/\/if the slider-wrap doesn't exist, insert it and set the initial value\r\n<\/span>\t\t{\r\n\t\t\t$scrollpane.append('<\\div class=\"slider-wrap\"><\\div class=\"slider-vertical\"><\\\/div><\\\/div>');\/\/append the necessary divs so they're only there if needed\r\n<\/span>                        sliderInitial = 100;\r\n\t\t}\r\n\t\t\r\n\t\t$scrollpane.find('.slider-wrap').height($scrollpane.height());\/\/set the height of the slider bar to that of the scroll pane\r\n<\/span>\t\t\r\n\t\t\/\/set up the slider \r\n<\/span>\t\t$scrollpane.find('.slider-vertical').slider({\r\n\t\t\torientation: 'vertical',\r\n\t\t\tmin: 0,\r\n\t\t\tmax: 100,\r\n\t\t\trange:'min',\r\n\t\t\tvalue: sliderInitial,\r\n\t\t\tslide: function(event, ui) {\r\n\t\t\t\tvar topValue = -((100-ui.value)*difference\/100);\r\n\t\t\t\t$scrollpane.find('.scroll-content').css({top:topValue});\/\/move the top up (negative value) by the percentage the slider has been moved times the difference in height\r\n<\/span>\t\t\t\t$('ui-slider-range').height(ui.value+'%');\/\/set the height of the range element\r\n<\/span>\t\t\t},\r\n\t\t\tchange: function(event, ui) {\r\n\t\t\t\tvar topValue = -((100-ui.value)*($scrollpane.find('.scroll-content').height()-$scrollpane.height())\/100);\/\/recalculate the difference on change\r\n<\/span>\t\t\t\t$scrollpane.find('.scroll-content').css({top:topValue});\/\/move the top up (negative value) by the percentage the slider has been moved times the difference in height\r\n<\/span>\t\t\t\t$('ui-slider-range').height(ui.value+'%');\r\n\t\t  }\t  \r\n\t\t});\r\n\t\t\r\n\t\t\/\/set the handle height and bottom margin so the middle of the handle is in line with the slider\r\n<\/span>\t\t$scrollpane.find(\".ui-slider-handle\").css({height:handleHeight,'margin-bottom':-0.5*handleHeight});\r\n\t\tvar origSliderHeight = $scrollpane.height();\/\/read the original slider height\r\n<\/span>\t\tvar sliderHeight = origSliderHeight - handleHeight ;\/\/the height through which the handle can move needs to be the original height minus the handle height\r\n<\/span>\t\tvar sliderMargin =  (origSliderHeight - sliderHeight)*0.5;\/\/so the slider needs to have both top and bottom margins equal to half the difference\r\n<\/span>\t\t$scrollpane.find(\".ui-slider\").css({height:sliderHeight,'margin-top':sliderMargin});\/\/set the slider height and margins\r\n<\/span>\t\t$scrollpane.find(\".ui-slider-range\").css({bottom:-sliderMargin});\/\/position the slider-range div at the top of the slider container\r\n<\/span>\t\t\r\n\t\t\/\/if required create elements to hold the images for the scrollbar handle\r\n<\/span>\t\tif (handleImage){\r\n\t\t\t$(\".ui-slider-handle\").append('<img class=\"scrollbar-top\" src=\"\/images\/misc\/scrollbar-handle-top.png\"\/>');\r\n\t\t\t$(\".ui-slider-handle\").append('<img class=\"scrollbar-bottom\" src=\"\/images\/misc\/scrollbar-handle-bottom.png\"\/>');\r\n\t\t\t$(\".ui-slider-handle\").append('<img class=\"scrollbar-grip\" src=\"\/images\/misc\/scrollbar-handle-grip.png\"\/>');\r\n\t\t}\r\n\t}\/\/end if\r\n<\/span>\t\t \r\n\t\/\/code for clicks on the scrollbar outside the slider\r\n<\/span>\t$(\".ui-slider\").click(function(event){\/\/stop any clicks on the slider propagating through to the code below\r\n<\/span>\t\tevent.stopPropagation();\r\n\t});\r\n\t   \r\n\t$(\".slider-wrap\").click(function(event){\/\/clicks on the wrap outside the slider range\r\n<\/span>\t\tvar offsetTop = $(this).offset().top;\/\/read the offset of the scroll pane\r\n<\/span>\t\tvar clickValue = (event.pageY-offsetTop)*100\/$(this).height();\/\/find the click point, subtract the offset, and calculate percentage of the slider clicked\r\n<\/span>\t\t$(this).find(\".slider-vertical\").slider(\"value\", 100-clickValue);\/\/set the new value of the slider\r\n<\/span>\t}); \r\n\t\r\n\t\t \r\n\t\/\/additional code for mousewheel\r\n<\/span>\tif($.fn.mousewheel){\t\t\r\n\t\r\n\t\t$scrollpane.parent().unmousewheel();\/\/remove any previously attached mousewheel events\r\n<\/span>\t\t$scrollpane.parent().mousewheel(function(event, delta){\r\n\t\t\t\r\n\t\t\tvar speed = Math.round(5000\/$scrollpane.data('difference'));\r\n\t\t\tif (speed <1) speed = 1;\r\n\t\t\tif (speed >100) speed = 100;\r\n\t\r\n\t\t\tvar sliderVal = $(this).find(\".slider-vertical\").slider(\"value\");\/\/read current value of the slider\r\n<\/span>\t\t\t\r\n\t\t\tsliderVal += (delta*speed);\/\/increment the current value\r\n<\/span>\t \r\n\t\t\t$(this).find(\".slider-vertical\").slider(\"value\", sliderVal);\/\/and set the new value of the slider\r\n<\/span>\t\t\t\r\n\t\t\tevent.preventDefault();\/\/stop any default behaviour\r\n<\/span>\t\t});\r\n\t\t\r\n\t}\r\n\t\r\n}<\/pre>\r\n\r\n
I’ve tested this on: IE6, IE7, IE8, FF3.6, Safari 4, Chrome and Opera9\/10\/11 on Win\/XP; IE8, IE9, FF9\/10, Opera 11, Safari 5 and Chrome on W7; FF7, Epiphany and Chromium on Ubuntu; and Safari 5 on Mac OS X\/Snow Leopard. See the demos below for various applications and uses.<\/p>\r\n
Help! It doesn’t work<\/h3>\r\n
If you hit problems, start off by looking at my beginners’ guide to debugging jquery<\/a>. Most of the problems encountered by users are listed here.<\/p>\r\n\r\n
\r\n
Demos<\/h3>\r\n\r\n
Basic scrollbar: Demo<\/a><\/h4>\r\n
\r\n
setSlider($('#myElement'));<\/pre>\r\n<\/div>\r\n\r\n
Multiple scrollbars: Demo<\/a><\/h4>\r\n
\r\n
$('.myElementClass').each(function(){\r\n\tsetSlider($(this));\r\n});<\/pre>\r\n
Originally added after these two<\/a> questions<\/a> within days of each other.<\/p>\r\n<\/div>\r\n\r\n
Changing the contents after load: add or remove content within the scrolled element Demo<\/a><\/h4>\r\n
\r\n
setSlider($('#myElement'));\r\n\r\nfunction changeContent{\/\/do whatever you want....\r\n<\/span>...code to change content....\r\nsetSlider($('#myElement'));\/\/call the function again to reset the slider for the new content\r\n<\/span>}<\/pre>\r\n
Originally in response to this comment<\/a>, the slider code will check for the existence of a slider, remove it if it’s no longer required (or establish it if it’s newly required), and aslso set the slider position to match any previous scroll point.<\/p>\r\n<\/div>\r\n\r\n
Scrollbar resizes with window: Demo<\/a><\/h4>\r\n
\r\n
setSlider($('#myElement'));\r\n\r\n$(window).resize(function() {\r\n\tsetSlider($('#myElement'));\r\n});<\/pre>\r\n
originally in response to  Igor’s comment<\/a>, this supports a percentage height .scroll-pane<\/code> and resizes with the viewport resize. Again, the solution is to call setSlider()<\/code> on a window resize event.<\/p><\/div>\r\n\r\n
Scrollbar on a div that’s originally hidden 
Demo<\/a><\/h4>\r\n
\r\n
setSlider($('#myElement'));\r\n\r\n\/\/code to set an initial scrolled position\r\n<\/span>var position = $(\"#targetElement\").position();\/\/find the position of the required item\r\n<\/span>var topValue = position.top;\/\/extract the top value\r\n<\/span>var sliderValue = 100-(100*topValue\/($(\".scroll-content\").height()-$(\"#scroll-pane\").height()));\/\/calculate the percentage of the top of the required item\r\n<\/span>$(\".slider-vertical\").slider(\"value\", sliderValue);\/\/and set the new value of the slider<\/pre>\r\n<\/div>\r\n\r\n
Autocomplete: scroll to an item selected from a database Demo<\/a> Fuller explanation<\/a><\/h4>\r\n
\r\n
setSlider($('#myElement'));\r\n\/\/autocomplete\r\n<\/span>var difference = $(\".scroll-content\").height()-$(\"myElement\").height(); \r\n$(\"#quickfind\").autocomplete({\r\n\tsource: \"get_descriptions.php\",\r\n\tminLength: 2,\/\/search after two characters\r\n<\/span>\tselect: function(event,ui){\r\n\t\tposition = $(\".scroll-content-item:contains(\"+ui.item.value+\")\").position();\/\/search for a div containing the selected description and read its position\r\n<\/span>\t\t\r\n\t\tvar topValue = -(position.top);\/\/content top is just the negative of the top position\r\n<\/span>\t\t\r\n\t\tif (topValue>0) topValue = 0;\/\/stop the content scrolling down too much\r\n<\/span>\t\tif (Math.abs(topValue)>difference) topValue = (-1)*difference;\/\/stop the content scrolling up too much\r\n<\/span>\t\r\n\t\tsliderVal = (100+(topValue*100\/difference));\/\/calculate the slider position from the content position\r\n<\/span>\t\t$(\".slider-vertical\").slider(\"value\", sliderVal);\/\/set the slider position\r\n<\/span>\t\t}\r\n});<\/pre>\r\n
Originally in response to Dan’s comment<\/a>.<\/p>\r\n<\/div>\r\n\r\n\r\n
Scroll automatically on load: have the element scrolling without user input Demo<\/a><\/h4>\r\n
\r\n
setSlider($('#myElement'));\r\n\r\nvar scrollId = setInterval('scrollDown()', 60);\/\/ start the autoscroll via a function\r\n<\/span>\r\n$(\".ui-slider-handle\").mouseover(function(){\/\/stop the autoscroll if the handle is hovered\r\n<\/span>    clearInterval(scrollId);\r\n});\r\n\r\nfunction scrollDown(){\r\n\tif ($(\".slider-vertical\").slider(\"value\")>0){\/\/if it's not at the bottom, scroll down\r\n<\/span>\t\t$(\".slider-vertical\").slider(\"value\",$(\".slider-vertical\").slider(\"value\")-1);\r\n\t}\r\n}<\/pre>\t\r\n
Originally in response to this comment<\/a>. Can’t quite see the application of this one either…<\/p>\r\n<\/div>\r\n\r\n
Scrolling with buttons: Demo<\/a><\/h4>\r\n
\r\n
setSlider($('#myElement'));\r\n\r\n$('#arrow_up').mousedown(function(event) {\r\n\tif(event.preventDefault) event.preventDefault();\r\n    intervalId = setInterval('scrollUp()', 30);\r\n\t$(this).bind('mouseup mouseleave', function() {\r\n\t\tclearInterval(intervalId);\r\n\t});\r\n});\r\n$('#arrow_down').mousedown(function(event) {\r\n\tif(event.preventDefault) event.preventDefault();\r\n    intervalId = setInterval('scrollDown()', 30);\r\n\t$(this).bind('mouseup mouseleave', function() {\r\n\t\tclearInterval(intervalId);\r\n\t});\r\n});\r\n\r\nfunction scrollUp(){\r\n\tif ($(\".slider-vertical\").slider(\"value\")<100){\/\/if it's not at the top, scroll up\r\n<\/span>\t\t$(\".slider-vertical\").slider(\"value\",$(\".slider-vertical\").slider(\"value\")+1);\r\n\t}\r\n}\r\nfunction scrollDown(){\r\n\tif ($(\".slider-vertical\").slider(\"value\")>0){\/\/if it's not at the bottom, scroll down\r\n<\/span>\t\t$(\".slider-vertical\").slider(\"value\",$(\".slider-vertical\").slider(\"value\")-1);\r\n\t}\r\n}<\/pre>\r\n
#arrow_up<\/code> and #arrow_down<\/code> are the ids for the arrow buttons, although you’d probably guessed that…Originally in response to this comment<\/a>. Dick pointed out<\/a> that if you try and drag the scrolling buttons it can occasionally cause the scroller to break. I couldn’t recreate this at all, but added some code to prevent the buttons being dragged, which Dick confirms fixes the problem.<\/p>\r\n<\/div>\r\n\r\n
Scrolling to anchors: Demo<\/a><\/h4>\r\n
\r\n
setSlider($('#scroll-pane'));\r\n\r\n$('#anchors a').click(function(){\r\n\r\n\tvar difference = $('.scroll-content').height()-$('#scroll-pane').height();\/\/calculate the difference - not needed if within the main slider code\r\n<\/span>\t\r\n\tvar targetclass = ($(this).attr('class'));\/\/read the class of the clicked anchor\r\n<\/span>    \r\n\tvar position = $(\".scroll-content .\"+targetclass).position();\/\/search for a div with matching class and read its position\r\n<\/span>    var topValue = -(position.top);\/\/content top is just the negative of the top position\r\n<\/span>\t\t\r\n\tif (topValue>0) topValue = 0;\/\/stop the content scrolling down too much\r\n<\/span>\tif (Math.abs(topValue)>difference) topValue = (-1)*difference;\/\/stop the content scrolling up too much\r\n<\/span>\r\n\tsliderVal = (100+(topValue*100\/difference));\/\/calculate the slider position from the content position\r\n<\/span>\t$(\".slider-vertical\").slider(\"value\", sliderVal);\/\/set the slider position\r\n<\/span>\t\r\n\treturn false;\r\n});<\/pre>\r\n
This assumes markup where the anchors are assigned a class which is also added to the ‘target’ scroll point within the div. View source for the details.<\/p>\r\n<\/div>\r\n\r\n
Easing: animate the slider using easing Demo<\/a><\/h4>\r\n
\r\n
Had a couple of comments asking about easing. It doesn’t work well with the code as it is, because the bar scrolls at every mouse move. However, if the slider code is changed to call the animation on the change<\/code> event instead of the slide<\/code> event, then it is possible, although the scrolled content will not move until the slider is stopped. I don’t care for this one at all, although it does work better with anchors<\/a>.<\/p> \r\n
Note that this (the only demo that) uses a different version of setSlider(), where the slider is instantiated via:.<\/p>\r\n
   \/\/set up the slider \r\n<\/span>   $scrollpane.find('.slider-vertical').slider({\r\n      orientation: 'vertical',\r\n      min: 0,\r\n      max: 100,\r\n\t  range:'min',\r\n      value: sliderInitial,\r\n      change: function(event, ui) {\r\n\t\t\t var topValue = -((100-ui.value)*difference\/100);\r\n\t\t\t $scrollpane.find('.scroll-content').animate({top:topValue},animateSpeed,easingMethod<\/span>);\/\/move the top up (negative value) by the percentage the slider has been moved times the difference in height\r\n<\/span>\t\t\t $('ui-slider-range').height(ui.value+'%');\r\n\t  }\t  \r\n   });<\/pre>\r\n\r\n
You need to set the variables animateSpeed<\/code> and easingMethod<\/code>, of course, and include the easing plugin.<\/p>\r\n<\/div>\r\n\r\n
Shopping cart: with jQuery UI draggable\/droppable Demo<\/a><\/h4>\r\n
\r\n
setSlider($('#myElement'));\r\n$('.item').draggable({appendTo:'body',helper:'clone'});\r\n$('#droppable').droppable({\r\n\tdrop:function(event,ui){\r\n\t\t$( this ).find( \"#placeholder\" ).remove();\r\n\t\tvar description = ui.draggable.find('p').text();\r\n\t\t$( \"<\\li><\\\/li>\" ).text(description).appendTo( $('#droppable ul') );\r\n\t}\r\n});<\/pre>\r\n
originally in response to Juan’s comment<\/a>, minimal droppable code to to allow dragging from the scrolling div and dropping into a basket.<\/p>\r\n<\/div>\r\n\r\n
Autohide scrollbar: so it’s displayed only on hover Demo<\/a><\/h4>\r\n
\r\n
setSlider($('#myElement'));\r\n$(\".slider-wrap\").hide();\r\n$(\"#myElement\").hover(function(){\r\n\t$(\".slider-wrap\").show();\r\n\t},\r\n\tfunction(){\r\n\t$(\".slider-wrap\").hide();\r\n});<\/pre>\r\n
Robert<\/a> asked about an autohide function. I really don’t like it…<\/p>\r\n<\/div>\r\n\r\n
Styling the handle Demo<\/a><\/h4>\r\n
\r\n
setSlider($('#myElement'));<\/pre>\r\n
plus these settings within setSlider()<\/code>:<\/p>\r\n
function setSlider($scrollpane){\/\/$scrollpane is the div to be scrolled\r\n<\/span>\t\r\n\t\/\/set options for handle image - amend this to true or false as required\r\n<\/span>\tvar handleImage = true<\/span>;\r\n         \r\n        ...\r\n\r\n\tif (handleImage){\/\/change the image paths as required for your images - delete any that are not required if you want\r\n<\/span>\t\t$(\".ui-slider-handle\").append('<img class=\"scrollbar-top\" src=\"\/images\/misc\/scrollbar-handle-top.png<\/span>\"\/>');\t\t\t\r\n                $(\".ui-slider-handle\").append('<img class=\"scrollbar-bottom\" src=\"\/images\/misc\/scrollbar-handle-bottom.png<\/span>\"\/>');\r\n\t\t$(\".ui-slider-handle\").append('<img class=\"scrollbar-grip\" src=\"\/images\/misc\/scrollbar-handle-grip.png<\/span>\"\/>');\r\n\t}\r\n\r\n        ...<\/pre>\r\n
and this addtional css<\/p>\r\n
.ui-slider-handle{background:transparent url(\/images\/misc\/scrollbar-handle-middle.png) repeat-y top left;}<\/pre>\r\n
In order to make this example bulletproof, I’ve used four images (!) – one each for the top and bottom of the handle, one for the white ‘grip’ in the middle, and one for the rest set via the css. Although this feels a bit over the top it works for a scrollbar of any length. In order to do this the code optionally appends three images into the scrollbar handle html after instantiating the slider.<\/p>\r\n<\/div>\r\n\r\n
Styling the scrollbar Demo<\/a><\/h4>\r\n
\r\n
This is just an additional piece of css:<\/p>\r\n
.slider-wrap{background-color:#EA9531;}<\/pre>\r\n
Originally in response to this question<\/a> this allows one side of the scrollbar to extend – easier to view than describe.The slider already adds an extra element .ui-slider-range<\/code> which in the standard css is coloured the same as the scrollbar background – so it’s just a question of changing one of these. IE6 does odd things during the scroll though, which I can’t fix, suggestions welcome.<\/p><\/div>\r\n\r\n\r\n<\/div>\r\n\r\n
\r\n
Changelog<\/h3>\r\n
6 March 2012 – consolidated all variations to use standard code<\/h4>\r\n
Mostly in order to make keeping these things up to date a bit easier, I’ve consolidated all the different variants to use a single version of code, which supports everything. There’s no real change to the mechanics of the slider, just how it’s packaged up. Also tidied up two bits of ancillary code, specifically on the scrolling with buttons example.<\/p><\/div>\r\n
28 February 2012 – upgrade to jQuery\/UI\/mousewheel<\/h4>\r\n
I’ve upgraded all the demos to use jQuery 1.7.1, jQuery UI 1.8.14 and Mousewheel 3.0.6. At the same time I’ve wrapped the mousewheel code in a conditional to stop any errors if the mousewheel plugin is not loaded, and amended the mousewheel code so that it copes better with variances in the scrolled content – the previous code resulted in a 5% vertical shift on a mousewheel rotate – this now varies dependent on the difference in size between the scrolling element and its content.<\/p>\r\n<\/div>\r\n
10 January 2012 – tweaks to mousewheel code<\/h4>\r\n
I’ve amended the mousewheel code in three examples where the slider set up may be called more than once, as previously repeated calling of the code resulted in very fast mousewheel scrolling. Examples affected are Add Content<\/a>, Window Resize<\/a> and Hidden Divs<\/a>.<\/p>\r\n<\/div>\r\n
9 November 2011 – packaged as a plugin<\/h4>\r\n
Finally packaged this up as a plugin<\/a>.<\/p><\/div>\r\n
1 March 2011 – improved handling of clicks outside handle and mousewheel<\/h4>\r\n
In the process of sorting out the Opera issues below, I’ve made a couple of improvements. Previously, clicks beyond the handle, and beyond the actual slider (which is less high than #slider-wrap<\/code> to accommodate the handle) weren’t handled very well, and didn’t work in IE. They do now, by looking at the point at which the click was made and moving the slider appropriately. This replaces the changes made 16 January 2011. I’ve also simplified the mousewheel code to move #scroll-content<\/code> from the slider by using the change<\/code> option – see the code above, which replaces original code added 4 August 2010. These changes are now applied to all the demos.<\/p><\/div>\r\n\r\n
27 February 2011 – amendments for Opera 11 issues<\/h4>\r\n
Following a contact from a user reporting difficulties with Opera 11 when resizing the scroll content, I have amended the demos for both this and for the multiple slider. Opera 11 doesn’t like the scrollbar being absolutely positioned, it seems, so all demos are now updated to position the scrollbar differently. This doesn’t significantly affect the javascript. This wasn’t an issue with Opera 9 or Opera 10. Makes a change from IE messing things up I suppose…<\/p><\/div>\r\n\r\n
16 January 2011 – handle clicks at top and bottom of the scrollbar correctly<\/h4>\r\n
Ohm-ish points out<\/a> that clicks on the top and bottom of the scrollbar, outside the handle, do not result in a scroll. This is because the slider range is restricted to less than the total height of the scrollbar to allow the handle to fit in.<\/p>\r\n
Attempts to use the whole height of the slider work, but then the scrollbar handles doesn’t track the mouse correctly. Experimentation shows that adding .ui-slider-range<\/code> sorts clicks above the slider range – this needs the following css:<\/p>\r\n\r\n
.ui-slider-range{position:absolute;width:100%}<\/pre>\r\n\r\n
and I’ve then added a little jQuery to cope with clicks below the slider range:<\/p>\r\n\r\n
\/\/position the slider range div at the top of the slider wrap - this ensures clicks above the area through which the handle moves are OK\r\n<\/span>$(\".ui-slider-range\").css({top:-sliderMargin});\r\n\r\n\/\/add a click function to ensure clicks below the area through which the handle moves are OK\r\n<\/span>$(\"#slider-wrap\").click(function(){\/\/this means the bottom of the slider beyond the slider range is clicked, so move the slider right down\r\n<\/span>   $(\"#slider-vertical\").slider(\"value\", 0);\r\n   $('#scroll-content').css({top:-difference});   \r\n})<\/pre>\r\n\r\n
This has now been added to all the demos and the code shown above.<\/p><\/div>\r\n\r\n
15 November 2010 – ensure the handle height margins are correct<\/h4>\r\n
Thanks to Thom<\/a> for a suggested addition to ensure the handle height is exactly divisible by two. Without this, browsers other than FF show a 1px gap under the slider handle when it’s at the bottom of the slide.<\/p><\/div>\r\n\r\n
8 November 2010 – allow for the scrollbar not being required<\/h4>\r\n
Following Jorge’s question<\/a> below, I’ve amended the code slightly so that the slider is only added if it’s needed (if the height of #scroll-content<\/code> is greater than the height of #scroll-pane<\/code>), and as part of this added the necessary html for the scroller via jQuery. I’ve also added a line so the height of the scrollbar is set to the height of #scroll-pane<\/code>.<\/p><\/div>\r\n\r\n
8 September 2010 – mouse and scrollbar synced correctly<\/h4>\r\n
Following Rob’s comment (#5 below)<\/a> I’ve amended both the css and javascript to fix a problem where the mouse and scrollbar weren’t in sync. Both the code on this page and the demo are updated.<\/p><\/div>\r\n\r\n
4 August 2010 – mousewheel integration<\/h4>\r\n
Following Yves’ comment below<\/a> I thought I’d have a go with adding mousewheel functionality as well. I used Brandon Aaron’s mousewheel plugin<\/a>.<\/p>\r\n\r\n
Then I’ve added the following additional javascript:<\/p>\r\n\r\n
\r\n$(\"document\").mousewheel(function(event, delta){\r\n\r\n     var speed = 5;\/\/set the speed of the scroll\r\n<\/span>     var sliderVal = $(\"#slider-vertical\").slider(\"value\");\/\/read current value of the slider\r\n<\/span>\t\t\r\n     sliderVal += (delta*speed);\/\/increment the current value\r\n<\/span> \r\n     $(\"#slider-vertical\").slider(\"value\", sliderVal);\/\/and set the new value of the slider\r\n<\/span>\t\t\r\n     var topValue = -((100-sliderVal)*difference\/100);\/\/calculate the content top from the slider position\r\n<\/span>\t\t\r\n     if (topValue>0) topValue = 0;\/\/stop the content scrolling down too much\r\n<\/span>     if (Math.abs(topValue)>difference) topValue = (-1)*difference;\/\/stop the content scrolling up too much\r\n<\/span>\t\t\r\n     $(\"#scroll-content\").css({top:topValue});\/\/move the content to the new position\r\n<\/span>\r\n     event.preventDefault();\/\/stop any default behaviour\r\n<\/span>\r\n});<\/pre>\r\n\r\n
I’ve kept this code separate from the rest so you can use it as required. It’s included in the demo page<\/a>. The mousewheel works anywhere on the page on the demo – to restrict it to operate only on the scrolling div itself the opening statement would be amended to:<\/p>\r\n\r\n
$(\"#scroll-pane,#slider-wrap\").mousewheel(function(event, delta){...etc<\/pre>\r\n<\/div>\r\n<\/div>\r\n\r\n
Can I use this on my site?<\/h3>\r\n
Probably. See my policies on using code from this site<\/a>.<\/p>\r\n
Please don’t link directly to the javascript on my site. Due to the number of hits on my bandwidth because people were doing this I’ve had to deny direct access to javascript files. Use a CDN like Google’s instead.<\/p>\r\n
Touch screens:<\/strong> As it stands, this will not work with touch screens as jQuery UI does not itself support touch events. I have done only limited testing, but TouchPunch<\/a> seems to work on an iPad and iPhone, but not on earlier Android devices. See here<\/a> for some limited testing results – please let me know of anything you have to add to this.<\/p>\r\n\r\n