Move mouse over the widget.
HTML
<div id="scrolled">
<table id="scrolled_table">
<tbody>
<tr>
<td>First List</td>
<td>second List</td>
<td>third List</td>
...
</tr>
</tbody>
</table>
</div>
CSS
#scrolled{
width:380px;
height:80px;
background:#36fcb6;
overflow:hidden;
border:3px double #ca023f;
margin:50px auto;
position:relative;
}
#scrolled_table{
margin:0;
padding:0;
width:100%;
position:relative;
}
Javascript
<script>
window.onload = function(){
var t = document.getElementById('scrolled_table');
var tds = t.getElementsByTagName('td');
for ( var i=0;i<tds.length;i++ ) {
tds[i].className = 'item';
tds[i].onclick = function(i){
return function(){
alert(i+1);
}
}(i);
}
var myScroller = new Wdg.scroller();
var config = {scrollerId:'scrolled',scrolledTableId:'scrolled_table'};
myScroller.init(config);
};
</script>
Javascript widget file
scroller.js