If margin left == percent

Question

I want my div to go left 5 times and after that coming back. To do that I have that script :

Javascrpit :

$(document).ready(function() {
  if(document.getElementById('twitter').style.marginLeft == "-278%")
  {
    (function($){
      setInterval(function(){

        $('#twitter').animate({
        marginLeft: '+=278%',
        },3000);

      }, 5000);

   })(jQuery);
  }else{
    (function($){
      setInterval(function(){
        $('#twitter').animate({
            marginLeft: '-=55.6%',
        },2000);

      }, 5000);
    })(jQuery);
  }
});

I have a working script with px using :

if($('#twitter').css("marginLeft")==('-5300px'))

but I need percent to be responsive, can someone help me please ?

EDIT :

The animation is working, just the condition for the if isn't working.

Margins are not in %age. When you use a %age (or anything else, eg em, vh), they are converted to px. You could re-convert back to a %age in your js by taking the current margin and the width and a small calc. — freedomn-m, Oct 20 '16 at 10:49
but if I "console.log(document.getElementById('twitter').style.marginLeft)" it return me percentage. I'll try something with your calc but I have a very strange div (width:1000%) — J.Aurélien, Oct 20 '16 at 10:55

score 0 · Accepted Answer · answered Oct 20 '16 at 10:38

0

Use position: absolute and left attribute instead of margin-left

<div id='twitter'>
  hello
</div>

#twitter{
 position: absolute;
 left: -50%;
}

answered Oct 20 '16 at 10:38

Jared Chu

2,757
4
27
38

position: absolute break my css and don't solve the problem, and the problem is not that the div is not going left, the problem is that she never go back to right, only the if(marginLeft == "-278%") isn't working. – J.Aurélien Oct 20 '16 at 10:42
OK so we will calculate the width must be margin-left. `var parentWidth = $('#twitter').width($('#twitter').parent().width());` and the number will be margin is `var marginLeftNumber = - 2.78 * parentWidth` and finally `$('#twitter').animate({marginLeft: marginLeftNumber+'', },2000);` – Jared Chu Oct 20 '16 at 10:53
I like the way you did that, just some mistakes for the annimation to work but I did change it and now it work .... but the if is still not working. When I console log the margin of twitter and the margin of my stop condition at the same time (wich is – J.Aurélien Oct 20 '16 at 11:14
ok sry, can't edit the comment. So I continue : which is marginLeftNumber*5) I have : -5298.4px -5298.402 – J.Aurélien Oct 20 '16 at 11:16
ok, hate the fact that it send the message on backspace so, I wanted to say : "It doesn't work on jsfiddle but the animation work on my website, don't know why from now" – J.Aurélien Oct 20 '16 at 11:29
it's ok because it require jquery, checking it – Jared Chu Oct 20 '16 at 11:36
1

Ok thank you, made it work, just because it never came back to the if cause of the interval loop. Sorry, just a neewbie error but couldn't find it. – J.Aurélien Oct 20 '16 at 11:57

If margin left == percent

1 Answers1