Direction:RTL handling

[shamsy]

Hi Malihu,
great plugin! one of the best so far on the web.
I've using it in an English version of a website, but when I tried to use it in the Arabic version, I still get the dragger aligned to the left and the whole scrollbar is shifted to the right.

Please try to change the direction to RTL to see what I'm talking about. I tried to hack the code by changing the configuration and inverting right and left floating and alignment without success.

I can pay you for the fix if you want to.

Thank you.
Shams

[malihu]

Hello,

You can change scrollbar position in jquery.mCustomScrollbar.css. Edit .mCustomScrollBox>.mCSB_scrollTools selector and change right:0 to left:0 (you may also need to change right margins to left). Does this help?

On next plugin version, I'll try to add an RTL class on the css and maybe detect dir in the script and add the class automatically.

[shamsy]

Hi Malihu,

Thank you for replying I really appreciate it.

I have changed that before and tried again to override it but the dragger
is still pointing to the left hand side and the whole scroll is shifted to
the right.

If you have time, plesae take a look at this link :
http://www.amodoria.com/ar/exquisite-craftsmanship/
You will be asked to enter a login/password which are (guest/amodoria321)

you might use firebug to check the css.

Looking forward to hearing from you.

Regards,
Shams

On Wed, Jul 17, 2013 at 10:10 AM, malihu notifications@github.com wrote:

Hello,

You can change scrollbar position in jquery.mCustomScrollbar.css. Edit
.mCustomScrollBox>.mCSB_scrollTools selector and change right:0 to left:0
(you may also need to change right margins to left). Does this help?

On next plugin version, I'll try to add an RTL class on the css and maybe
detect dir in the script and add the class automatically.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/82#issuecomment-21093989
.

Shams

[malihu]

Since you have a horizontal scrollbar you can call the scrollTo method immediately after mCustomScrollbar function call:

$(".sidebar_content").mCustomScrollbar();
$(".sidebar_content").mCustomScrollbar("scrollTo","right");

[shamsy]

Hi Malihu,

I tried that but it doesn't work unfortunately. I'll try to create a
separate clean test file and see. It might be a css or js conflicts.

Please let me know from your side if there are any other changes I can do.

Thank you for your support.

Shams

On Thu, Jul 18, 2013 at 7:07 PM, malihu notifications@github.com wrote:

Since you have a horizontal scrollbar you can call the scrollTo method
immediately after mCustomScrollbar function call:

$(".sidebar_content").mCustomScrollbar();
$(".sidebar_content").mCustomScrollbar("scrollTo","right");

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/82#issuecomment-21190040
.

Shams

[SixSatori]

"You can change scrollbar position in jquery.mCustomScrollbar.css. Edit .mCustomScrollBox>.mCSB_scrollTools selector and change right:0 to left:0 (you may also need to change right margins to left). Does this help?"

helped me!
also had to change .mCSB_container margin-right:30px; to margin-left:30px;

[shamsy]

Hi SixSatori,

It didn't help me unfortunately. I took the last version of the script,
changed the css but the dragger is still loading at the left not the right
....

Can you please send a url to the example that worked for you? I will really
appreciate that.

Regards,
Shams

On Wed, Jul 31, 2013 at 12:46 PM, SixSatori notifications@github.comwrote:

"You can change scrollbar position in jquery.mCustomScrollbar.css. Edit
.mCustomScrollBox>.mCSB_scrollTools selector and change right:0 to left:0
(you may also need to change right margins to left). Does this help?"

helped me!
also had to change .mCSB_container margin-right:30px; to margin-left:30px;

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/82#issuecomment-21848244
.

Shams

[realhasmer]

Hey shamsy,

How did you finally get this working with RTL pages?

[malihu]

New version (3.0.0) will fully support RTL pages/elements. I'll release it this week.

[realhasmer]

Great news, malihu. Looking forward to it.
Let me know if you need testing etc.

[realhasmer]

Any news on this, malihu?

[malihu]

Please check version 3 branch: https://github.com/malihu/malihu-custom-scrollbar-plugin/tree/3.x
RTL demo: https://github.com/malihu/malihu-custom-scrollbar-plugin/blob/3.x/examples/rtl_direction_demo.html

[rsm40]

Hi malihu, first of all thank you very much for this plugin, it has been very usefull a lot of times.
i´ve been trying to apply the RTL to a simple code and i havent been able to do it, i´ve analyzed the code of the demo and the only thing i could find was the style "rtl-demo" that corresponds to this code:

.rtl-demo #content-1{ width: 500px; }
.rtl-demo #content-1 p{ width: 1000px; }

and that doesnt seem to make sense, at least to me. its just the width size.

i am very new to javascript and i dont know a lot, so pardon my ignorance if i mention something wrong.

if you could check it out it would mean a lot and it will be be very helpfull.
Heres the code:

<html>
<head>
<title>RTL</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="jquery.mCustomScrollbar.concat.min.js"></script>
<link rel="stylesheet" href="jquery.mCustomScrollbar.css" />
<style type="text/css">
.example1 {
    float: left;
    width: 300px;
    height: 300px;

}
</style>
</head>

<body>
    <div class="example1">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eleifend cursus semper. </p>
        <p>Maecenas varius sodales consectetur. Nunc sodales sed enim ut elementum. </p>
        <p>Vestibulum neque metus, sodales non placerat ac, vestibulum in massa. </p>
        <p>Donec elementum mauris mi, ornare pretium lorem rutrum auctor. Nunc non laoreet quam. </p>
        <p>Sed fermentum congue sagittis. Quisque non mi mollis, vehicula tellus ut, condimentum justo.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eleifend cursus semper. </p>
        <p>Maecenas varius sodales consectetur. Nunc sodales sed enim ut elementum. </p>
        <p>Vestibulum neque metus, sodales non placerat ac, vestibulum in massa. </p>
        <p>Donec elementum mauris mi, ornare pretium lorem rutrum auctor. Nunc non laoreet quam. </p>
        <p>Sed fermentum congue sagittis. Quisque non mi mollis, vehicula tellus ut, condimentum justo.</p>
    </div>
<script>
    (function($){
        $(window).load(function(){
            $(".example1").mCustomScrollbar({
                theme:"inset-3-dark",
                scrollButtons:{
          enable:true}

            });
        });
    })(jQuery);
</script>
</body>

</html>

Tank you very much for your time.

[malihu]

You can set the text direction by using the dir attribute on a tag (e.g. body) in your HTML:
<body dir="rtl">
or by using the direction property in your CSS:
body{ direction:rtl; }

[rsm40]

thank you very mutch

Date: Sun, 1 Jun 2014 11:00:01 -0700
From: notifications@github.com
To: malihu-custom-scrollbar-plugin@noreply.github.com
CC: r@hmid.mx
Subject: Re: [malihu-custom-scrollbar-plugin] Direction:RTL handling (#82)

You can set the text direction by using the dir attribute on a tag (e.g. body) in your HTML:

or by using the direction property in your CSS:

body{

direction:rtl;

}

—
Reply to this email directly or view it on GitHub.

[malihu]

Your welcome :)
Closing issue as RTL is supported since version 3.0.0

[ARMBouhali]

I've a wordpress template using the 3.1.11 version of your script.

I think The problem is not in CSS since the elements in RTL position should be displayed from right to left, by 'RTLizing' the inner content of the scrolling area. The scrollbar being displayed on the right side should not be wrong at all.

However the control itself in non-touchscreen devices is messy. When pointing inside our scroll container :

• In LTR : a scroll-down is interpreted as a scroll-right (using some javascript code), and a scroll-up is interpreted as a scroll-left. That's well done
• In RTL : a scroll-down should be interpreted as a scroll-left (because the first content is intuitively on the right side and the last on the left) which is actually manage in same way as LTR.

To simplify this :

1. an RTL user should scroll down first in the page to show the full height of the scroll container
2. He should then scroll up within the scroll container to see the left part of the script. A double scroll is not really user friendly.

Can you tell us how to correct this or how to change this specific JS scroll interpretation instead of waiting for a new version.

I'd be glad to help improve your scroller in terms of RTL support if I get more explanation.
B.Regards
Abderraouf Mehdi Bouhali

[malihu]

If you referring to the mouse-wheel behavior, you could use the invert option parameter to invert mouse-wheel scrolling direction:
mouseWheel:{ invert: true }

Is this what you need?

[ARMBouhali]

yes that's it. I just tried to change it and it worked as expected
Thanks :)

[seobomj]

Hello! How to make a reverse without using dir = "rtl" or direction: rtl; ? It is necessary that the slider and content moving in the same direction.
Example: https://codepen.io/patrikhjelm/pen/klcnj (right block)