jQuery UI Cursor Selection
In a recent post on providing jQuery UI Draggable Icons, I noted that switching the cursor setting to “pointer” on draggable page elements was a good idea because it indicated that the draggable element was actionable. While this was an improvement over the text-selection cursor the browser provided by default, I completely overlooked the existence of the move cursor. The move cursor is clearly the better choice in this case and I have updated my example code to use it.
I searched around and it turns out there are around thirty different cursors available to the browser that can easily be set with CSS. The Mozilla Developer Center offers a handy cursor test page, allowing us to view each of the standard cursors in action (by mousing over the values in the “CSS name” column). So, how can we use these cursor options to improve the usability of jQuery UI effects?
Resizables
Eight of those cursors are handles for manipulating the edges and corners of resizable elements. jQuery UI includes a resizable method, so let’s test it out. This is the HTML element we’ll be resizing:
<div class="resizable">I'm resizable</div>
And this is the jQuery UI JavaScript code need to make it resizable:
$('.resizable').resizable();
And a little CSS to style our HTML:
.resizable {
background-color: #ff8998;
border: 2px solid #d2412c;
height: 100px;
text-align: center;
width: 100px;
}
- Get the Code
- or see the working examples
Not bad at all! Notice how the correct cursor styles are displayed by the resizable handles even though we haven’t assigned any cursor styles in our CSS. jQuery UI takes care of selecting the cursors for us by default. It’s a great example of foresight by the jQuery UI team. But what about those draggables?
Draggables?
Unfortunately, jQuery UI does not automatically set the cursor to “move” when the user hovers over a draggable element. This seems like an oversight to me, but perhaps a default move cursor for draggables will make it’s way into a future release. In any case, it’s simple enough to set this property for ourselves. Just add cursor: move to the CSS definitions of all of your draggable elements.
What about AJAX?
AJAX routines are another aspect of jQuery that could be improved with some default cursor styling. Did you notice the animated progress cursor example on the Mozilla page? This is a great cursor for indicating that a process is operating in the background which will be completed shortly.
Where to attach it?
When we try to use this cursor on an AJAX form submission, one question quickly becomes apparent: Where should we attach it? Cursors change in accordance with the page element that is being hovered. But we want the progress cursor to remain on display regardless of which element the user hovers over, until the AJAX operation returns it’s data from the server. The solution is to assign the “progress” cursor to the <body> tag when the form is submitted and then reset the <body> tag’s cursor to “auto” when the return data arrives from the server. We can accomplish this with the following commands:
document.body.style.cursor = 'progress';
and:
document.body.style.cursor = 'auto';
Here’s how they might be used in an AJAX request script:
$('#my_form').submit(function() {
document.body.style.cursor = 'progress';
$.post('my_script.php', {
my_key: my_input_field_value
},
function(data) {
code_to_update_page;
document.body.style.cursor = 'auto';
});
return false;
});
Pseudo example
On my example page, the “ajax post” box provides a visual example of this effect. However, it is not a true working example, as no AJAX routine is actually being performed. Clicking the box simply sets the <body> cursor to “progress” for three seconds and then resets it to “auto”.
- Get the Code
- or see the working examples
Useful links:
I changed the AJAX example above to reset the cursor to “auto”, instead of resetting it to “default” as I had originally written. Using default will force the arrow cursor to display, while using auto allows the browser to display whichever cursor is appropriate to the page element that is being hovered, and is thus the preferred solution.
2 comments on this post…
Great article. We’ve considered defaulting draggable elements to have the move cursor, but instead we offer a cursor option. This isn’t quite the same, as it changes the cursor *during* the drag. But if it was cursor:move before the drag, then you’ve used up the logical “dragging” cursor. So, it’s up to the user in the end.
One other note, draggable elements get the ui-draggable css class and (during drag) ui-draggable-dragging for styling. So these are an alternative to targeting the elements directly.
Richard,
Thanks for the feedback. I’ll definitely give styling the ui-draggable and ui-draggable-dragging classes a try – didn’t notice these options in the documentation. The ui-draggable class sounds particularly helpful, since I assume it is applied when items are made draggable (on document ready in this case) and removed whenever draggable(‘disable’) or draggable(‘destroy’) is called. That’s much more convenient than having to write special code for adding and removing the cursor property. And you won’t end up with the move cursor over non-draggable items, which could happen if you assign the cursor manually (as I did) in each item’s CSS block.