Search code examples
progress-barseekbarjplayerdirection

change progressbar and seekbar directon of jplayer to rtl instead of ltl


I am using jplayer for one of the arabic site which plays arabic song. They need progress bar should go from right to left and also they should seek from right to left. I added the

.jp-progress
{
direction:rtl
}

But only progress bar is coming from right to left but seek bar is same as before. I dont know where to edit on javascript.


Solution

  • on seekbar function instead of

     x = e.pageX - offset.left
    

    Replace with

     x = (($bar.offset().left + $bar.outerWidth())-e.pageX); // to get right offset
    

    New code will be

    seekBar: function(e) { // Handles clicks on the seekBar
     if(this.css.jq.seekBar.length) {
                // Using $(e.currentTarget) to enable multiple seek bars
     var $bar = $(e.currentTarget),
     offset = $bar.offset(),
         x = (($bar.offset().left + $bar.outerWidth())-e.pageX); // new line for rtl 
      //x = e.pageX - offset.left, // old line fro ltr
     w = $bar.width(),
     p = 100 * x / w;
         this.playHead(p);
     }
    }
    

    and css as you mentioned keep same

    .jp-progress
    {
    direction:rtl
    }