www.webdeveloper.com
Results 1 to 3 of 3

Thread: mouse position event within functions

  1. #1
    Join Date
    May 2010
    Posts
    2

    mouse position event within functions

    hi there,
    i have a popup menu that i want to come up after holding down the mouse for a certain time period.
    however it doesn't seem to be accepting the e.pageX and e.pageY values that i'm assigning to it's left and top styles.
    here's my code (i'm using jquery):

    Code:
    <script type="text/javascript">
    
    var count = 0;
    
    $(document).mousedown(function() {
    	timer = setInterval("StartCount()", 100);
    });
    
    
    function StartCount() {
    	if (count > 5) {
    		MenuAppear();
    		clearInterval(timer);
    		count = 0;
    	}
    	else {
    		count++;
    	}
    }
    
    function MenuAppear(e) {
    	$('#menu').css('left', e.pageX).css('top', e.pageY);
    	$('#menu').fadeIn(100);
    }
    
    $(document).mouseup(function() {
    	$('#menu').fadeOut(100);
    	clearInterval(timer);
    	count = 0;
    });
    
    </script>
    i tried adding the parameter "e" into every parent function of MenuAppear() but that didn't solve it.
    hopefully someone will know more about events than i do.
    thanks

  2. #2
    Join Date
    May 2010
    Posts
    213
    Quote Originally Posted by atomicboy View Post
    i tried adding the parameter "e" into every parent function of MenuAppear() but that didn't solve it.
    Yeah, but you forgot to get that parameter. If you had checked the example on jQuery's website, you would have seen that the mousedown (and other mouse events) gives you the "mouse" as a parameter. Then you can just save that as a global variable and access it whenever you need. Like so:

    Code:
    		var count = 0;
    		var event;
    
    		$(document).mousedown(function(e) {
    			event = e;
    			timer = setInterval("StartCount()", 100);
    		});
    
    
    		function StartCount() {
    			if (count > 5) {
    				MenuAppear();
    				clearInterval(timer);
    				count = 0;
    			}
    			else {
    				count++;
    			}
    		}
    
    		function MenuAppear() {
    			$('#menu').css('left', event.pageX).css('top', event.pageY);
    			$('#menu').fadeIn(100);
    		}
    
    		$(document).mouseup(function() {
    			$('#menu').fadeOut(100);
    			clearInterval(timer);
    			count = 0;
    		});
    Last edited by 3Nex; 05-09-2010 at 03:56 AM.
    i love easter eggs
    (if you got any creative easter eggs, send me a PM)

  3. #3
    Join Date
    May 2010
    Posts
    2
    ok i think i understand it now, thanks!
    works great.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles