Same code acts differently on website and jsfiddle

Question

I have some code that is meant to allow a user to scroll sideways by clicking, which works perfectly on jsfiddle, but does something completely different on my actual website. On my website, you can scroll right once but no further, and when you scroll back, it apparently scrolls right past the left-hand border.

Here's a live link to the problem on my website: rouvou.com/error

And here's the fiddle.

I literally copied and pasted the code. I'm using jQuery 1.10.0 on my website and the closest jQuery version jsfiddle has is 1.10.1, but I can't imagine that could cause this different behavior. The html I posted is the only code on that entire page. On both locations, I'm using Chrome Version 42.0.2311.152 (64-bit) on Ubuntu.

Why might the code have different results on jsfiddle and my website?

$(document).ready(function() {
  var $item = $('div.item'),                 //Cache your DOM selector
    visible = 2,                             //Set the number of items that will be visible
    index = 0,                               //Starting index
    endIndex = ($item.length / visible) - 1; //End index

  $('div#arrowR').click(function() {
    if(index < endIndex) {
      index++;
      $item.animate({
        'left': '-=300px'
      });
    }
  });

  $('div#arrowL').click(function() {
    if(index > 0) {
      index--;
      $item.animate({
        'left': '+=300px'
      });
    }
  });
});

#container {
  width: 340px;
  height: 50px;
}
#list-container {
  overflow: hidden;
  width: 300px;
  float: left;
}
.list {
  background: grey;
  min-width: 1400px;
  float: left;
}
#arrowR {
  background: yellow;
  width: 20px;
  height: 50px;
  float: right;
  cursor: pointer;
}
#arrowL {
  background: yellow;
  width: 20px;
  height: 50px;
  float: left;
  cursor: pointer;
}
.item {
  background: green;
  width: 140px;
  height: 40px;
  margin: 5px;
  float: left;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<div id="container">
  <div id="arrowL">
  </div>
  <div id="arrowR">
  </div>
  <div id="list-container">
    <div class='list'>
      <div class='item'>1
      </div>
      <div class='item'>2
      </div>
      <div class='item'>3
      </div>
      <div class="item">4
      </div>
      <div class='item'>5
      </div>
      <div class='item'>6
      </div>
      <div class='item'>7
      </div>
      <div class="item">8
      </div>
    </div>
  </div>
</div>

Well, the good news is I replicate the wrong behaviour. The bad news is that 1.10.1 does not load on this computer, so I can't test if it works any different under that version. (edit: under 1.11.1 and 1.9.something it works correctly; are you sure it isn't a bug in 1.10.0?) — Sumurai8, Aug 07 '15 at 17:36
@Samurai8 It worked on jsfiddle with every single jquery version I tried, so you can try it with random versions. For example 1.9.1 definitely worked. — Jeff Caros, Aug 07 '15 at 17:41
Loading your page shows 404 errors. But fuyushimoya's answer seems to be the reason for your problem. — Jasen, Aug 07 '15 at 17:46

fuyushimoya · Accepted Answer · 2015-08-07T18:06:53.123

2

It seems just as you said, 1.10.0 has some bug on that. I created an altered version of your jsfiddle, the only difference is that the jQuery is using version 1.10.0, you can see that it works like your site now.

See jQuery 1.10.1 Change log :

Effects

#13937: finish() only finishes last item of a set being .animate()d.

#13939: 1.10.0 breaks relative animation

and the issue ticket#13939 :

Description

Relative animation (using += or -=) is broken in 1.10.0. For example, $('h1').animate({marginLeft: '+=100px'}); does not work.

So, you might have to switch to version 1.10.x where x is the latest version, as their change should mostly be issue fixes, not functionality changes.

edited Aug 07 '15 at 18:06

answered Aug 07 '15 at 17:37

fuyushimoya

9,715
3
27
34

Ah dammit really? What would you do in my situation? Upgrade to 1.10.1? – Jeff Caros Aug 07 '15 at 17:43
Yes, if that's possible, you may use `1.10.x` where `x` is latest one, as it would probably about issue fixes. You can see the [changelogs](https://jquery.org/history/) and [all jquery versions](https://code.jquery.com/jquery/) to decide which version will suit you. – fuyushimoya Aug 07 '15 at 17:45
1

IMO I'll try to switch to the latest stable version, and start to fix the codes that breaks due to lib update, but again, when question is about lib upgrade, or even which version, it becomes opinion-based. – fuyushimoya Aug 07 '15 at 17:52
In your experience, do you think upgrading to 1.10.1 could cause errors in my existing code? I thought tiny version bumps were only for fixing bugs. – Jeff Caros Aug 07 '15 at 18:08
As you said, tiny version, would mostly for fixing bugs, and from the change log, it shouldn't cause trouble in your existing code. – fuyushimoya Aug 07 '15 at 18:09
Well this is weird...I upgraded to 1.10.1 and now clicking the arrows doesn't do anything at all. – Jeff Caros Aug 08 '15 at 16:45
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/86517/discussion-between-fuyushimoya-and-jeff-caros). – fuyushimoya Aug 08 '15 at 17:01

score 0 · Answer 2 · edited Aug 08 '15 at 17:24

The problem was that there is indeed a bug in 1.10.0, but for anyone in the future who has this problem but doesn't want to upgrade, I figured out a way to make this function work on 1.10.0.

    <div id="container">
        <div id="arrowL">
        </div>
        <div id="arrowR">
        </div>
        <div id="list-container">
            <div class='list'>
                <div class='item'>1
                </div>
                <div class='item'>2
                </div>
                <div class='item'>3
                </div>
                <div class="item">4
                </div>
                <div class='item'>5
                </div>
                <div class='item'>6
                </div>
                <div class='item'>7
                </div>
                <div class="item">8
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
    $(document).ready(function() {

        var $item = $('div.item'), //Cache your DOM selector
            visible = 2, //Set the number of items that will be visible
            index = 0, //Starting index
            endIndex = ( $item.length / visible ) - 1; //End index
            animatepixels = 0

        $('div#arrowR').click(function(){
            if(index < endIndex ){
              index++;
              animatepixels = 0 - (index * 300)
              $item.animate({'left':animatepixels+'px'});
            }
        });

        $('div#arrowL').click(function(){
            if(index > 0){
              index--;
              animatepixels= 0 - (index * 300)
              $item.animate({'left':animatepixels+'px'});
            }
        });

    });
    </script>

Same code acts differently on website and jsfiddle

2 Answers2