diff options
author | Phil Hughes <me@iamphill.com> | 2016-09-15 11:38:47 +0300 |
---|---|---|
committer | Phil Hughes <me@iamphill.com> | 2016-09-16 12:48:38 +0300 |
commit | c04ef86c644cab2cd620df9dd7ab3ddafab1f80f (patch) | |
tree | dadac0a383cbd0ce2617f61820834be60a2bc01e /app | |
parent | 7ac475164f06d40b7f33f2f9c663806fa675f462 (diff) |
Scrolls active tab into middle of nav on mobile
Diffstat (limited to 'app')
-rw-r--r-- | app/assets/javascripts/layout_nav.js | 22 |
1 files changed, 19 insertions, 3 deletions
diff --git a/app/assets/javascripts/layout_nav.js b/app/assets/javascripts/layout_nav.js index ce472f3bcd0..ab95009b9b8 100644 --- a/app/assets/javascripts/layout_nav.js +++ b/app/assets/javascripts/layout_nav.js @@ -10,11 +10,13 @@ }; $(function() { - hideEndFade($('.scrolling-tabs')); + var $scrollingTabs = $('.scrolling-tabs'); + + hideEndFade($scrollingTabs); $(window).off('resize.nav').on('resize.nav', function() { - return hideEndFade($('.scrolling-tabs')); + return hideEndFade($scrollingTabs); }); - return $('.scrolling-tabs').on('scroll', function(event) { + $scrollingTabs.off('scroll').on('scroll', function(event) { var $this, currentPosition, maxPosition; $this = $(this); currentPosition = $this.scrollLeft(); @@ -22,6 +24,20 @@ $this.siblings('.fade-left').toggleClass('scrolling', currentPosition > 0); return $this.siblings('.fade-right').toggleClass('scrolling', currentPosition < maxPosition - 1); }); + + $scrollingTabs.each(function () { + var $this = $(this), + scrollingTabWidth = $this.width(), + $active = $this.find('.active'), + activeWidth = $active.width(), + offset = $active.offset().left + activeWidth; + + if (offset > scrollingTabWidth - 30) { + var scrollLeft = scrollingTabWidth / 2; + scrollLeft = (offset - scrollLeft) - (activeWidth / 2); + $this.scrollLeft(scrollLeft); + } + }); }); }).call(this); |