Custom Scroller is Choppy. Suggestions for code approach?

Custom Scroller is Choppy. Suggestions for code approach?

Hi all.
I am making a scrollbar. It simply calculates the percentage it has moved within its width and then moves the larger object the same percentage of ITS width. Standard scroller logic I would presume.

I think the issue is WHEN I choose to run the function that moves the larger element. Could you look at the code I posted at the URL below and see if you would do anything different?

I will also post the snippet relative to this one function here.

Here is the page:

Here is the code snippet:

  1. $(window).load(function () {
  2.                       
  3.          function rw_setPortfolioPos(scroll_button_new_posPassed){
  4.              
  5.          //width of full portfolio wrapper
  6.  var port_wrapper_width = document.getElementById("portfolio_wrapper").offsetWidth;
  7.        
  8.  //width of scroll wrapper
  9.  var scroll_wrapper_width = document.getElementById("scroller_wrapper").offsetWidth;
  10.        
  11.  //location of scroll wrapper (left edge default)
  12.  var scroll_wrapper_pos = document.getElementById("scroller_wrapper").offsetLeft;
  13.          
  14.  //distance scroll button is from scroll wrapper left edge
  15.  var scroll_button_distance = Math.abs((scroll_wrapper_pos - scroll_button_new_posPassed));
  17.           //calc this distance with width of scroll wrapper to get perc moved
  18.  var scroll_percentage = scroll_button_distance/scroll_wrapper_width;

  20.           //now move portfolio wrapper the same perc
  21.  var port_distance_to_move = (scroll_percentage*port_wrapper_width)*-1;
  22.               
  23.  $('#portfolio_wrapper').css({
  24.                                 left: port_distance_to_move + 'px',         
  25.                    });
  26.        
  28.  }
  29.                                         
  30.                                         
  31.                                         
  32.            //THIS GATHERS ALL OF THE INFORMATION FROM THE DIV
  33.             $('#portfolio_scroller_button').click(function(){
  34.                                                 var myTarget = $(this);
  35.                                                 var myWidth = myTarget.width();
  36.                                                 var myHeight = myTarget.height();
  37.                                                 var myPosition = myTarget.position();
  38.                                                 var finalLeftPosition = myPosition.left;
  39.                                                 var finalTopPosition = myPosition.top;    
  40.                                                 break;   
  41.              });
  42.                                 

  44.       $('#portfolio_scroller_button').mousedown(function() {
  45.                                         
  46.                     $(document).bind('mousemove',function(e){ 
  47.                                 var rw_mouseXPos = e.pageX; 
  48.                                
  49.                                 $('#portfolio_scroller_button_div').css({
  50.                                             left: rw_mouseXPos + 'px',
  51.                                  });
  52.                     });
  53.  
  54. //location of scroller button when moved 
  55. var scroll_button_new_pos =          document.getElementById("portfolio_scroller_button_div").offsetLeft;
//THIS IS WHERE I AM EXECUTING THE FUNCTION
  1. rw_setPortfolioPos(scroll_button_new_pos);
  1.                                 
  2.                                 });
  3.                                 
  4.                                 
  5.                                 $(document).mouseup(function() {
  6.                                         $(document).unbind('mousemove');
  7. alert("unbound " + scroll_button_new_pos);
  8.                                 });

  10. });//END WINDOW LOAD FUNCTION

I'm not sure if the number of calculations for MOUSEMOVE is causing the issue?
Perhaps I need to place the call to rw_setPortfolioPos() at a different point in the order of execution?
Maybe I should use a totally different approach for tracking the position of the scroll button?

Thanks for your help. I tried to clean the code as best as I could above.
Rich






    • Topic Participants

    • rwood