Change cursor on mousedown?

**pookeyblow** · 12-18-2009, 12:07 AM

Hi.

I'm using a custom cursor on my site and would like to change it to another custom cursor when the mouse button is pressed down.

Anyone knows how to do this?

I found a script some time ago that might have a similar functionality. Don't exactly remember where I found it though.

Code:

	$('body' + panId).mousedown(function(e) {
			
			mouseState = 'down';
			
			
			$(this).css('closedhand.cur','move');

			return false
		});

		$('body' + panId).mouseup(function(e) {

			mouseState = 'up';
		

			$(this).css('openhand.cur','move');

Not sure if this is can be used in any way?

I'm pretty clueless here so some help would be great!

**jscheuer1** · 12-18-2009, 05:50 AM

It would be:

Code:

$(this).css('cursor', 'url(closedhand.cur),move');

But there is no need to use $(this), one may:

Code:

this.style.cursor = 'url(closedhand.cur),move';

It's more efficient, and the $(this) gives no advantage here.

Another thing, where you have:

Code:

$('body' + panId)

Selectors in jQuery are (for the most part, there are extra ones) identical to css selectors. So that might not be what you expect. It should resolve to either:

Code:

$('body, #some_literal_id')

or to:

Code:

$('body #some_literal_id')

If it doesn't, it will not be selecting what you think it is. In the above, a class may be used (.some_literal_class in place of #some_literal_id).

**pookeyblow** · 12-20-2009, 02:01 PM

not sure if I got it..

I tried this, but I couldn't get it to work. Can I put it in an external js document?

Code:

	$('#body').mousedown(function(e) {
			
			mouseState = 'down';
			
			
			this.style.cursor = 'url(closedhand.cur),move';


			return false
		});

		$('#body').mouseup(function(e) {

			mouseState = 'up';
		

			$(this).css('openhand.cur','move');

**jscheuer1** · 12-20-2009, 03:25 PM

That second one isn't even a function. Also, somethings I forgot to mention, you cannot do anything (including assign events to it) to the body until it's parsed, and if there is no content in the body, the mouse isn't doing anything to the body.

Try:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($){
	$('body').css('cursor', 'url(openhand.cur), default').mousedown(function(){
		this.style.cursor = 'url(closedhand.cur), move';
		return false;
	}).mouseup(function(){
		this.style.cursor = 'url(openhand.cur), default';
	});
});
</script>
</head>
<body>
<p>Hi</p>
<p>Hi</p>
<p>Hi</p>
<p>Hi</p>
<p>Hi</p>
<p>Hi</p>
<p>Hi</p>
<p>Hi</p>
<p>Hi</p>
<p>Hi</p>
<p>Hi</p>
<p>Hi</p>
<p>Hi</p>
<p>Hi</p>
<p>Hi</p>
<p>Hi</p>
<p>Hi</p>
<p>Hi</p>
<p>Hi</p>
<p>Hi</p>
<p>Hi</p>
<p>Hi</p>
<p>Hi</p>
<p>Hi</p>
<p>Hi</p>
<p>Hi</p>
<p>Hi</p>
</body>
</html>

One other thing, returning false onmousedown of the body might prevent links from firing for some.

**pookeyblow** · 12-20-2009, 09:34 PM

got it to work..

too bad it does‘t work in FF for Mac...

https://bugzilla.mozilla.org/show_bug.cgi?id=286304

**jscheuer1** · 12-22-2009, 02:25 PM

Originally Posted by pookeyblow

got it to work..

too bad it does‘t work in FF for Mac...

https://bugzilla.mozilla.org/show_bug.cgi?id=286304

What the heck does that mean? I swear, those bug reports are so obscure. Even when they're about an issue I've seen and fully understand, I find them so dense and full of double talk as to make them almost useless. I have no Mac to test on so I cannot see for myself this problem, if any (sounds like they are working on it). Have you actually seen this problem in Firefox on Mac?

Bottom line - If it's a problem with that browser not complying with standards, which it appears to be (why can't they just say that?), they will fix it.

**pookeyblow** · 12-23-2009, 12:44 AM

ok

I've tried it on my mac. For some reason custom cursors does not work in FF. It works in Chrome and Safari for mac though..

**jscheuer1** · 12-23-2009, 03:24 AM

It should at least show the fall back cursor then, does it? If not, it is a problem with executing javascript cursor style changes in general, which is what I thought that bug report was all about. But as I said, I couldn't be certain what the bug report was saying.

Thread: Change cursor on mousedown?

Thread Tools

Search Thread

Change cursor on mousedown?

The Following User Says Thank You to jscheuer1 For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions