<!--Insert in Head Section-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script>
(function($){
$.widget("suwala.doubleScroll", {
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'
},
contentCss: {
'overflow-x': 'scroll',
'overflow-y':'hidden'
}
},
_create : function() {
var self = this;
var contentElement;
// add div that will act as an upper scroll
var topScrollBar = $($(self.options.topScrollBarMarkup));
self.element.before(topScrollBar);
// find the content element (should be the widest one)
if (self.options.contentElement !== undefined && self.element.find(self.options.contentElement).length !== 0) {
contentElement = self.element.find(self.options.contentElement);
}
else {
contentElement = self.element.find('>:first-child');
}
// bind upper scroll to bottom scroll
topScrollBar.scroll(function(){
self.element.scrollLeft(topScrollBar.scrollLeft());
});
// bind bottom scroll to upper scroll
self.element.scroll(function(){
topScrollBar.scrollLeft(self.element.scrollLeft());
});
// apply css
topScrollBar.css(self.options.scrollCss);
self.element.css(self.options.contentCss);
// set the width of the wrappers
$(self.options.topScrollBarInnerSelector, topScrollBar).width(contentElement.outerWidth());
topScrollBar.width(self.element.width());
}
});
})(jQuery);
</script>
<script type="text/javascript">
$(document).ready(function(){
$('.double-scroll').doubleScroll();
});
</script>
<style>
.double-scroll{
width: 766px;
}
</style>
<!--Insert in Body Section Where you want to implement Double Scrollbar-->
<div class="double-scrollbar">
// your Content Goes Here
</div>
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.