How to get left margin of an image as ems in javascript

Question

I searched this over internet for over 3 hours and none of the suggestions work in my code. What i am trying to do is to slide pictures to left one by one in each click (total 3 pictures) and when the last picture is in the screen stop sliding left and slide back to the first picture. To do that I need to detect the left margin of the first picture when it hits a certain spot (180em to the left) and compare it to an "ems" value (code is below). The "if" statement never shoots, it always directs to "else".

I tried to get the left border position (or margin) of the first picture with "$('#picture1').offsetLeft", "$('#picture1').layerX", "$('#picture1').left" too but none of them worked.

If you can direct me to another website, another question in Stackoverflow or give me a solution I will appreciate it.

Note: I am very very new with javascript, if there are mistakes in my code or my question correct me. Thank you.

var position = parseInt(jQuery("#picture1").css("margin-left"));
var left_border = '180ems';
    $(function() {
        $(".button").click(function() {
            if (position > 180ems) {
               $("#picture1").animate({
                   left: '-=60em'
               }, 600);
               $("#picture2").animate({
                   left: '-=60em'
               }, 600);
               $("#picture3").animate({
                   left: '-=60em'
               }, 600);
            }
            else {
                $("#picture1").animate({
                   left: '+=180em'
               }, 600);
               $("picture2").animate({
                   left: '+=120em'
               }, 600);
               $("#picture3").animate({
                   left: '+=60em'
               }, 600);
            };
        });

score 0 · Accepted Answer · edited May 23 '17 at 12:20

0

You could always get the value in pixels and then try to convert this to ems, see this question jQuery/JavaScript: convert pixels to em in a easy way

Edit: Or you could place an invisible element 180ems from the left, and then fetch the pixel value for this from that element, you can then use that value for comparison.

edited May 23 '17 at 12:20

Community

1
1

answered May 02 '12 at 05:37

Adam Heath

4,703
2
35
50

I will try both of these tomorrow and let you know. I liked the second idea better, I will probably use it many other things. Thank you very much! – Engin Yapici May 02 '12 at 05:46
So I ended up using '.position().left' to determine position as an integer and converting it into ems by detecting browser's font size. Thanks for the suggestion. – Engin Yapici May 08 '12 at 05:11

How to get left margin of an image as ems in javascript

1 Answers1