Payament
Free Photos
WordPress Themes

Creating Double Horizontal Scrollbar

<!--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.