happyworm/jPlayer — Issue #59: seekBar/volumeBar mirrored in RTL mode (solution)
Author: dalgard
Created: 2011-11-20 23:03:29+00:00
State: open

When making a site in a bidi-language like Arabic or Persian (which read right-to-left) it is standard practice to set the attribute `dir="rtl"` on the documentElement (typically) which flips the page, making elements begin at the right instead of the left edge of their parent.

Calculations such as `event.pageX` still begin from the left edge, however, which gives a mirrored value when clicking inside a seekbar that is now progressing from the right.

In jPlayer `e.pageX` are used with `seekBar` and `volumeBar` and there is an easy yet stable solution that you might consider incorporating:

Search the source for the string `x/w` and replace the first match with:

`((this.css.jq.volumeBar.closest("[dir]").attr("dir") === "rtl") ? 1 - (x/w) : x/w)`

... and the second match with:

`((this.css.jq.seekBar.closest("[dir]").attr("dir") === "rtl") ? 1 - (x/w) : x/w)`