After window resize between 2 breaking points the slide innerWidth() being now used is taken from the breaking point I was resizing from, not into

Question

Why is that after window resize between 2 breaking points the slide innerWidth() being now used is taken from the breaking point I was resizing from, not into?

To be more precise:

https://jsfiddle.net/ecm3d30z/1/

1. For instance I am on breaking point 1 (above 800px)

2. I do window resize from breaking point 1 to breaking point 2 (below 800px).

3. Now I am on breaking point 2 (below 800px)

4. I then click next/prev buttons

5. The animation uses width of oneslidewidth from breaking point 1 whereas it should use width of oneslidewidth from beradking point 2.

   app = {
   
   hubert:function() {
   
         var num = $(".testimonial").length;
         var oneslidewidth = $(".testimonial").innerWidth();
         var oneslideheight = $(".testimonial").innerHeight();
         var fullsliderwidth = num * oneslidewidth;        
         var active = false;
   
   
   
       $("section").css({
         width: oneslidewidth,
         height: oneslideheight
       });
   
     $(".calosc").css({
       width: fullsliderwidth
     }); 
   
   
   
     function changehook(direction) {
       var slide = parseInt($(".calosc").data("slide") );
       if (direction == "next") {
           slide++
         $(".calosc").data("slide", slide);
       } else if (direction == "prev") {
           slide--
         $(".calosc").data("slide", slide);
       }
       }
   
   
   
       $('.next').click(function(e) {
       e.preventDefault();
         if(active || parseInt($(".calosc").data("slide")) + 1 > num) {
           return;
         }
       changehook("next");
       active = true;
       $(".calosc").animate({'left' : $(".calosc").position().left-oneslidewidth},500, function() {
                   {active = false;} });
               });
   
   
     $(".prev").on("click",function(e) {
           e.preventDefault();
         if(active || parseInt($(".calosc").data("slide")) - 1 < 1 ) {
           return;
         }
       changehook("prev");
        active = true;
       $(".calosc").animate({'left': $(".calosc").position().left+oneslidewidth},500, function() {
               { active = false; } });
       });
   }
   }
   

Answer 1

Not good at explaining, but basically: An example of variable shadowing in javascript

At first glance, it should've worked, the scopes seems right etc. I'm don't know how jQuery does this behind: $(".prev").on("click",function(e) {, does it set the function and overrides the listener? or adds a new listener? or just do nothing there's already one set.

So anyways, one way to fix it, would be to "re-define" your oneslidewidth inside your click function, something like this:

$('.next').click(function(e) {
  // Here \/
  var oneslidewidth = $(".testimonial").innerWidth();
  e.preventDefault();
  if(active || parseInt($(".calosc").data("slide")) + 1 > num) {
    return;
  }
  changehook("next");
  active = true;
  $(".calosc").animate({'left' : $(".calosc").position().left-oneslidewidth},500, function() {
    {active = false;}
  });
});

Another way would be to wrap your "data" into an Object, or perhaps make them global. Here's the updated version putting your variables into an object.

https://jsfiddle.net/ecm3d30z/2/

btw.. theres another bug: change to 2+ page, and resize.. it just breaks.., but if you change it back to page 1, and resize.. everything works again ¯\_(ツ)_/¯