javascript - Same code acts differently on website and jsfiddle -

-

i have code meant allow user scroll sideways clicking, works on jsfiddle, different on actual website. on website, can scroll right once no further, , when scroll back, apparently scrolls right past left-hand border.

here's live link problem on website: rouvou.com/error

and here's fiddle.

i literally copied , pasted code. i'm using jquery 1.10.0 on website , closest jquery version jsfiddle has 1.10.1, can't imagine cause different behavior. html posted code on entire page. on both locations, i'm using chrome version 42.0.2311.152 (64-bit) on ubuntu.

why might code have different results on jsfiddle , website?

$(document).ready(function() {    var $item = $('div.item'),                 //cache dom selector      visible = 2,                             //set number of items 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>

it seems said, 1.10.0 has bug on that. created altered version of jsfiddle, difference jquery using version 1.10.0, can see works site now.

see jquery 1.10.1 change log :

  • effects

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

#13939: 1.10.0 breaks relative animation

and issue ticket#13939 :

  • description

relative animation (using += or -=) broken in 1.10.0. example, $('h1').animate({marginleft: '+=100px'}); not work.

so, might have switch version 1.10.x x latest version, change should issue fixes, not functionality changes.


Comments

Post a Comment

Popular posts from this blog

yii2 - Yii 2 Running a Cron in the basic template -

-
i have seen instructions on running cron in advanced template, cant figure out how on basic template. have following controller in basic controllers folder. <?php namespace app\controllers; use yii\console\controller; /** * cron controller */ class croncontroller extends controller { public function actionindex() { echo "cron service runnning"; } public function actionmail($to) { echo "sending mail " . $to; } } i have navigated root of application , tried these comands yii cron php yii cron im getting unknown comand "cron" i know old question failed find actual answer this. if @ code yii exec file you'll notice requires /common/config/aliases.php file console/config/main.php. can naturally change these or copy on these advanced template. hope solves problem wanting same thing.
Read more

asp.net - 'System.Web.HttpContext' does not contain a definition for 'GetOwinContext' Mystery -

-
i realize question might seem trivial some, it's these types of things find myself fighting quite bit , want make sense of despite seeming losing battle in .net (for me anyway). so, if following: using system.web; ... applicationuser user = system.web.httpcontext.getowincontext().getusermanager<applicationusermanager>().findbyid(system.web.httpcontext.user.identity.getuserid()); that produces error in title , red getowincontext() , error cannot resolve symbol 'getowincontext()' however, if following (remove system.web in front of httpcontext ), works expected (or @ least no errors): using system.web; ... applicationuser user = httpcontext.getowincontext().getusermanager<applicationusermanager>().findbyid(system.web.httpcontext.user.identity.getuserid()); however, if (same line that's working using system.web commented out): //using system.web; ... applicationuser user = httpcontext.getowincontext().getusermana...
Read more

mercurial graft feature, can it copy? -

-
there new feature in mercurial 3, called 'graft' (graft local). job of moving change-set different branch. is there way "copy" change-set branch? i interested in in moving stuff qa branch production branch, still need code reside in qa. want copy. found , have tried few things, maybe it'll become clear more tinkering , reading... does have better way of 'cherry picking' change-sets move cross branch (or trunk)??? graft copies changesets, doesn't move them. hg graft (emphasis mine): this command uses mercurial's merge logic copy individual changes other branches without merging branches in history graph. known 'backporting' or 'cherry-picking' . default, graft copy user, date, , description source changesets.
Read more