Scrollable div plugin

by bitstarr

HTML

<div class="scrollable vertical">
    <button class="up">hoch</button>
    <ul>
        <li>test1</li>
        <li>test2</li>
        <li>test3</li>
        <li>test4</li>
        <li>test5</li>
        <li>test6</li>
        <li>test7</li>
        <li>test8</li>
        <li>test9</li>
        <li>test10</li>
        <li>test11</li>
        <li>test12</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
    </ul>
    <button class="down">runter</button>
</div>

<div class="scrollable horizontal">
    <button class="up">hoch</button>
    <ul class="clearfix">
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
    </ul>
    <button class="down">runter</button>
</div>

<div class="scrollable vertical">
    <button class="up">hoch</button>
    <ul>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
        <li>test</li>
       ...

CSS

.clearfix:before, .clearfix:after { content: "\0020"; display: block; height: 0; visibility: hidden }
.clearfix:after { clear: both }
.clearfix { zoom: 1 }

.scrollable { margin: 0 0 20px 10px }

.vertical ul { height: 200px; width: 50px; overflow: hidden }
.horizontal ul { height: 30px; width:200px; overflow: hidden }
.vertical li,
.horizontal li { display: block; height: 30px; width: 50px; background: #fc0 }
.horizontal li { float: left }

JavaScript

//todo: delegate?, get end of list to deactivate buttons?
(function($) {

    $.fn.scrollable = function(options) {

        //Set the default values
        var defaults = {
            scrollMe: 'ul',
            up: '.up',
            down: '.down'
        };

        var o = $.extend(defaults, options);

        return this.each(function() {
            //find necessary elements
            var el = $(this),
                scrollEl = el.find(o.scrollMe),
                scrollElHeight = scrollEl.height(),
                scrollElWidth = scrollEl.width(),
                horizontal = el.hasClass('horizontal'),
                up = el.find(o.up),
                down = el.find(o.down);

            //show error, if scrollable Element not found    
            if (scrollEl == null) {
                $.error('Zu scrollendes Element nicht gefunden');
            }

            //add event listener
            $(up).add(down).each(function(i) {
                $(this).bind('click', {
                    index: i
                }, function(e) {
                    e.preventDefault();
                    //get scrolldirection by index in selection and animate it 
                    if (horizontal) {
                        console.log('hor', e.data.index, scrollElWidth );
                        scrollEl.stop().animate({
                            scrollLeft: ((e.data.index) ? '+=' : '-=') + scrollElWidth + 'px'
                        });
                    }
                    else {
                        scrollEl.stop().animate({
                            scrollTop: ((e.data.index) ? '+=' : '-=') + scrollElHeight + 'px'
                        });
                    }
                });
            });

        });
    };


})(jQuery);

$('div.scrollable').scrollable();