Revision: 14950
Updated Code
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
Updated Code
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
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
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