Scroller (jQuery-UI) v4

by amindunited

HTML

<div class="ux_elm clearfix" id="side_scroller">
    <div class="scrollable">
        <div class="scrollButton left_scroll"><<</div>
        <div class="scroll_content">
            <ul id="list">
                <li><div class="block_div">1</div></li>
                <li><div class="block_div">2</div></li>
                <li><div class="block_div">3</div></li>
                <li><div class="block_div">4</div></li>
                <li><div class="block_div">5</div></li>
                <li><div class="block_div">6</div></li>
                <li><div class="block_div">7</div></li>
                <li><div class="block_div">8</div></li>
                <li><div class="block_div">9</div></li>
                <li><div class="block_div">10</div></li>
                <li><div class="block_div">11</div></li>
                <li><div class="block_div">12</div></li>
                <li><div class="block_div">13</div></li>
                <li><div class="block_div">14</div></li>
                <li><div class="block_div">15</div></li>
                <li><div class="block_div">16</div></li>
            </ul>
        </div>
        <div class="scrollButton right_scroll">>></div>
    </div>
</div>

            
            <!--  vertical scroller -->
<div class="ux_elm clearfix" id="vertical_scroller">
    <div class="scrollable">
        <div class="scrollButton up_scroll">&#9650;</div>
        <div class="scroll_content">
            <ul id="list">
                <li><div class="block_div">1</div></li>
                <li><div class="block_div">2</div></li>
                <li><div class="block_div">3</div></li>
                <li><div class="block_div">4</div></li>
                <li><div class="block_div">5</div></li>
                <li><div class="block_div">6</div></li>
                <li><div class="block_div">7</div></li>
                <li><div class="block_div">8</div></li>
                <li><div class="block_div">9</div></li>
                <li><div...

CSS

div { border:solid 0px gray; }

.clearfix:after { clear:both; content: '.'; display:block; height: 0px; visibility:hidden; }

#side_scroller {background-color: #efefff; width: 846px;}
.scrollable {width: 846px;}
.left_scroll { height: 120px; float:left; width:20px;}
.scroll_content { overflow:hidden; width: 800px; height:120px; position:relavtive; float:left; }
.right_scroll { height: 120px; float:right; width:20px; }


ul { height: 120px;}
ul {list-style-position:inside; }
li { float:left; display:inline; position:relative;}
ul li img { width:200px;}
.block_div { width:200px; height: 120px; display:inline-block; }

#vertical_scroller { background-color: #ffefef; width: 646px;}
#vertical_scroller .scrollable { width: 600px;}
#vertical_scroller .up_scroll { text-align:center; }
#vertical_scroller .scroll_content { overflow:hidden; height:120px; text-align:center; margin-left:20px; margin-right:auto; width: 600px; }
#vertical_scroller .down_scroll { text-align:center; clear: both;}
#vertical_scroller ul { width:600px; }
#vertical_scroller ul li { height:120px; overflow:hidden;}
.scrollButton {
    
    background: -moz-linear-gradient(top,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,0.65))); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* IE10+ */
    background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
}
/* Image detials stuff */
.image_details {
    position:absolute;
    top:5px;
   ...

JavaScript

(function( $ ){
    var params = {
        //Vars
        currentRate : null,//The distance of a scroll (increases on hold) *defaults to the step value
        clickWait : 500,//number of ms before event is a "hold" not "click"
        eventType : "click", //hold or click
        //seamless : true,
        frames : [], //array of grouped elements for each 'frame'
        //intialized : false,
        currentFrame : 0,
        afterFunction : function(){},
        //Timers
        holdTimer : null,//Timer for a mouseHold Event
        clickTimer: null,//Timer a mouseClick
        autoScrollTimer:null,//
    
    }
    var methods = {
        init : function( options ){
            var args = $.extend({}, $.fn.scroller.defaults, options);//join the arguments and the default values
            args = $.extend({}, params, args);//join the params into the arguments, and default values
            console.log(this, options, params, args);
            //'this' will get lost, so we'll hold it in data.el (el for element...the element key is used for the el's className or id) 
            args.el = this;
    
            //For now, overwrite the step option with the width/hieght of the display area, it makes thing easier
            if (args.type=="vertical"){
                args.step = $(args.target, $(args.el)).height();
            }
            else {                    
                args.step = $(args.target, $(args.el)).width();
            }
            console.log("I've reset the step value to ", args.step);
    
            var $this = $(this),
                data = $this.data('scroller')
                
            if( !data ){
                $(this).data('scroller', args)
            }
            console.log($(this).data().scroller);
            //methods.addFillerElements();
            methods.addFillerElements.apply( $(this) );
    
            if ( !args.seamless ){
                methods.fixLayout.apply( $(this) );
            }
            else {
...