Advanced Search

jQuery Overflow Timeline Effect

/ Published in: jQuery
Save to your folder(s)
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 
  1. $('#timeline').mousedown(function(event){
  2.     $(this).css({
  3. 		cursor: 'grabbing',
  4. 		cursor: '-moz-grabbing'
  5. 	}).data('down', true).data('x', event.clientX).data('scrollLeft', this.scrollLeft);
  6.     return false;
  7. }).mouseup(function(event){
  8.     $(this).css({
  9. 		cursor: 'grab',
  10. 		cursor: '-moz-grab'
  11. 	}).data('down', false);
  12. }).mousemove(function(event){
  13.     if ($(this).data('down') == true) {
  14.         this.scrollLeft = $(this).data('scrollLeft') + $(this).data('x') - event.clientX;
  15. 		//this.scrollLeft = $(this).data('scrollLeft') + ($(this).data('x') - event.clientX) * 2; // twice as fast
  16.     }
  17. }).mousewheel(function(event, delta){
  18.     this.scrollLeft -= (delta * 30);
  19. 	return false;
  20. }).css({
  21. 		overflow: 'hidden',
  22. 		cursor: 'grab',
  23. 		cursor: '-moz-grab',
  24. 	});
  25. });
  26.  
  27. $(window).mouseout(function(event){
  28. if ($('#timeline').data('down')) {
  29.     try {
  30.         if (event.originalTarget.nodeName == 'BODY' || event.originalTarget.nodeName == 'HTML') {
  31.             $('#timeline').data('down', false);
  32.         }
  33.     } 
  34.     catch (e) {
  35.     }
  36. }

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

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.