jQuery Forum

Hello everyone,

This is my first post as I'm quite new to jQuery, but have managed to get jplayer customized and running.

The problem I'm having is that the volume and progress bar sliders do no move smoothly when dragging the handle. The handle graphic appears to jump around and look awful. Any help that can be offered would be much appreciated, as I need to get this player working up to snuff ASAP.

The page can be viewed at http://sturly.com/aui8

And here is the js used for the player.

$(function(){

   var global_lp = 0;

   $("#jquery_jplayer").jPlayer({
      ready: function ()
      {
         $(this).setFile('http://www.miaowmusic.com/mp3/Miaow-05-The-separation.mp3').play();
         showPauseBtn();
         
      }
   })
   .onProgressChange( function(lp,ppr,ppa,pt,tt) {
      var lpInt = parseInt(lp);
      var ppaInt = parseInt(ppa);
      global_lp = lpInt;

      $('#loaderBar').progressbar('option', 'value', lpInt);
      $('#sliderPlayback').slider('option', 'value', ppaInt);
   })
   .onSoundComplete( function() {
      $(this).play();
   });

   $("#pause").hide();

   function showPauseBtn()
   {
      $("#play").fadeOut(function(){
         $("#pause").fadeIn();
      });
   }

   function showPlayBtn()
   {
      $("#pause").fadeOut(function(){
         $("#play").fadeIn();
      });
   }

   function playTrack(t,n)
   {
      $("#jquery_jplayer").setFile(t).play();
      showPauseBtn();
      return false;
   }

   $("#play").click(function() {
      $("#jquery_jplayer").play();
      showPauseBtn();
      return false;
   });

   $("#pause").click(function() {
      $("#jquery_jplayer").pause();
      showPlayBtn();
      return false;
   });

   $("#stop").click(function() {
      $("#jquery_jplayer").stop();
      showPlayBtn();
      return false;
   });


   $("#volume-min").click( function() {
      $('#jquery_jplayer').volume(0);
      $('#sliderVolume').slider('option', 'value', 0);
      return false;
   });

   $("#volume-max").click( function() {
      $('#jquery_jplayer').volume(100);
      $('#sliderVolume').slider('option', 'value', 100);
      return false;
   });

   $("#player_progress_ctrl_bar a").live( "click", function() {
      $("#jquery_jplayer").playHead(this.id.substring(3)*(100.0/global_lp));
      return false;
   });

   // Slider
   $('#sliderPlayback').slider({
      max: 100,
      range: 'min',
      animate: true,
      slide: function(event, ui)
      {
         $("#jquery_jplayer").playHead(ui.value*(100.0/global_lp));
      }
   });

   $('#sliderVolume').slider({
      value : 50,
      max: 100,
      range: 'min',
      animate: true,
      slide: function(event, ui)
      {
         $("#jquery_jplayer").volume(ui.value);
      }
   });

   $('#loaderBar').progressbar();


   //hover states on the static widgets
   $('#dialog_link, ul#icons li').hover(
      function() { $(this).addClass('ui-state-hover'); },
      function() { $(this).removeClass('ui-state-hover'); }
   );

});