Skip to content

Feature/amd #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Feature/amd #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d0ff724
Fixed formatting
vsuharnikov Nov 17, 2014
671932a
AMD support
vsuharnikov Nov 17, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Empty file added .gitignore
View file
Open in desktop
Empty file.
52 changes: 30 additions & 22 deletions jquery.doubleScroll.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,28 +10,36 @@
* http://www.opensource.org/licenses/mit-license.php
* http://www.gnu.org/licenses/gpl.html
*/

(function($){

(function (factory) {
if (typeof define === 'function' && define.amd) {
// AMD. Register as an anonymous module.
define(['jquery'], factory);
} else {
// Browser globals
factory(jQuery);
}
}(function ($) {
$.widget("suwala.doubleScroll", {
options: {
options: {
contentElement: undefined, // Widest element, if not specified first child element will be used
topScrollBarMarkup: '<div class="suwala-doubleScroll-scroll-wrapper" style="height: 20px;"><div class="suwala-doubleScroll-scroll" style="height: 20px;"></div></div>',
topScrollBarInnerSelector: '.suwala-doubleScroll-scroll',
scrollCss: {
'overflow-x': 'scroll',
'overflow-y':'hidden'
topScrollBarMarkup: '<div class="suwala-doubleScroll-scroll-wrapper" style="height: 20px;"><div class="suwala-doubleScroll-scroll" style="height: 20px;"></div></div>',
topScrollBarInnerSelector: '.suwala-doubleScroll-scroll',
scrollCss: {
'overflow-x': 'scroll',
'overflow-y': 'hidden'
},
contentCss: {
'overflow-x': 'scroll',
'overflow-y':'hidden'
}
},
_create : function() {
contentCss: {
'overflow-x': 'scroll',
'overflow-y': 'hidden'
}
},
_create: function () {
var self = this;
var contentElement;
var contentElement;

// add div that will act as an upper scroll
var topScrollBar = $($(self.options.topScrollBarMarkup));
var topScrollBar = $($(self.options.topScrollBarMarkup));
self.element.before(topScrollBar);

// find the content element (should be the widest one)
Expand All @@ -43,12 +51,12 @@
}

// bind upper scroll to bottom scroll
topScrollBar.scroll(function(){
topScrollBar.scroll(function () {
self.element.scrollLeft(topScrollBar.scrollLeft());
});

// bind bottom scroll to upper scroll
self.element.scroll(function(){
self.element.scroll(function () {
topScrollBar.scrollLeft(self.element.scrollLeft());
});

Expand All @@ -60,11 +68,11 @@
$(self.options.topScrollBarInnerSelector, topScrollBar).width(contentElement[0].scrollWidth);
topScrollBar.width(self.element[0].clientWidth);
},
refresh: function(){
refresh: function () {
// this should be called if the content of the inner element changed.
// i.e. After AJAX data load
var self = this;
var contentElement;
var contentElement;
var topScrollBar = self.element.parent().find('.suwala-doubleScroll-scroll-wrapper');

// find the content element (should be the widest one)
Expand All @@ -80,4 +88,4 @@
topScrollBar.width(self.element[0].clientWidth);
}
});
})(jQuery);
}));