From eb9f19e89e34eb4d573b67d9a2a7ad45ea71f393 Mon Sep 17 00:00:00 2001 From: gebele Date: Mon, 1 Feb 2016 15:35:08 +0100 Subject: top scroll, tox colum changes, added ID links --- public/javascripts/jquery.doubleScroll.js | 126 ++++++++++++++++++++++++++++++ 1 file changed, 126 insertions(+) create mode 100644 public/javascripts/jquery.doubleScroll.js (limited to 'public/javascripts/jquery.doubleScroll.js') diff --git a/public/javascripts/jquery.doubleScroll.js b/public/javascripts/jquery.doubleScroll.js new file mode 100644 index 0000000..8b19df8 --- /dev/null +++ b/public/javascripts/jquery.doubleScroll.js @@ -0,0 +1,126 @@ +/* + * @name DoubleScroll + * @desc displays scroll bar on top and on the bottom of the div + * @requires jQuery + * + * @author Pawel Suwala - http://suwala.eu/ + * @author Antoine Vianey - http://www.astek.fr/ + * @version 0.5 (11-11-2015) + * + * Dual licensed under the MIT and GPL licenses: + * http://www.opensource.org/licenses/mit-license.php + * http://www.gnu.org/licenses/gpl.html + * + * Usage: + * https://github.com/avianey/jqDoubleScroll + */ + (function( $ ) { + + jQuery.fn.doubleScroll = function(userOptions) { + + // Default options + var options = { + contentElement: undefined, // Widest element, if not specified first child element will be used + scrollCss: { + 'overflow-x': 'auto', + 'overflow-y': 'hidden' + }, + contentCss: { + 'overflow-x': 'auto', + 'overflow-y': 'hidden' + }, + onlyIfScroll: true, // top scrollbar is not shown if the bottom one is not present + resetOnWindowResize: false, // recompute the top ScrollBar requirements when the window is resized + timeToWaitForResize: 30 // wait for the last update event (usefull when browser fire resize event constantly during ressing) + }; + + $.extend(true, options, userOptions); + + // do not modify + // internal stuff + $.extend(options, { + topScrollBarMarkup: '
', + topScrollBarWrapperSelector: '.doubleScroll-scroll-wrapper', + topScrollBarInnerSelector: '.doubleScroll-scroll' + }); + + var _showScrollBar = function($self, options) { + + if (options.onlyIfScroll && $self.get(0).scrollWidth <= $self.width()) { + // content doesn't scroll + // remove any existing occurrence... + $self.prev(options.topScrollBarWrapperSelector).remove(); + return; + } + + // add div that will act as an upper scroll only if not already added to the DOM + var $topScrollBar = $self.prev(options.topScrollBarWrapperSelector); + + if ($topScrollBar.length == 0) { + + // creating the scrollbar + // added before in the DOM + $topScrollBar = $(options.topScrollBarMarkup); + $self.before($topScrollBar); + + // apply the css + $topScrollBar.css(options.scrollCss); + $self.css(options.contentCss); + + // bind upper scroll to bottom scroll + $topScrollBar.bind('scroll.doubleScroll', function() { + $self.scrollLeft($topScrollBar.scrollLeft()); + }); + + // bind bottom scroll to upper scroll + var selfScrollHandler = function() { + $topScrollBar.scrollLeft($self.scrollLeft()); + }; + $self.bind('scroll.doubleScroll', selfScrollHandler); + } + + // find the content element (should be the widest one) + var $contentElement; + + if (options.contentElement !== undefined && $self.find(options.contentElement).length !== 0) { + $contentElement = $self.find(options.contentElement); + } else { + $contentElement = $self.find('>:first-child'); + } + + // set the width of the wrappers + $(options.topScrollBarInnerSelector, $topScrollBar).width($contentElement.outerWidth()); + $topScrollBar.width($self.width()); + $topScrollBar.scrollLeft($self.scrollLeft()); + + } + + return this.each(function() { + + var $self = $(this); + + _showScrollBar($self, options); + + // bind the resize handler + // do it once + if (options.resetOnWindowResize) { + + var id; + var handler = function(e) { + _showScrollBar($self, options); + }; + + $(window).bind('resize.doubleScroll', function() { + // adding/removing/replacing the scrollbar might resize the window + // so the resizing flag will avoid the infinite loop here... + clearTimeout(id); + id = setTimeout(handler, options.timeToWaitForResize); + }); + + } + + }); + + } + +}( jQuery )); -- cgit v1.2.3