Posted By

davebowker on 06/18/09

Tagged

Versions (?)

Last Edited at 06/18/09 07:07am

Statistics

Viewed 802 times

Favorited by 0 user(s)

Related snippets

jQuery Overflow Timeline Effect

/ Published in: jQuery

Modified the code very slightly to add in cursor states for when the timeline is grabbed. Also added in (but commented out) the code to make the sliding twice as fast using a multiplier.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

$('#timeline').mousedown(function(event){
    $(this).css({
		cursor: 'grabbing',
		cursor: '-moz-grabbing'
	}).data('down', true).data('x', event.clientX).data('scrollLeft', this.scrollLeft);
    return false;
}).mouseup(function(event){
    $(this).css({
		cursor: 'grab',
		cursor: '-moz-grab'
	}).data('down', false);
}).mousemove(function(event){
    if ($(this).data('down') == true) {
        this.scrollLeft = $(this).data('scrollLeft') + $(this).data('x') - event.clientX;
		//this.scrollLeft = $(this).data('scrollLeft') + ($(this).data('x') - event.clientX) * 2; // twice as fast
    }
}).mousewheel(function(event, delta){
    this.scrollLeft -= (delta * 30);
	return false;
}).css({
		overflow: 'hidden',
		cursor: 'grab',
		cursor: '-moz-grab',
	});
});
 
$(window).mouseout(function(event){
if ($('#timeline').data('down')) {
    try {
        if (event.originalTarget.nodeName == 'BODY' || event.originalTarget.nodeName == 'HTML') {
            $('#timeline').data('down', false);
        }
    } 
    catch (e) {
    }
}