CODEWITHSUNDEEP
javascriptjqueryhtmlcss
mydeve
mydeve

Reputation: 563

jQuery scrollable ul via arrow ( and remove arrow when reached top or bottom end of list )

see http://liveweave.com/Pieivc

what i want that in start there show be no icon for arrow up as not needed but when user click arrow down it appears should appears and when user reaches last itme in ul li list bottom arrow should vanish

how can i do to check it ?..

(function () {

  $('#scrollup').on({
    'mousedown touchstart': function() {
      $(".sidebar-menu").animate({scrollTop:  0}, 2000);
    },
    'mouseup touchend': function() {
      $(".sidebar-menu").stop(true);
    }
  });

  $('#scrolldown').on({
    'mousedown touchstart': function() {
      $(".sidebar-menu").animate({
        scrollTop:  $(".sidebar-menu")[0].scrollHeight
      }, 2000);
    },
    'mouseup touchend': function() {
      $(".sidebar-menu").stop(true);
    }
});

})();

Upvotes: 2

Views: 1421

Answers (2)

Melissa Hie
Melissa Hie

Reputation: 471

You can check this using $('.sidebar-menu').scrollTop() value.

So for example, I wrote a function called check(), which checks the location of the scroll and display/hide the appropriate arrows. This function is called on mouse touchend event of each arrow.

function check() {
    if ($('.sidebar-menu').scrollTop() == 0) {
        $('#scrollup').hide();
        $('#scrolldown').show();
    } else if ($('.sidebar-menu').scrollTop() == height - 100) {
        $('#scrolldown').hide();
        $('#scrollup').show();
    }
}

See it in action: http://jsfiddle.net/ry2zwho1/1/

Upvotes: 1

Mahmoude Elghandour
Mahmoude Elghandour

Reputation: 2931

Try to use this jsfiddle

$(function(){
var carousel = $('.carousel ul');
var carouselChild = carousel.find('li');
var clickCount = 0;
var canClick = true;
$(".btnPrevious").css('color', 'red').show();
itemWidth =......

Upvotes: 0

Related Questions