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.
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
}