-= operator in jQuery's css method not working in IE8

Question

It looks like jQuery's handling of -= in css() isn't working in IE8 for some reason. The following code doesn't through any errors, but it doesn't work either. I've narrowed it down to the operator mentioned above.

var postCount = $(".postsWrapper .window .posts article").length;
var numberOfPages = Math.ceil(postCount / 3);
var currentPage = 1;
var transitioning = false;
$(".postsWrapper button").click(function() {
    var direction = $(this).attr("data-direction");
    var postWindowWidth = $(".postsWrapper .window").width();
    if (direction == "next" && currentPage < numberOfPages && transitioning == false) {
        transitioning = true;
        // the below line does nothing in IE8
        $(".postsWrapper .window .posts").css("marginLeft", "-=" + postWindowWidth);
        setTimeout(function() {
            transitioning = false;
        }, 1000);
        currentPage++;
    } else if (direction == "previous" && currentPage > 1 && transitioning == false) {
        transitioning = true;
        // the below line does nothing in IE8
        $(".postsWrapper .window .posts").css("marginLeft", "+=" + postWindowWidth);
        setTimeout(function() {
            transitioning = false;
        }, 1000);
        currentPage--;
    }
});

See http://www.weblinxinc.com/beta/candy-controls/demo/site/index.htm

That's not an operator, it's a relative CSS value (which is a wholly jQuery thing). — Anthony Grist
– Anthony Grist, Commented Jul 22, 2014 at 14:19
@CBroe: There's a -= in JavaScript, it does what -= does in C, C++, C#, Java, and various others. a = 27; a -= 4; console.log(a); // 23 But the question above is about jQuery's css function, which accepts -= on values and handles it (nothing to do with JS's operator). — T.J. Crowder
– T.J. Crowder, Commented Jul 22, 2014 at 14:20
Seems to work to me everywhere but IE8, it might be a jQuery thing, I can never keep that straight. — JacobTheDev
– JacobTheDev, Commented Jul 22, 2014 at 14:20
@CBroe: wrong. there is, along with +=. The question is whether jquery's css engine recognizes it. @Rev: does the += line work? It'd be very odd if M$ implemented += but forgot -=, since they're basically the same thing. — Marc B
– Marc B, Commented Jul 22, 2014 at 14:20

T.J. Crowder · Accepted Answer · 2014-07-22 14:27:58Z

2

The problem is that your margin-left property is starting out with the value auto, and so jQuery can't increment/decrement it. Live Example (source below)

If you initially set it to a numeric value, it'll start working. Live example

This might qualify as a jQuery bug, you might check their list to see if it's there.

Here's the source to the live examples:

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
  <meta charset="utf-8">
  <title>Example</title>
</head>
<body>
  <div id="test">I'm the test div</div>
<script>
  (function() {
    "use strict";

    // The following line is only in the second example, the one that works;
    // without it, it doesn't work (in IE8) even though it does in Chrome
    $("#test").css("marginLeft", 0);

    var counter = 0;
    var up = true;
    display("Initial marginLeft: " + $("#test").css("marginLeft"));
    setInterval(function() {
      if (up) {
        $("#test").css("marginLeft", "+=5");
      } else {
        $("#test").css("marginLeft", "-=5");
      }
      ++counter;
      if (counter > 10) {
        counter =0;
        up = !up;
      }
    }, 200);

    function display(msg) {
      $("<p>").html(String(msg)).appendTo(document.body);
    }
  })();
</script>
</body>
</html>

answered Jul 22, 2014 at 14:27

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JacobTheDev Over a year ago

Interesting, that worked. Weird that it worked fine in every other browser. Thanks!

T.J. Crowder Over a year ago

@Rev: Yeah, I figured it out by thinking "Why would an increment/decrement not work?" and answering "Because the value isn't a number" and so I dumped out the result of .css("marginLeft") on IE8 vs. Chrome and saw I got auto on IE8 and 0px on Chrome (in my example).

Collectives™ on Stack Overflow

-= operator in jQuery's css method not working in IE8

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related