Return to Snippet

Revision: 14950
at June 18, 2009 07:11 by davebowker


Updated Code
$('#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) {
    }
}

Revision: 14949
at June 18, 2009 07:10 by davebowker


Updated Code
$('#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) {
    }
}
});

Revision: 14948
at June 18, 2009 07:07 by davebowker


Initial Code
$('#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) {
                    }
                }
            });

Initial URL
http://jqueryfordesigners.com/fun-with-overflows/

Initial Description
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.

Initial Title
jQuery Overflow Timeline Effect

Initial Tags
plugin, jquery

Initial Language
jQuery