January 18, 2011

CSS Grab hand cursor

I wanted a grabby hand cursor in html since we're building sites that have draggable interfaces for both desktop browsers and touchscreen devices. I found some CSS that takes care of most modern browsers, and came up with a little extra for Internet Explorer and Chrome.

Here's the CSS:
#trackbar {
  width:100%;
  height:50px;
  cursor:hand;
  cursor:grab;
  cursor:-moz-grab;
  cursor:-webkit-grab;
}

#trackbar.custom_cursor {
  cursor: url(https://mail.google.com/mail/images/2/openhand.cur), default !important;
}

#trackbar.grabbing {
  cursor:grabbing;
  cursor:-moz-grabbing;
  cursor:-webkit-grabbing;
}

#trackbar.custom_cursor.grabbing {
  cursor: url(https://mail.google.com/mail/images/2/closedhand.cur), default !important;
}
The 3 cursor attributes looked great in most modern browsers, but didn't work in IE (obviously) or Chrome. I looked at some code in Google Maps and gleaned the custom cursors, which you can pull down locally, but you have to reference the .cur files absolutely, or they won't work in IE. Awesome. So, because we'd rather use CSS, we only apply the custom cursor files if you're in IE or Chrome. Something like this:
if( navigator.userAgent.match(/MSIE/i) || navigator.userAgent.match(/Chrome/i) ) document.getElementById('trackbar').className = 'custom_cursor';
I'm not sure if there's any way around it, but it doesn't seem like IE will change cursors after you mouse down. So if you add the "grabbing" class on a mousedown event, IE will block your grabby hands :(

7 comments:

  1. Nice post dude - just used the grab / grabbing cursors for my image drag/drop display order/arrangement screen. just adds that extra nice touch :)

    ReplyDelete
  2. Very Helpful! except it didn't work in chrome for me. Thanks!

    ReplyDelete
  3. Great post! This helped me out a lot.

    I think the problem with the mouse down in IE might be the dual class selector in the css. Older versions of IE don't support the css selector where you find an object that contains two classes. So the #trackbar.custom_cursor.grabbing selector may not work.

    As an alternative, add the class .custom_cursor_grabbing and add it to the element only if it hasClass('custom_cursor'). That way, it will only add the .custom_cursor_grabbing class when in IE or Chrome.

    I haven't tested that yet, but I think that might help!

    ReplyDelete
  4. it works in IE by ading it not to the mousedown event but to the start of the Drag event (not sure if it is clear, im not a programmer, only tried that out)

    ReplyDelete
  5. A year later and this post is still useful. Great work!

    ReplyDelete
  6. It won't work on IE because IE <9 won't support selectors with multiple classes! The fix, create a wrapper around the element, give the wrapper the custom_cursor class & give the element the grabbed class. When grabbed is added, this class on this element will override the cursor on the wrapper!

    ReplyDelete
  7. I have been using the move cursor a lot lately for drag and drop. But looks much better. Thanks!!

    ReplyDelete