Help making my horizontal scrollbar scrolling smoother

So I got this horizontal 100% width scroll bar for a site I'm making, but my client wants the scrolling to be smoother but still maintain the same speed or there abouts, so I guess as close to the default scroll bar smoothness/speed as possible. I tried editing the two attributes in the code to make it smoother and it usually just makes it move a bit smoother, but it goes faster or it goes slower and not as smooth, I can't get a good in between for the speed/smoothness. So if you have any ideas on how I could achieve it somehow, lemme know please!

Here's a link to the scroller in action -
http://www.oryphoto.com/children-photography.html

Here's the js code for the scroller. If you need anything else, lemme know.

$(function(){
            
            // Slider
            $('#sliderA').slider({
               change: handleChange,
               slide: handleSlide,
               step:1,
               min:0,
               max:100
            });
            
            function handleChange(e, ui) {
                     var maxScroll = $("#scrollerPete").attr("scrollWidth") - $("#scrollerPete").width();
                      $("#scrollerPete").animate({ scrollLeft: ui.value *(maxScroll / 100)}, 100);
                }

                function handleSlide(e, ui) {
                    var maxScroll = $("#scrollerPete").attr("scrollWidth") - $("#scrollerPete").width();
                    $("#scrollerPete").attr({ scrollLeft: ui.value * (maxScroll / 100)   });
                }
         
            
            //hover states on the static widgets
            $('#dialog_link, ul#icons li').hover(
               function() { $(this).addClass('ui-state-hover'); },
               function() { $(this).removeClass('ui-state-hover'); }
            );
            
                            // scrolls the slider to the right
                function scrollWindowRight() {
                    var slideValue;
                    slideValue = $("#sliderA").slider("value"); // current value of the slider
                    if(slideValue >= 0 && slideValue < 100) // if within range allow the scroll
                    {
                        // if the mouse is down continue (right mouse)
                        if(ismousedown_right == 1)
                        {
                            // move the slider by 1, this can be tweaked for better movement
                            $("#sliderA").slider("value", slideValue + 1);
                           
                            // set a timout so this function calls itselft in 100 milliseconds
                            setTimeout(scrollWindowRight, 100);
                        }
                    }
                }
               
                // scrolls the slider to the right
                function scrollWindowLeft() {
                    var slideValue;
                    slideValue = $("#sliderA").slider("value"); // current value of the slider
                    if(slideValue > 0 && slideValue <= 100) // if within range allow the scroll
                    {
                        // if the mouse is down continue (left mouse)
                        if(ismousedown_left == 1)
                        {
                            // move the slider by 1, this can be tweaked for better movement
                            $("#sliderA").slider("value", slideValue - 1);
                           
                            // set a timout so this function calls itselft in 100 milliseconds
                            setTimeout(scrollWindowLeft, 100);
                        }
                    }
                }
               
                // flags used to loop and move slider
                var ismousedown_left=0; // default to false
                var ismousedown_right=0; // default to false
     
                  // handle the mouse down event
                  $('a.left').mousedown(function(){
                    // set to 1 so the slider continues to move
                    ismousedown_left=1;
                    // call the scroller left function to scroll the slider
                    scrollWindowLeft();
                  });
                 
                  // handle the mouse up event
                  $('a.left').mouseup(function(){
                    // reset to 0 so the slider stops moving
                    ismousedown_left=0;
                  });
                 
                  // handle the mouse down event
                  $('a.right').mousedown(function(){
                    // set to 1 so the slider continues to move
                    ismousedown_right=1;
                    // call the scroller right function to scroll the slider
                    scrollWindowRight();
                  });
                 
                  // handle the mouse up event
                  $('a.right').mouseup(function(){
                    // reset to 0 so the slider stops moving
                    ismousedown_right=0;
                  });
         });
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

• Topic Participants

• peter