CODEWITHSUNDEEP
jquerycssmouse-cursor
Mohammad
Mohammad

Reputation: 7418

How to get the mouse cursor do a grab on mouse down?

I have made a demo on JSFIDDLE
UPDATE this version works in FF but not chrome..
UPDATE 2 This website seems to have a working solution.

my Javascript is as follows

$("#click").live({
  mousedown: function() {
            this.addClass("closed");
        },
  mouseup: function() {
            this.removeClass("closed");
        }
});

and the CSS is as follows 

.closed {
    cursor: url(https://mail.google.com/mail/images/2/closedhand.cur), default !important;
}

But why doesn't the cursor become a closed hand on mouse down with this jQuery code? Thank you so much! Any help would be appreciated!

Upvotes: 13

Views: 17186

Answers (4)

gyo
gyo

Reputation: 1701

You can get the mouse cursor grab with CSS only:

/* Standard cursors */    
.element { cursor: grab; }
.element:active { cursor: grabbing; }

/* Custom cursors */
.element { cursor: url('open-hand.png'), auto; }
.element:active { cursor: url('closed-hand.png'), auto; }

Upvotes: 17

David
David

Reputation: 2232

2016 Update:

Needed to do this in a jQuery slider plugin I'm working on. What I did was define the cursors in CSS, then add/remove them on touch/mouse events with jQuery.

css:

.element:hover{
    cursor: move;
    cursor: -webkit-grab;
    cursor: grab;
}
.element.grabbing { 
    cursor: grabbing; 
    cursor: -webkit-grabbing;
}

JS:

$(".element").on("mousedown touchstart", function(e) {
    $(this).addClass('grabbing')
})

$(".element").on("mouseup touchend", function(e) {
    $(this).removeClass('grabbing')
})

Upvotes: 7

Branko Corilic
Branko Corilic

Reputation: 9

$(document).ready(function() {
  $(".surface").mouseup(function(){
        $(".surface").css( "cursor","crosshair");
      }).mousedown(function(){
        $(".surface").css( "cursor","wait");
      });
});

Make in css .surface{cursor:crosshair;} If you want to have mouse down/up just change the cursors to hand up/down icon. Hope this helps.

Upvotes: 0

Simon Scarfe
Simon Scarfe

Reputation: 9628

the syntax you're using wasn't introduced until 1.4.3 (documented here), your jsFiddle uses 1.4.2. Your jsFiddle also adds a class to this, rather than $(this).

But I'm also not sure about how the cursor CSS reacts to mousedown and mouseup - I have a feeling that may be limiting in some browsers, a bit of fiddling got it working on mouseup, but not mousedown - which seems strange.

Upvotes: -1

Related Questions