Jcrop breaks with direction:rtl

GoogleCodeExporter commented 9 years ago

What steps will reproduce the problem?
1. Go to http://deepliquid.com/projects/Jcrop/demos.php
2. Open firebug and locate the <body> tag
3. Add a 'direction:rtl' directive to its style

What is the expected output? What do you see instead?
Cropping should work as before, it should not depend on the directionality 
of the page.

What version of the product are you using? On what operating system?
I believe the demo uses the latest, also I am not sure. I am using 0.9.5 
for my own implementation, which breaks in the same way too (http://
yhager.com/demos/crop/node/1/edit)

Please provide any additional information below.

Let me know if you need any help deciphering this one, as RTL world is a 
bit problematic. I was testing on FF and opera on Linux - I have no idea 
how other browsers behave.
If you need any help, I'll contact an RTL-CSS expert and ask his advice.

Original issue reported on code.google.com by yha...@gmail.com on 6 Apr 2009 at 9:26

GoogleCodeExporter commented 9 years ago

i have a suggestion for you.
I had the same problem but what i did , set direction:ltr for the particular 
divs
conatining images, jcrop-holder ,etc and this solved my problem.

Original comment by panky...@gmail.com on 24 Sep 2009 at 11:41

GoogleCodeExporter commented 9 years ago

The problem persisted in all browsers.

The solution is not to change anything in the CSS file. All you need is simply 
to change the direction of the table that holds the crop boxes like this:
direction: ltr; text-align: right; 

And then simply exchange the locations of the TDs that hold the boxes - make 
them appear in reverse order in the HTML code.

Then, you will get a cropping feature where the source image appears on the 
left, and the example image on the right.

Original comment by Yousef....@gmail.com on 30 Nov 2010 at 11:19

GoogleCodeExporter commented 9 years ago

i can't work with JCrop in rtl direction
please help me

Original comment by alim1...@gmail.com on 25 Feb 2011 at 8:31

GoogleCodeExporter commented 9 years ago

You have to modify jquery.jcrop.js file.

Actually :
      function updateShade(c)
      {
        shades.top.css({
          left: px(c.x),
          width: px(c.w),
          height: px(c.y)
        });
        shades.bottom.css({
          top: px(c.y2),
          left: px(c.x),
          width: px(c.w),
          height: px(boundy-c.y2)
        });
        shades.right.css({
          left: px(c.x2),
          width: px(boundx-c.x2)
        });
        shades.left.css({
          width: px(c.x),
          left : px(0) //ADD THIS!!!!
        });
      }

Original comment by vadim.me...@gmail.com on 16 Jan 2015 at 7:00

google-code-export / jcrop

Jcrop breaks with direction:rtl #10