CODEWITHSUNDEEP
javascriptjquery
Rodrigo Dias
Rodrigo Dias

Reputation: 177

Stop scrolling when viewing last item - with jQuery

I have a list of dynamic items that possesses a scroll like a slide, and I can not set a limit to the scroll with the arrow when the last item of the list is displayed.

Any idea how I can stop scrolling when viewing the last item? Example here: JSFIDDLE

    $('.nextArrow').click(function() {
        //Animate the images to next slide
        $('.thumbs li:eq(0)').animate({"margin-top": "-=80"}, 500);             
    });

    $('.prevArrow').click(function() {
        var marginTopValue = $('.thumbs li:eq(0)').css('margin-top');
        //Animate the image to previous slide
        if (marginTopValue == '0px') {

        } else {
            $('.thumbs li:eq(0)').animate({"margin-top": "+=80"}, 500);
        };
    });

Upvotes: 0

Views: 207

Answers (3)

Moob
Moob

Reputation: 16184

This is not how I'd do a prev/next slider but as a solution to your problem (without replacing it entirely) you should look to measure the height of the UL and prevent the top-margin offset from exceeding it.

E.G: https://jsfiddle.net/ssx7pL3v/6/

$('.thumbs').before('<span class="nextArrow arrowThumbs" id="nextArrow">Next</span>').after('<span class="prevArrow arrowThumbs" id="prevArrow">Prev</span>');

var ih = $('.thumbs li:first').height();

$('.nextArrow').click(function() {
  var maxTopMargin = 0 - ($('.thumbs').height() + ih);
  var marginTopValue = parseInt($('.thumbs li:eq(0)').css('margin-top'));
  //Animate the image to next slide
  if (marginTopValue > maxTopMargin) {
    $('.thumbs li:eq(0)').animate({
      "margin-top": "-=" + ih
    }, 500);
  }
});

$('.prevArrow').click(function() {
  var marginTopValue = parseInt($('.thumbs li:eq(0)').css('margin-top'));
  //Animate the image to previous slide
  if (marginTopValue < 0) {
    $('.thumbs li:eq(0)').animate({
      "margin-top": "+=" + ih
    }, 500);
  };
});
.thumbs {
  display: block;
  width: 128px;
  height: 120px;
  overflow: hidden;
  padding: 0;
}
.thumbs li {
  width: 128px;
  display: block;
  margin: 0 auto;
  text-align: center;
  list-style: none;
}
.thumbs li h2 {
  font-size: 11px;
  margin: 0;
  padding: 0;
}
.thumbs li img {
  width: 30%;
}
.arrowThumbs {
  display: block;
  border: 1px solid #000;
  padding: 10px;
  width: 128px;
  text-align: center;
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="thumbs">
  <li>
    <h2>Item 1</h2>
    <img src="http://icons.iconarchive.com/icons/rafiqul-hassan/blogger/128/Refresh-icon.png" alt="">
  </li>
  <li>
    <h2>Item 2</h2>
    <img src="http://icons.iconarchive.com/icons/rafiqul-hassan/blogger/128/Refresh-icon.png" alt="">
  </li>
  <li>
    <h2>Item 3</h2>
    <img src="http://icons.iconarchive.com/icons/rafiqul-hassan/blogger/128/Refresh-icon.png" alt="">
  </li>
  <li>
    <h2>Item 4</h2>
    <img src="http://icons.iconarchive.com/icons/rafiqul-hassan/blogger/128/Refresh-icon.png" alt="">
  </li>
  <li>
    <h2>Item 5</h2>
    <img src="http://icons.iconarchive.com/icons/rafiqul-hassan/blogger/128/Refresh-icon.png" alt="">
  </li>
  <li>
    <h2>Item 6</h2>
    <img src="http://icons.iconarchive.com/icons/rafiqul-hassan/blogger/128/Refresh-icon.png" alt="">
  </li>
</ul>

Upvotes: 1

Endi Zhupani
Endi Zhupani

Reputation: 736

Change

$('.nextArrow').click(function() {
    //Animate the images to next slide
    $('.thumbs li:eq(0)').animate({"margin-top": "-=80"}, 500);             
});

to

$('.nextArrow').click(function() {
        //Animate the images to next slide
  var marginTopValue = parseInt($('.thumbs li:eq(0)').css('margin-top').replace('px', ''));
  if (marginTopValue >= (0-$('.thumbs')[0].scrollHeight))
  {
        $('.thumbs li:eq(0)').animate({"margin-top": "-=80"}, 500);
  }
    });

JSFIDDLE here!

Upvotes: 2

gamera_the_beast
gamera_the_beast

Reputation: 34

In the jsfiddle try to use this javascript code

        $('.thumbs').before('<span class="nextArrow arrowThumbs" id="nextArrow">Next</span>').after('<span class="prevArrow arrowThumbs" id="prevArrow">Prev</span>');
    $('.nextArrow').click(function() {
        //Animate the images to next slide
  console.log($('.thumbs').height(), $('.thumbs li:eq(0)').css('margin-top').replace("px", ""));
  if(Math.abs($('.thumbs li:eq(0)').css('margin-top').replace('px','')) <= $('.thumbs').height() + 60)
        $('.thumbs li:eq(0)').animate({"margin-top": "-=80"}, 500);             
    });

    $('.prevArrow').click(function() {
        var marginTopValue = $('.thumbs li:eq(0)').css('margin-top');
        //Animate the image to previous slide
        if (marginTopValue == '0px') {

        } else {
            $('.thumbs li:eq(0)').animate({"margin-top": "+=80"}, 500);
        };
    });

This is super naive because it just control the height of the element with the margin you scroll but with simple adjustments can work

Upvotes: 0

Related Questions