0

In my angularjs application I have approximately 23 tabs. So 90% of the width I have given for tabs with overflow : hidden, and 10% width Prev and Next icons. Each Tab has 36px width. So by default on the page 5 tabs are getting visible. Now when I click Next, I just want to scroll 5 tabs to left, like this continue till the last tab visible. So in my Next icon click event I am trying to do this some thing like the following, in my controller, to get the max scroll left and then use it but in my code maxScrollLeft is returning NaN. 

 _self.getNextTabs = function () {            
          var maxScrollLeft = $element.scrollWidth - $element.clientWidth; 
          alert(maxScrollLeft);
          angular.element(document.querySelector('.main_tabSet .nav-tabs')).scrollLeft(600);    
        }

Here I have hard coded .scrollLeft(600); for testing purpose, so when I click Next, the tabs are scrolling left. But I want to make this scrolling to work correctly based on the max scroll left and the number of tabs that are being occupied. can any one help me in fixing it.

Madasu K
  • 1,813
  • 2
  • 38
  • 72

1 Answers1

1

Not sure if _self.getNextTabs is in a directive, a controller or some other location, but the name $element indicates (to me) that it may be inside a directive?

If so, then I think $element may be a jquery object. AND - if that's the case, then you would need to use the syntax $element[0].scrollWidth et al...

_self.getNextTabs = function () {            
   var maxScrollLeft = $element[0].scrollWidth - $element[0].clientWidth; 
   angular.element(document.querySelector('.main_tabSet .nav-tabs')).scrollLeft(600);    
}
bri
  • 2,932
  • 16
  • 17
  • Yes, you are right. But now both scrollWidth and clientWidth are coming as 1353, do you know the reason, why both are same? – Madasu K Jan 19 '16 at 15:56
  • No idea as [this stack answer](http://stackoverflow.com/a/21064102/4747123) seems to indicate you are looking at the right properties... Unless using css overflow: hidden means scrollWidth=clientWidth. [Maybe FFox issue?](http://stackoverflow.com/a/15811768/4747123) – bri Jan 19 '16 at 16:03
  • Actually it is inside controller, so I have given var maxScrollLeft = angular.element(document.querySelector('.main_tabSet .nav-tabs')).scrollWidth ; but maxScrollLeft is coming as undefined. – Madasu K Jan 19 '16 at 16:12
  • These feel like different questions than your op. Angular.element() is just like $element. You need to add [0] before calling plain-old-js properties as angular.element() returns an array, not an element. Either close the question and ask another one or adjust as this is he right answer to the question you posed. – bri Jan 19 '16 at 16:15
  • sure Bri, I have already accepted the answer. I post it as separated question. – Madasu K Jan 19 '16 at 16:17