Scroller (jQuery-UI)

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: #738F00; 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: rgb(0, 119, 142); width: 646px;}
#vertical_scroller .scrollable { width: 600px;}
#vertical_scroller .up_scroll { text-align:center; }
#vertical_scroller .scroll_content { height:120px; text-align:center; margin-left:20px; margin-right:auto; }
#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;
    left:5px;
}
.disabled {
   ...

JavaScript

(function( $ ){
    var scrollerClass = function (el, options) {
        var holdTimer;
        var clickTimer;
        var currentRate = options.step;
        var clickWait = 500;//number of ms before event is a "hold" not "click"
        var eventType = "click"; //hold or click
        var seamless = true;
        var seamlessElmsSize = {width:600, height:120 };//unuse
        var duplicateElmsWidth = 600;
        var duplicateElmsHeight = 120;
        var autoScrollTimer;
        
        function scroll( direction ){
            if($(options.target).is(":animated")){
                currentRate++;
                return;
            }
            
            switch ( direction ) {
                case "up":
                    $(options.target, el).animate({ scrollTop : "-="+options.step }, options.speed, 
                                                  function(){edgeCheck($(options.target, el), 'direction')});
                    break;
                case "down":
                    $(options.target, el).animate({ scrollTop : "+="+options.step }, options.speed, 
                                                  function(){edgeCheck($(options.target, el), 'direction')});
                    break;
                case "left":
                    $(options.target, el).animate({ scrollLeft : "+="+options.step }, options.speed, 
                                                  function(){edgeCheck($(options.target, el), 'direction')});
                    break;
                case "right":
                    $(options.target, el).animate({ scrollLeft : "-="+options.step }, options.speed, 
                                                  function(){edgeCheck($(options.target, el), 'direction')});
                    break;
                default : 
                    break;
            }
        }
        
        var averageSize = function(elms){
            var resultWidth = 0;
            var resultHeight = 0;
            var totals =...