2

I decided to make/test Cursors cross-browser, so far on Firefox its working perfect, but on Chrome - somewhat..

Now, the custom cursor shows, but when you click somewhere, it doesn't change, it does trigger mousedown event, but it doesn't change the cursor. I tried just mousedown(); and it changed the cursor. I guess the the mouseup event is causing this trouble.

$("body").mousedown(function() {
    $("body").addClass("clicked");
    console.log("down");
});
$("body").mouseup(function() {
    $("body").removeClass("clicked");
    console.log("up");
});

CSS

    body {
        cursor: url("../img/cursor1.cur"), default;
    }
    .clicked {
        cursor: url("../img/cursor2.cur"), default;
    }
Improve this question
6
  • So ... what does the CSS look like? Commented Oct 3, 2011 at 18:21
  • What cursor are you trying to add? Can you post the CSS? Commented Oct 3, 2011 at 18:22
  • Can you provide absolute urls to those two cursors? Commented Oct 3, 2011 at 18:50
  • This should work properly. I'm guessing you just missed that your 'body' element has no layout... See @Sam s answer. Commented Oct 3, 2011 at 18:54
  • @sg3s highhigh.magnumweb.com.br/img/cursor1.cur and highhigh.magnumweb.com.br/img/cursor2.cur Don't be confused, this is not website I'm editing. Commented Oct 3, 2011 at 19:03

3 Answers 3

Reset to default
2

Try clicking and moving the mouse.

I think chrome only changes cursor on mousemove.

EDIT: This is a known bug, see Getting the browser cursor from "wait" to "auto" without the user moving the mouse

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Ehh, what a shame. I guess I will have to use lame workaround. Thanks for helping.
0

I just tried out the following:

$('body').mousedown(function(){
  $(this).css('background-color', 'red');
});
$('body').mouseup(function(){
  $(this).css('background-color', 'green');
});

The result was as expected, click down -> red BG, click up -> green BG

BUT: this only happened, when i assigned css: html, body { height:100%; min-height:100%; } Without the CSS the events were not really working as "fluent" as they should be.

Little tip: with firebug (at least chrome dev tools) you can monitor events using the following snipped:

monitorEvents(  $$('body')[0] )

Hope this helped

Improve this answer

4 Comments

I have no problems with mouse event. But thanks for trying to help.
ah ok, then i kinda misunderstood your problem, though i must admit i don't really understand your CSS, why not just assigning a:active cursor 2? Wheres the sense with the body.clicked?
I updated the CSS for you, since I didn't understand your question. But it doesn't change anything anyway.
ah okay, i see the problem now. It appears to have something to do with the cursor itself. My guess - and nothing more than this - is, that browsers just do specific stuff with the cursor when pressed. I can't get the "mousedown" even to change the cursor either, mouseup works. It just changes once i stop clicking the buttom. Keeping the mouse pressed is seen as "selecting-mode" so i get the selection "cursor:text"-cursor :S
0

The problem is that you are using the global window.event object, and not jQuery's event object. window.event only works in some browsers, and it is not a W3C standard.

jQuery normalizes the event object so it's the same in all browsers. The event handler is passed that jQuery event object as a parameter. You should be using that.

$(".class_name").mousedown(function (e) {

  switch (e.which) {
    case 1: //leftclick
        //...
        break;
    case 3: //rightclick
        //...
        break;
  }
});
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.