Using jQuery Slider to Scroll a Div

Your link to the "demo sler aspplication files" does not work.

How do I get a copy of your slider code?

Thanks.

Thanks a lot for the cool code. This is one of few jQuery scrollers I have found that actually works smoothly in all browsers. Well done!

Now I am trying to change the scroll-handle to be an icon instead. Wish me good luck.

Tomas

What if you only have 3 content-items and have all this extra white space?

Is there something that can be tweaked with the coding to scroll to the length of the last div?

Very useful JQuery script.

Great app. How do I make it scroll down instead of to the left? I feel like I've changed all the css to do this. But I'm not certain where to start with the jQuery scripts.

Thx

is there a way to use this script but to not have to set the width of the container div (content-holder). I would like to use the scroller for a site running off of a cms - so I can't preset the width because the amount of content will be changeable.

The code works, thanks for your blog.

Hi, great script! thank you! I w as wondering if you could tell me how to get the slider bar centered under the box? I've shortened it but it aligns on the left. Would love to have it centered.

Thanks, -Chris

Thanks for the tutorial!

When you refresh the page, the div content doesn’t start back at the starting point to the left like the handle does. Is there a way to make this happen?

Also, is there a way to make the slider snap to step points while retaining the smooth scrolling effect?

@mark: assuming all the content-item divs are equal width, you can make it work without knowing the exact width of the content holder. What I did was calculate the amount of child divs in the content holder. Then, since I knew the width of each content-item div i set \$(”#content-holder”).css(”width”, childWidth * amountOfChildren

My example is at http://static.spartaninternet.com/sandbox/

And is there any way to make it works if you don’t have javascript active?, i mean unobtrusive javascript.

Thanks in advance.

Sorry for the stupid question but how can I use this scroll for vertical content?

I have 50 “content-item” and scroll is very fast. How to reduce scroll speed

Great! helpful for us!!!!!!!!!!!!!!!

Hi! Great script...

I was just wondering how I might be able to make the scrolling action a bit smoother. Are there any options or plugins that might help make the scrollbar a bit more responsive and smooth?

Thanks!

Hi Fattest

great tutorial but does not work with latest build of jquery.

can you please amend it for new jquery i have tried many times but failed i hope you can get it to work with JQ1.3 above.

Regards Salman

Hi Fattest

Thanks mate for quick response, looking forward to it, i want to implement this idea into one of my apps so keenly waiting for the update.

also when i try to post a reply from google chrome i get an error saying

"Your hashcash string is not valid. Are you a spammer?"

Regards Salman

Wow

you guys are fast with responses i think javascript is enabled, can you disable javascript in chrome?

lets try to send this comment from chrome instead of fox

and what about the tutorial being compatible with JQ1.3

salman

Well guys its my 4th and final attempt to send comment and i have tried chrome, IE7, Firefox3 all said "you hascash is not valid are you a spamer".

fattest iam still waiting foe the tutorial to be updated for jq1.3

salman

It is not working properly with jquery v1.3.2 and 1.7.1. The content is moving but the handle remain fixed

Hi there,

I am using this script, making a portfolio, here is a snippet, explaining the problem:

bkinfo.bk.tudelft.nl/portfolio/websites/jvanommeren/Third%20website/slider_test.html#

the problem is that the slider only appears at the first loaded item.

I am pretty new to jquery, probably, I need to make some sort of generic piece of code, but I dont know how...

Thanx!

First, nice piece of code!

I have an interesting issue...I'm using this to scroll my news and everything works well in FF, Chrome and Safari, in IE however the floated item elements remain stationary when I scroll the div.

Any ideas why or how to fix?

My sandbox page: http://newsite.aquanode.com/news

Thanks in advance and again nice work.

Hi,

Nice work. How can i make it to scroll vertically instead of scrolling horizontal?

Thanks

leluch

Very nice work! I downloaded your slider_example which uses jquery 1.3.2 and ui 1.7.1. and tested it. It works fine when I drag the blue handle. However,if I click anywhere on a grey track, the content doesn't scroll /animate properly. Sometimes the content jumps without animation and sometime with animation.

I found a similar issue when I tried the tutorial I found below with jquery 1.3.2 and ui 1.7.1 http://jqueryfordesigners.com/slider-gallery/

I'll revisit your site to see if you find any solution to fix it. Thanks again :) !!!!

hi The Fattest. Thank you for your response. Did you get a chance to look and find a solution to the unsteady animation (when clicking the track)? I wonder if this is caused by a conflicting logic in the two callback functions ( slide and change) . For example, whenever the track is clicked, the handleSliderSlider function will always be executed before handleSliderChange function. The code in the handleSliderSlider function tells the content-scroll to move without animation. Then, the handleSliderChange tells content -scroll to move with animation BUT the content -scroll was already moved before.

Is there a way to stop handleSliderSlider from being executed when the track is clicked?

If my assumption makes sense, I wonder why this is not an issue in older jquery ui 1.2.x ( the demo embedded on this page shows a perfect smooth animation when clicking the track).

I'm new to jQuery but found your resource very useful. Thank you in advance!

hi again :) I found the answer that someone posted from http://jqueryfordesigners.com/slider-gallery/ and want to share.

//Using jQuery ui 1.7.2 the ui.slider.js: needs to be modified. from

var allowed = this._trigger("slide", event, {
    handle: this.handles[index],
    value: newVal
});

to

if(event.type   == 'mousemove') {
    var allowed = this._trigger("slide", event, {
        handle: this.handles[index],
        value: newVal
    });
}

This prevents the slide function from being triggered when clicking the slider ( track).

Hi to all and thanks for the cool code!!! I have this problem: http://89.186.66.71/dmanagement_ok/html/scroll/multimediaw.asp?mnome=megan

Anyone help me?

thanks

Bye

http://www.invisionblue.com/lab/scrollhorizontal/slider_test.html how come when I click the orange scroller it moves about 30-40 pixels to the right?

If I made the button smaller would that help? I've noticed on yours and some others it's thin and doesn't do that.

problem solved without changing the size. I simply removed the attribute "width: 66px;" and made it "padding: 5px 33px 5px 33px;" and it now works smoothly. So I suppose the width attribute was the problem here.

great work! I'm having a problem with using a background image on the handle. If I use a root-relative url, or a full url, it creates all kinds of problems in IE. Something like this doesn't work:

.ui-slider-handle{
background:url(http:www.foo.com/scrollbar/handle.gif);
}

but this works:

.ui-slider-handle{
background:url(scrollbar/handle.gif);
}

I need to use root-relative links in my site, but can't figure out why this is causing problems.

If you want a wide scrollbar you'll run into a couple issues, but I've found solutions.

If the scrollbar is wide it will align to the right of the mouse when you click the track, rather than ending on the center. This can be fixed by adding a right-margin to the handle that is the negative value of half the handle width. Example:

.ui-slider-handle {
width: 92px;
height: 12px;
position: absolute;
margin-left:-46px;
overflow:hidden;
}

The handle also hangs off either end of the track rather than ending at the end of the track like you would expect from a normal scrollbar. Fix this by subtracting the handle length from the track width and adding a margin to the left and right of the track equal to half the length of the handle.

To make the shortened track appear longer you'll need to add elements to either side matching the track background, or use a single element on a lower z-index below the track.

The make the left and right sides of the track go to the end, you can add buttons on a higher z-index above the slider. Here's an example: 

css:
[css]
#sliderLeftButton{
       position:relative;
       top:-36px;
       height:12px;
       width:56px;
       overflow:hidden;
}
#sliderRightButton{
       position:relative;
       top:-48px;
       left:912px;
       height:12px;
       width:56px;
       overflow:hidden;
}

html:

<div id="sliderLeftButton">
                <div style="height:12px; width:56px; display:block"  onClick="javascript:moveSlider(0);"></div>
      </div>
      <div id="sliderRightButton">
                <div style="height:12px; width:56px; display:block" onClick="javascript:moveSlider(100);"></div>
</div>

javascript:

function moveSlider(value){
    $('#content-slider').slider( 'value' , value );
}

This code isn't optimized, you can probably clean up the css some. I hope this was helpful.

Good evening friends

First, i want to congratulate you for the great job you're doing.

I've been having some troubles trying to put together the solution by increase the 8px size of ui-slider-handle to 40px. It actually increase but after move the slider to the end of the area it just fade away. Is there any solution for this problem? Thank you a lot for all your time, please let me know if you need extra information. I will appreciate so much your help, i don't know what else to do, i'm kind of desperate. Thank you friends. Best Wishes

Hello My friend,

The fattest, I actually did read the post from invisionblue but in my case it didn't work that solution 'cause setting the padding the size of the ui-slider-handle did increase but it keeps getting out of the boundaries at the end of the area. Thank you a lot my pal,. I really appreciate all the time you're putting on this! Best wishes

The next link: http://jd17ortiz.100free.com/slider_test.html has an example of what im trying to do, in the code i change the padding as the last comentary says but the slider keeps getting out of position

JD

hi dud, it really nice, but I cant able to use #content-scroll's width by %, because whole pages i m making with % only, if I give width by (px)It does not flow of design page. Please help.

Hey it working........ thk alot

Awesome, this really helped me out with something Ive been working on but I was hoping for help getting things to scroll vertically.

I changed orientation to vertical, and made the appropriate CSS changes butt the scroll bar wont work.

do I have to make changes to handleSliderChange and handleSliderSlide?

I changed the lines for max scroll values to:

var maxScroll = $(".content-scroll").attr("scrollHeight") - $(".content-scroll").height();

but do I have to change that "scrollLeft" on the next line too?

I've got few questions about that awsome slider.

?1. Is it hard to make it slowly move itself? I'm new with jQuery and even if it's piece of cake I won't figure it out myself.

?2. Is it possible to catch mouse wheel moves over it, and scroll it accordingly?

Thank you for any help

i'm sorry if this is double post or i missed it in description, but for me, it looks better if the speed of sliding content is calculated in same way and using same easing as slider animation when clicking on slider tray. Speed of animation is calculated by the distance of mouseclick from the handle. However its very nice example.

sry for poor english.

I am trying to do vertical scrolling too and I got the scroll to work except that the slider doesn't move/slide.

I changed the follow:

$(document).ready(function(){
  $("#content-slider").slider({
    animate: true,
    orientation: 'vertical',
    change: handleSliderChange,
    slide: handleSliderSlide
  });
});

function handleSliderChange(e, ui)
{
  var maxScroll = $("#content-scroll").attr("scrollHeight") - $("#content-scroll").height();
  $("#content-scroll").animate({scrollTop: ((100 - ui.value) * (maxScroll / 100))  }, 1000);
}

function handleSliderSlide(e, ui)
{
  var maxScroll = $("#content-scroll").attr("scrollHeight") - $("#content-scroll").height();
  $("#content-scroll").attr({scrollTop: ((100 - ui.value) * (maxScroll / 100)) });
}

Any idea how to make the slider handle to move? Thx a lot.

Anyone else having issues with skinning the handle in ui 1.7.2

for what ever reason it seems to be defaulting back to the stock handle and not allowing me to use my own skin for it.. :/

1.7.1 works fine, I would go back to 1.7.1 but I already am using 1.7.2 through out the site and I would like to stay up to date..

Hi, when i use the script it works fine, but when i click the slider handle there appears a little blue halo around it... anyone knows how to get rid of this?

Thanks

Hi there

My mouse moves off my slider as I scroll. The issue resulting from this is that my content don't scroll all the way

I've also modified my #content-slider and .ui-slider-handle a bit according to my needs

#content-slider
{
    width: 100%;
    background: #BBBBBB;
    position: relative;
}

.ui-slider-handle
{
    width: 2px;
    height: 40px;
    position: absolute;
    top: -4px;
    background: #ff0000;
    background-image:none;
}

good thakns

Thanks for these useful JQuery slider tips.

Don't overlook the ASP.NET Ajax slider, it can easily be swapped with JQuery slider and can make it easier and solve some common issues:

http://www.timacheson.com/Blog/2010/feb/ms_ajax_slider

Is there any way to get the slider to move to a set point on page load. The idea being when something is clicked in the slider and page reloads I can move the slider along so the item they clicked is showing on the left.

I Love it! Thank you! However, I have a mootools slideshow on the page I want to add this to and they will not work together. Do you know how I would use a NoConflict script to make them both work on 1 page? Thanks!

Awesome slider...

BUT...

When i download the .zip and open it in FF, there's an issue with the handle overlapping the div "content-holder". The distance is equal to the width of the handle.

The example on your site works PERFECTLY - but the demo .zip has the error in it.

Any ideas?

Very useful script, absolutely love it!

Just quoting one question posted before(anonymous 03/05/2010 - 19:21) which I think would be a nice feature to have: is there any way to change the starting point of the slider so that the handle and clicked scrolled item are in the middle when a new page loads?

hmm, tried out the example scroller above and it did not function at all (tried in Firefox 3.6.3 and Internet Explorer 7). Any idea why this isn't working for me? I certainly don't have Javascript turned off!

hey all

i've rewritten the whole thing to make the scrolling vertical...i've also wrapped it as a jQuery plugin so it can be easily evoked on multiple elements like e.g.:

$('div.slider-vertical').sliderVertical({height:100, width: 200});

<div class="slider-vertical">
    <div style="position:relative;">
Lorem ipsum dolor sit amet....
    </div>
</div>

the js code for the sliderVertical plugin is below.

However, the whole slider thingy doesn't work in IE 7 (not sure about the other IE versions just tested in IE 7 for now) when there are relative positioned elements inside the slider-vertical div...?!?

thanks sissi

(function($){

   var SliderVertical = function(element, o)
   {
       element = $(element);
       var obj = this;
       var s = $.extend({
          element: $(element),
          height: 300,
          width: 100, //needed if element is initially display:none
          heightContent: '',
          elSlider: '',
          elScroll: '',
          elHolder: ''
       }, o || {});

       //init
       this.init = function() {

        //getting height of element even if it's hidden initially
        $(element).clone().attr('id', 'sliderTempXXX').css({'position': 'absolute', 'top': 0, 'width': s.width, 'visibility': 'hidden'}).appendTo('body');
        s.heightContent = $('#sliderTempXXX').height();
        $('#sliderTempXXX').remove();

        //alert(s.heightContent + 'xxx' + s.height);

        if (s.heightContent > s.height) {

            $(element).append('<div class="content-slider">content slider</div>')
            .wrapInner('<div class="content-holder">')
            .wrapInner('<div class="content-scroll">');

            $(element).height(s.height).css({'padding-right': '22px', 'position': 'relative'})
            s.elSlider = $(element).find('.content-slider').height(s.height).css({'position': 'absolute', 'right':'2px', 'top':0, 'text-indent':'-9999px'});
            s.elScroll = $(element).find('.content-scroll').height(s.height).css({'overflow': 'hidden'});
            s.elHolder = $(element).find('.content-holder').height(s.heightContent);

            //alert($(element).html());

            function handleSliderChange(e, ui)
            {
              var maxScroll = $(s.elScroll).attr("scrollHeight") - $(s.elScroll).height();
              $(s.elScroll).animate({scrollTop:
              (100-ui.value) * (maxScroll / 100) }, 1000);
            }

            function handleSliderSlide(e, ui)
            {
              var maxScroll = $(s.elScroll).attr("scrollHeight") - $(s.elScroll).height();

              $(s.elScroll).attr({scrollTop:
              (100-ui.value) * (maxScroll / 100) });
            }

            $(s.elSlider).slider({
                animate: true,
                change: handleSliderChange,
                slide: handleSliderSlide,
                orientation: 'vertical',
                value: 100
            });
        }

       }

   };

  $.fn.sliderVertical = function(o)
   {
       return this.each(function()
       {

           var element = $(this);

           // Return early if this element already has a plugin instance
           if (element.data('sliderVertical')) return;

           // pass options to plugin constructor
           var sliderVertical = new SliderVertical(this, o);
           sliderVertical.init();

           // Store plugin object in this element's data
           element.data('sliderVertical', sliderVertical);


       });
   };
})(jQuery);

Hi to all and thanks for the great code. I have one problem and can't fix it. The slider dosn't work when I use it with an ipad or iphone. Have you got an idea how to fix it?

First thank you for the code.

Is there any way to get the div scrolling whith mouse wheel also? I mean both the slider and the mouse wheel being oprable.

Rodre

Hi,

Is there a way to add two extra buttons for back/next? Thank you.

Thanks a lot for great tut. One thing.....

How can I load the selected panel (not the first panel) at the load. I mean I want to start from second panel when loading for fist time. and the slider also should be at appropriate position.

Thanks in advance for any help and really sorry if I had asked a stupid question.

Great tutorial, this was a nice start for what I needed. I didn't want to have to alter the jQueryUI source to have a smooth scrolling div when clicking on the slider bar, so here's the modification I made:

var type;

$(".type-cat-slider").slider({
    animate: true,
    start: checkType,
    slide: doSlide,
    max: 750
});

function checkType(e){
    type = $(e.originalEvent.target).hasClass("ui-slider-handle") ? 'drag' : 'click';
}

function doSlide(e, ui){
    var parent = $(e.target).prev(".type-cat-scroll"),
    maxScroll = parent.attr("scrollWidth") - parent.width();

    if (type == 'drag')
        $(e.target).prev(".type-cat-scroll").attr({scrollLeft: ui.value * (maxScroll / 750) });
    else
        $(e.target).prev(".type-cat-scroll").animate({scrollLeft: ui.value * (maxScroll / 750) }, 400);

}

I use the 'start' event to determine whether the handle was clicked or not, which tells you if it's a handle drag or a click. Then, in the slide handler I specify whether to animate the scroll based on which type it is.

Also with using '\$(e.target).prev(".type-cat-scroll")' I can use this code on multiple sliders on the page without needing them to have unique IDs.

Example of the code correctly handling clicks vs. drags: http://i.imgur.com/Uks6O.gif

Thanks again!

#### EDIT ####

Adjusted code to fix a cross-browser problem. This solution works properly in IE, FF, Chrome, Opera and Safari.

@levilarsen

Yeah, I did a poor job of explaining how the code expects the HTML to be laid out a certain way, especially all those \$(e.target).prev()'s. The doSlide function in my example is pretty useless without some accompanying HTML. I think I'll write up a sample demo page and post the URL here, but for now if you email me (cnanney at gmail) I can send you to a working example to examine.

Thanks for the tutorial, very useful. I got this working fine however I get an annoying light blue box around the slider handle when I select it, which is odd because this does not appear on the example on this page. Is there a simple option to deactivate this ?

This is a great tutorial, but I do have one question. How do I increase the width of the scroll handle without causing it to move when you click on it? If I increase to 100px, and I click on it past the original 8px, the content slides without moving the scroll bar.

Love the script.

How can I use multiple instances of this scroller on same page?

Appreciate the help.

Hello,

I was wondering if it is possible to scroll from right to left instead from left to right. The reason for this is that I want the feel of a timeline. But when you load the page the most recent things must be showed (start the handle at the right). How can I achieve this without reversing the content?

thanks in advance

As a follow-up to my comment about having this functionality without having to update the jQueryUI source, here is a post explaining my solution:

http://bit.ly/gAgvdk

Is this scrollbar compatible with Coda-Slider 2.0 (http://www.ndoherty.biz/demos/coda-slider/2.0/) ???!!!

Hi there,

i would like to know, like others before, how not to have set the width of the container div (content-holder) Amy wrote: What I did was calculate the amount of child divs in the content holder. Then, since I knew the width of each content-item div i set \$(”#content-holder”).css(”width”, childWidth * amountOfChildren

Could anybody tell me where and how to implement it?

Thanks

If it is possible to make the scroll handle starts at the center, together with the content centered..

Can you help me do that. I'm a newbie in javascript.

Thanks in advance.

Hi I've adapted code to this helpfull jquery slider, but I have a problem. When I scroll many times with a left or right button one image in scroll bar disappears. I try to changed speed scroll, but the problem remain. I used another jquery file called jQuery Rawr zoom v1.0 - http://hungred.com/2009/04/07/javascript-framework-jquery/tutorial-jquery-effect-zoom/ to zoom images in slider. Later I put link to a test page to see that I try to explain here.

var speed = 800  //800
var delay = 2000    //2000
var size = 210 + 5 //210 + 5
var links, boxs, pointer, last, pic, numImgs, positions, i, with, n, step, stop

$(window).load(function(){
  // next
  $("#content_holder").find("span").append("<div class='content_item'><a class='content_item_l' href=''><img src='' height='140px' border='0'></a></div>")
  // previous
  $("#content_holder").find("span").append("<div class='content_item'><a class='content_item_l' href=''><img src='' height='140px' border='0'></a></div>")

  pic = $("#content_holder").find("img")
  numImgs = pic.length - 2 // pic[numImgs] save the next one and  pic[numImgs + 1] the previous one
  links = $("#content_holder").find("a")

  boxs = $("#content_holder").find(".content_item")

  $(pic[numImgs])[0].src = $(pic[0])[0].src
  $(pic[numImgs + 1])[0].src = $(pic[numImgs - 1])[0].src
  $(links[numImgs])[0].href = $(links[0])[0].href
  $(links[numImgs + 1])[0].href = $(links[numImgs - 1])[0].href

  positions = new Array(numImgs);
  for (i = 0; i < numImgs; i++) {
    with = 0
    for (n = 0; n < i; n++) {
      with += size
    }
    positions[i] = with
    $(boxs[i]).css("left", with)
  }
  positions[numImgs] = positions[numImgs - 1] + size
  $(boxs[numImgs]).css("left", positions[numImgs])

  positions[numImgs + 1] = -size
  $(boxs[numImgs + 1]).css("left", positions[numImgs + 1])

  pointer = 0


})

function change(d) {
  while (stop) {

  }

  d ? moveRight() : moveLeft()

}

function moveLeft() {  
  stop = 1
  // move the visible ones
  i = pointer
  do {
    positions[i] -= size
    $(boxs[i]).animate({left: positions[i]}, speed)
    i = (i + 1) % numImgs
  } while (i != pointer)

  // move the next one
  positions[numImgs] -= size
  $(boxs[numImgs]).animate({left: positions[numImgs]}, speed, function() {
    // and change the image
    $(pic[numImgs])[0].src = $(pic[pointer])[0].src
    $(links[numImgs])[0].href = $(links[pointer])[0].href
    positions[numImgs] = with + size
    $(boxs[numImgs]).animate({left: positions[numImgs]}, 0)
  })

  // the firts one becames the last one
  positions[pointer] = with
  $(boxs[pointer]).animate({left: positions[i]}, 0)

  // to change the previous one
  $(pic[numImgs + 1])[0].src = $(pic[pointer])[0].src
  $(links[numImgs + 1])[0].href = $(links[pointer])[0].href
  positions[numImgs + 1] = -size
  $(boxs[numImgs + 1]).animate({left: positions[numImgs + 1]}, 0)

  // to move the pointer
  pointer = (pointer + 1) % numImgs
  stop = 0
}

function moveRight() {
  stop = 1
  last = pointer ? pointer - 1 : numImgs - 1
  // to move the previous 
  positions[numImgs + 1] = 0
  $(boxs[numImgs + 1]).animate({left: positions[numImgs + 1]}, speed)

  //  to move the visible ones
  i = pointer
  do {
    positions[i] += size
    $(boxs[i]).animate({left: positions[i]}, speed)
    i = (i + 1) % numImgs
  } while (i != pointer)

  // to change the previous image
  $(pic[numImgs + 1])[0].src = $(pic[last])[0].src
  $(links[numImgs + 1])[0].href = $(links[last])[0].href
  positions[numImgs + 1] = -size
  $(boxs[numImgs + 1]).animate({left: positions[numImgs + 1]}, 0, function() {
    // la que era última pasa a ser primera 
    positions[last] = 0
    $(boxs[last]).animate({left: positions[last]}, 0)
  })

  // to change the next one
  $(pic[numImgs])[0].src = $(pic[last])[0].src
  $(links[numImgs])[0].href = $(links[last])[0].href
  positions[numImgs] = with + size
  $(boxs[numImgs]).animate({left: positions[numImgs]}, 0)

  // and move the pointer
  pointer = last
  stop = 0
}

nice collection of jquery slideshow. Thanks to sharing.

Hi, I have noticed the bug in IE9: - the scrollpane doesn't move when you click on it and try to move.

Any ideas how to fixit it?

Hi,

I have a problem. I have written some javascript to display the item of dropdown on dropdownclick in content-item div. But When I am clicking on this dropdown to show the items slider handle is disappering. Its again appearing only on page refresh. Is there any workaround for this?

Thanks in advance.

hola hay alguna manera para pueda deslizar el contenido, utilizando la rueda de scroll del mouse?...thanks

hi there a way to slide down the content, using the mouse scroll wheel? ... thanks

Yeah, I have spotted the bug in IE9 too, bummer

I'm using dynamic image sizes with these few lines.

var t = 0;
    $('#content-holder .content-item').each(function() {
        t += $(this).outerWidth(true);
    $('#content-holder').css('width', t + 20);

I noticed the bug in ie9 with ui 1.7.2. The change event of the slider gets called when you click on the slider and try to drag it, instead of when you let go. Looks like upgrading to the latest version 1.8.13 fixes this. I saw bug issue that had a fix for this problem in the ui.slider.js component. So they probably fixed it now in the latest jquery UI 1.8.13.

it does'nt worked in codeigniter

Finally I got this to work the way I want; then I started testing in IE9... :(

Anyone any idea how to fix this? I am not the most technical person though ;)

Hey,

the slider handle is not draggable on IE9. is there fixes for it?

thanks a lot for the script

Hi,

What's the best way for me to increase the size of the slide_handle without it sliding off the end of the track?

Regards

Craig

I really enjoy this slider and it worked for a design that I created for my personal site. I am having a problem with using the slider that has images and trying to load the images using fancybox. If I remover the jQuery JavaScript Library v1.3.2 from my page fancybox works fine, but then of course the slider does not work. Does anyone have any solution to fix this problem? I do not know that much jquery nor javascript and any input would be great!

Thanks, Sha.

hi This is a very nice script, thanks for sharing with us. Is it possible to show this slider only when needed meaning when the content does not fit in the browser window

thanks

To also allow manual move / toggle to automatic:

jQuery(document).ready(function() {
if ( jQuery('#slider-progress').length ) {
        jQuery("#slider-progress").slider({
            animate: "slow",
            change: handleSliderChange,
            slide: handleSliderSlide
        });
        prev_inc = 0;
        pauseTime = 2000;
        setTimeout ( "scrollSliderToRight( "+ pauseTime +", 1)", pauseTime );
    }
});

manualMove = 0;
function scrollSliderToRight( pauseTime, inc ) {
    if ( inc > prev_inc && inc < 11 && manualMove == 0 ) {
        prev_inc = inc;
        jQuery("#slider-progress").slider("value", 10*inc);
        inc+=1;
        setTimeout ( "scrollSliderToRight("+pauseTime+", "+inc+")", pauseTime );
    }
    else {
        if ( inc > prev_inc )
            inc-=1;
    }
    if ( inc <= prev_inc && inc >= 0 && manualMove == 0 ) {
        prev_inc = inc;
        jQuery("#slider-progress").slider("value", 10*inc);
        inc-=1;
        setTimeout ( "scrollSliderToRight("+pauseTime+", "+inc+")", pauseTime );
    } else {
        if ( inc <= prev_inc ) {
            setTimeout ( "scrollSliderToRight("+pauseTime+", 1)", pauseTime );
        }
    }
}

function handleSliderChange(e, ui) {
    var maxScroll = jQuery("#slider").attr("scrollWidth") - jQuery("#slider").width();
    jQuery("#slider").animate({scrollLeft: ui.value * (maxScroll / 100) }, 1000);
}

function handleSliderSlide(e, ui) {
    manualMove = 1;
    var maxScroll = jQuery("#slider").attr("scrollWidth") - jQuery("#slider").width();
    jQuery("#slider").scrollLeft(ui.value * (maxScroll / 100));
}

This works with jQuery 1.4.4 and UI 1.8.0. Unfortunately I haven't updated it to work with the latest jQuery, because I don't know why it doesn't. Something in the code? If anyone knows, please share.

Hi

I have just implemented your scroll bar into a website that I am building but I have got two issues. 1. when you click on the sllider to drag it, it shows a blue border. I have no border applied and don't know where this is happening to turn it off.

?2. is it possible to still use the mouse to scroll as well as the slider?

 #content-slider {
     width: 100%;
     cursor:pointer;
    height:1px;
   border-top:1px dashed #b3b3b3;
      position: relative;
 margin-top: 25px;
    }

    .ui-slider-handle {
    position:absolute;
    background-color:#fff;
    height:20px;
    width:80px;
    top:-12px;
    display:block;
    cursor:move;
    border: 0px;
    background-image:url(../images/move_me.gif)
    }

     .ui-slider-handle:active {
    border: 0px;
    background:#fff;
    background-image:url(../images/move_me.gif)
    }


    #content-scroll {
      width: 100%;
      height: 600px;
      overflow: hidden;
    }

    #content-holder {
      width: 9660px;
      height: 600px;
    }

    .content-item {
      width: 290px;
      height: 600px;
      padding: 5px;
      float: left;
  }

  #content-holder ul li {
    display: inline;
        height:600px;
    white-space: nowrap;
}

The website that i am working on is below

http://www.redrobyndesign.com/kerry/brand.htm

#main{ min-height:500px;

}

Does this work with photos and can you replace the slider graphic with something fancy - and if so, where and how? Thanks!

if(isset)

I got the slide work well and here is link http://www.tommycarl.com/justAnIdeaLinda/

The only issue I have is the slider will not slide on the iPad

Is there a way to position the starting point of the slider when a button is clicked?

Hi.. Thanks for sharing this information and resources it's really help full for me with the help of this we can improve our designs and development I really inspire with this information thanks

Nice Howto, but it does not work with jquery-1.6.2 Is ther another howto ?

hii, i am using this slider twise in jQuery tabs but only one at a time works can u please help me

Try to add to gridview results but the slider button will not show. Any one else had this issue.

Hi, Is there anyway to make this scrollbar auto sliding?

I fixed the example in this tutorial with new JQuery and JQuery-UI libraries and made a GitHub project:

https://github.com/keesschepers/jquery-ui-content-slider

If anyone has improvements please fork it :)

Example: http://keesschepers.nl/jquery-ui-content-slider/

A slider that works on iPhone and iPad. http://blog.egorkhmelev.com/2010/03/jquery-slider-update/

can i use it with the height?

Tested with new jQuery 1.7 and this example seems not working anymore. Will try to make it working tomorrow, but if the admin can glance at this before... :)

Hi there I was trying to apply your script to a website and worked fine, but now i have a problem. I'm using images that will be loaded from db and their height will be fixed but their width will be variable. It is possible to make it work this way? I tryed to change the css but stop working

Regards

Vitor Neves

Thanks

i cannot get the ui slider handle to appear, and the divs won't display horizontally, only vertically. I downloaded the example code and it was the same issue... any help?

I've got it working with jQuery 1.7.1 I am using the following code:

var nr_Pictures = 4;
        var width_Picture = 618;

        function handleSliderChange(e, ui) {
            var maxScroll = (width_Picture * nr_Pictures) - $("#content-scroll").width();
            $("#content-scroll").animate({ scrollLeft: ui.value * (maxScroll / 100) }, 1000);
        }

        function handleSliderSlide(e, ui) {
            var maxScroll = (width_Picture * nr_Pictures) - $("#content-scroll").width();
            $("#content-scroll").attr({ scrollLeft: ui.value * (maxScroll / 100) });
        }

i have replaced

$("#content-scroll").attr("scrollWidth")

with

width_Picture * nr_Pictures

which represents the total length of the DIV.

please take note! the pictures all have the same size, if this does not apply for you, create your own javascript logic and replace

(width_Picture * nr_Pictures)

with your own calculated width.

Thanks a mill for your script - really cool.

IE9 does not slide smoothly - any ideas why?

Hi,

Iam having a simple problem. Iam using jquery-1.7.1.min.js and query-ui-1.8.17. Basically, the content of the slider will not scroll while the user is sliding the slide handle, only after the user has finished sliding the handle and off clicked. The content does not scroll as you slide the handle, only after one is done scrolling the handle. Any ideas would be great. Just for note, when I included jquery-1.7 this plugin stopped working. I had to swap .attr("scrollWidth") with .prop("scrollWidth") to get it working again. Thanks

me again

I found the issue right after the last post. I also had to switch .attr({scrollTop: ui.value * (maxScroll / 100) }); to .prop({scrollTop: ui.value * (maxScroll / 100) });

Thanks

I want to add content via ajax when the scroller is at end (in right) means once the scroll reach at end in right then a ajax call should be occur and return html content and that html shoul append to the existing one.

Thanks

This is one excellent piece of jQuery goodness. Thank you very much. FYI: works is FF13 / Safari 5 / Opera 12. Not tested IE yet.

This is working great on my computer but doesn't work on an iphone/ipad. HAs anyone resolved how to do this?

Many thanks