Scroller (jQuery-UI) v3

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 scrollerClass = function (el, options) {
        //Vars
        var currentRate = options.step;//The distance of a scroll (increases on hold)
        var clickWait = 500;//number of ms before event is a "hold" not "click"
        var eventType = "click"; //hold or click
        var seamless = true;
        var frames; //array of grouped elements for each 'frame'
        var intialized = false;
        var frames = [];
        var currentFrame = 0;
        var afterFunction = function(){}
        //Timers
        var holdTimer;//Timer for a mouseHold Event
        var clickTimer;//Timer a mouseClick
        var autoScrollTimer;//
        
        function init(){
            console.log("etf", el)
            addFillerElements();
            
            if (!options.seamless){
                fixLayout();
            }
            else {
                makeSeamless();
            }
            markFrames();
        }
        
        function markFrames(){
            var elm_w = $(options.target, el).children("ul").children("li").width();
            var elm_h = $(options.target, el).children("ul").children("li").height();
            
            //if the container width or height is 0 we get it from child elms
            var container_w = $(el).width() ? $(el).width() : elm_w; 
            var container_h = $(el).height() ? $(el).height() : elm_h;
            
            var elmsToFrame_w = Math.floor(container_w / elm_w);
            var elmsToFrame_h = Math.floor(container_h / elm_h);
            var numElements = $(options.target, el).children("ul").children("li").length;
            console.log("from mark Frames ", elmsToFrame_w, elmsToFrame_h, elmsToFrame_w * elmsToFrame_h);
            
            var numFrames = numElements / ( elmsToFrame_w * elmsToFrame_h );
            console.log("mark frames ", numFrames);
            frames = [];
            for (var i = 0; i < numFrames; i++){
                var fromElm = i * (...