JQuery Scrolling: Finding the End and the Beginning

Question

EDIT → Plunker: http://plnkr.co/edit/LY7LUAylvKQ3pIv9lhYM?p=preview

I implemented jQuery scrolling for tab headers, it works well.

If I am in the beginning, the arrow on the left should disappear, and when I move to the right, it should be shown. If I'm at the end, the arrow on the right should disappear.

How to determine the start and end points? I want to be able to respond to window resizing.

These are the buttons:

$('#nextTabBtn').click(function () { var $target = $('.tabBoxMantle'); if ($target.is(':animated')) return; $target.animate({ scrollLeft: $target.scrollLeft() + 300 }, 800); }); $('#prevTabBtn').click(function () { var $target = $('.tabBoxMantle'); if ($target.is(':animated')) return; $target.animate({ scrollLeft: $target.scrollLeft() - 300 }, 800); }); 

Answer 1

I am not very familiar with Angular, but still I tried to fix your problem.

I created a function to switch Prev Tab and Next Tab Button as follows

 function ShowPreviousTabBtn() { // handles prev tab button visibility var $targetScroll = $('.auTabBoxMantle'); if ($targetScroll.scrollLeft() == 0) $('#prevTabBtn').hide(); else $('#prevTabBtn').show(); } function ShowNextTabBtn() { // handles next tab button visibility var $targetScroll = $('.auTabBoxMantle'); var $scrollwidthtotal = $targetScroll[0].scrollWidth; var $scrolledwidth = $targetScroll.width() + $targetScroll.scrollLeft(); if ($scrollwidthtotal <= $scrolledwidth) $('#nextTabBtn').hide(); else $('#nextTabBtn').show(); } 

The full working code for your .js application is given below

 angular.module('myApp', []) .controller( "MainController", function($scope, $http, $window, $document, $location, $anchorScroll) { $scope.my = {}; $scope.my.title = "jQuery Scroll Example"; $http.get('data.json') .success(function(data) { $scope.my.tabs = data; }); function ShowPreviousTabBtn() { var $targetScroll = $('.auTabBoxMantle'); if ($targetScroll.scrollLeft() == 0) $('#prevTabBtn').hide(); else $('#prevTabBtn').show(); } function ShowNextTabBtn() { var $targetScroll = $('.auTabBoxMantle'); var $scrollwidthtotal = $targetScroll[0].scrollWidth; var $scrolledwidth = $targetScroll.width() + $targetScroll.scrollLeft(); if ($scrollwidthtotal == $scrolledwidth) $('#nextTabBtn').hide(); else $('#nextTabBtn').show(); } // Initially hide the previous Tab button ShowPreviousTabBtn(); // Hiding the Next Tab if the Items div is not overflown ShowNextTabBtn(); $('#nextTabBtn').click(function() { var $target = $('.auTabBoxMantle'); if ($target.is(':animated')) return; $target.animate({ scrollLeft: $target.scrollLeft() + 300 }, 800) .promise().done(function() { // used as a callback function for animate ShowPreviousTabBtn(); ShowNextTabBtn(); }); }); $('#prevTabBtn').click(function() { var $target = $('.auTabBoxMantle'); if ($target.is(':animated')) return; $target.animate({ scrollLeft: $target.scrollLeft() - 300 }, 800) .promise().done(function() { // used as a callback function for animate ShowPreviousTabBtn(); ShowNextTabBtn(); }); }); } ); 

I hope this works for you :)