jQuery Scrollable - First Draft

by wvega

HTML

<ul id="dropdown">
    <li>5 minutes</li>
    <li>15 minutes</li>
    <li>30 minutes</li>
    <li>45 minutes</li>
    <li>1 hour</li>
    <li>1 hour 15 minutes</li>
    <li>1 hour 30 minutes</li>
    <li>1 hour 45 minutes</li>
    <li>2 hour</li>
    <li>2 hour 15 minutes</li>
    <li>2 hour 30 minutes</li>
    <li>2 hour 45 minutes</li>
    <li>3 hour</li>
    <li>3 hour 15 minutes</li>
    <li>3 hour 30 minutes</li>
    <li>3 hour 45 minutes</li>
    <li>4 hour</li>
    <li>4 hour 15 minutes</li>
    <li>4 hour 30 minutes</li>
    <li>4 hour 45 minutes</li>
    <li>5 hour</li>
    <li>5 hour 15 minutes</li>
    <li>5 hour 30 minutes</li>
    <li>5 hour 45 minutes</li>
</ul>

CSS

body {
    background: #3B6594;
    padding: 10px;
}

/* viewport: a container for the dropdown
 * It defines the visible part of the control and hides the scrollbars */
.viewport {
    border: 1px solid #274361;
}
/* canvas: a scrollable container for the dropdown */
.canvas {
    /* do not use the padding property */
    background: #B5D931
}


ul {
    border: 1px solid #999;
    /* width + lateral border + lateral padding should equal viewport's width */
    width: 198px;
}
ul li {
    padding: 4px 10px;
}
ul li:hover {
    background: #C1C1C1;
}

JavaScript

(function($){

$.Scrollable = function(element, options) {
    var self = this;
    
    self.element = $(element);
    
    var w = options.width || self.element.outerWidth(),
        h = options.height || self.element.outerHeight();
        
    self.viewport = $('<div>', {
        'class': 'viewport',
        'css': {
            width: w, 
            height: h, 
            overflow: 'hidden'
        }
    });
    
    self.canvas = $('<div>', {
        'class': 'canvas',
        'css': {
            width: w, 
            height: h, 
            overflow: 'auto', 
            paddingRight: '40px'
        }
    });
    
    self.viewport.append(self.canvas);
    self.element.replaceWith(self.viewport);
    self.canvas.append(self.element);
    
    self.canvas.bind('scroll', function() {
        console.log(arguments)
    });
}

$(function() {
    $.Scrollable($('#dropdown'), {
        width: '200px', 
        height: '200px'
    });
})
    
})(jQuery);