advanced code snippet search

Posted By

davebowker on 06/18/09


Tagged

plugin jquery timeline effect overflow


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

koyotebr


jQuery Overflow Timeline Effect

 / Published in: jQuery
 

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

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 
  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. }

Report this snippet  

You need to login to post a comment.