Vertical scroller

main.js

  // ### Draggable - vertical animation
  $('.ciupek').on('mousedown', function(e){
      var ciup = $(this);
      var limit = $('#diet_picker').width()/5;
      var tolerance = $('#relative_separator').offset();
      if (tolerance < 0) {tolerance = 0};
      ciup.removeClass('transition');
      $('#diet_picker div').removeClass('scoped');
      var position = ciup.offset();
      var initialized = {
          x : position.left - tolerance.left + 50 - e.pageX
      };
      var handlers = {

          mousemove : function(e){
              var positions = initialized.x + e.pageX;
              if ( positions > 0 && positions < $('#diet_picker').width() ) {
                  setTimeout(function(){
                    ciup.css({
                        left : ( positions ) + 'px'
                    });
                  },140);

                  if (positions < limit) {
                      spawn_diet(0);
                  }
                  else if (positions < limit*2) {
                      spawn_diet(1);
                  }
                  else if (positions < limit*3) {
                      spawn_diet(2);
                  }
                  else if (positions < limit*4) {
                      spawn_diet(3);
                  }
                  else {
                      spawn_diet(4);
                  }
              }
          },
          mouseup : function(e){
              $(this).off(handlers); 
              ciup.addClass('transition');
          }
      };
      $(document).on(handlers);
  });

  // ### Clickable - vertical animation
  $('.order_food .row').not(":eq(0)").hide();
  $('#diet_picker div').on('click', function()  {
      var numb = ($(this).index());
      if (!($(this).hasClass('scoped')) && !($('.order_food .row').eq(numb).hasClass('scoped') )) {
         $('#diet_picker div').removeClass('scoped activated');
         $('.order_food .row').removeClass('scoped');
         var distance = $(this).offset().left + ($(this).width()/2) - $(this).parent().offset().left ;
         $(this).addClass('scoped');
         $('.order_food .row').hide();
         $('.order_food .row').eq(numb).show(270);

         move_ciup(distance);
       }
    });
    
function spawn_diet(n) {
 var node = $('.order_food .row');
    if (!(node.eq(n).hasClass('scoped')) && !($('#diet_picker div').eq(n).hasClass('scoped'))) {
       node.removeClass('scoped');
       $('#diet_picker div').removeClass('scoped activated');
       $('#diet_picker div').eq(n).addClass('activated');
       node.eq(n).addClass('scoped');
       node.hide();
       node.eq(n).show(270);
    }
}

function move_ciup(coordinates) {
  $('.ciupek').css({'left': coordinates +'px'});
}