Here’s a quick update on the jQuery Poof Effect I described recently: Keith Baker has ported the effect to the MooTools JavaScript library and posted the code on his bestpract.us wiki. Great stuff. Check out the demo.
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?
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;
}
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?
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.
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.
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;
});
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”.
[UPDATE]: 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.Following up on my last post, jQuery UI Draggable Icons, which offered a way of presenting visual cues to help users identify draggable page elements, this article examines a technique for providing visual feedback when a page element is removed.
Mac OS X users will be familiar with the poof animation that occurs when application icons are removed from the dock. The animation looks nice, is unobtrusive, and provides a clear indication of the function being performed. Why not bring this effect to the web?
The jQuery library provides several methods for hiding the display of page elements or removing them entirely from the document tree. The remove() and hide() methods cause elements to disappear instantaneously. The sudden disappearance can leave your site visitors wondering exactly what happened when they clicked that delete button. The fadeOut() method, however, provides a more graceful exit. We’ll use that in our example. Let’s get started with the code:
<div class="deleteme">
delete me
</div>
Above is the HTML for the element we’ll be removing from the page. Now let’s remove it with jQuery:
$(document).ready(function() {
$('.deleteme').click(function() {
$(this).fadeOut('fast');
});
});
Here we use the standard jQuery technique of attaching event handlers to page elements when the document structure has finished loading. In the above code, each element that has a class name of “deleteme” is assigned an onclick event that when performed, causes the clicked element to quickly fade and become hidden. It works nicely and provides a base level of visual feedback for the user. But we can do better.
We’ll be creating our poof using sprite animation. Sprite animation is a technique in which all of the frames used in an animation sequence are collected side-by-side in a single image file. Only a small portion, or frame, of the complete image is displayed at a given time and the animation is composed by sequentially adjusting the visible portion of the image, much like a filmstrip. You can see the image we’ll be using for our animation to the right. It is divided into five frames.
Using an animated GIF might be easier and wouldn’t require as much coding, but sprite animation offers two distinct advantages: First, with sprite animation we have the option of using PNG images with alpha transparency (GIF offers only binary transparency and MNG support by the major browsers just never took off). Second, we can control the frame rate of sprite animations programatically, so a single image file can be animated at any speed by simply typing in the desired frame rate—no need to create a whole new version of the image file.
First, we’ll place an empty <div> tag on the page to hold the poof sprite:
<div class="poof"></div>
Then we can style it with CSS:
.poof {
background: transparent url(../images/poof.png) no-repeat 0 0;
cursor: pointer;
display: none;
height: 32px;
position: absolute;
width: 32px;
}
Here, the poof sprite (poof.png) is set as the background image and its top and left positions are both set to 0. The display is set to none, so the element is currently invisible. The height and width are both set to 32 pixels, which is the size of each frame in our animation. We have set the position type to absolute, but have not specified the top and left values. These we will handle in JavaScript with jQuery:
$(document).ready(function() {
$('.deleteme').click(function(e) {
var xOffset = 24;
var yOffset = 24;
$(this).fadeOut(’fast’);
$(’.poof’).css({
left: e.pageX - xOffset + ‘px’,
top: e.pageY - yOffset + ‘px’
}).show();
animatePoof();
});
});
Now, when the “.deleteme” element is clicked, the “.poof” animation is positioned next to our cursor (see the jQuery docs for more on how to use pageX and pageY to determine the cursor position). Its position relative to the cursor is determined by the xOffset and yOffset variables we defined. Next, we use .show() to turn the display of the poof animation on and run the animation by calling a separate function, animatePoof():
function animatePoof() {
var bgTop = 0;
var frames = 5;
var frameSize = 32;
var frameRate = 80;
for(i = 1; i < frames; i ++) {
$('.poof').animate({
backgroundPosition: '0 ' + (bgTop - frameSize) + 'px'
}, frameRate);
bgTop -= frameSize;
}
setTimeout("$('.poof').hide()", frames * frameRate);
}
The animatePoof() function is composed of a loop that resets the background-position of the .poof <div> by the height of one frame per iteration, creating a simple animation effect. The bgPosition variable represents the initial top position of the background-image. This value is decreased by 32 pixels on each iteration of the loop. The frameRate variable determines the speed of the animation. Here, each frame is displayed for 80 milliseconds. Once the animation has completed, we need to hide the poof <div> so that its presence (though invisible) will not block attempts to click other elements we want to delete. This is accomplished with the setTimeout call.
The poof image used in this example was created by The Kombine Group and is modeled after the Apple OS X dock poof. It is provided here for free and is licensed under both the GPL and MIT licenses—the same licensing used by the jQuery library itself.
Clicking the “Get the poof” button below will download a ZIP file containing the poof as a PNG file, a copy of the working example code, the MIT and GPL licenses and a layered PSD source file. In the PSD, each frame is 128 × 128 pixels, so you can use it for creating much larger poofs if you desire.
I’ve recently been working with jQuery UI draggable and droppable components and while the functionality is great and easy to implement, drag-and-drop does present a potential usability problem: drag-and-drop components are not yet in widespread use on the web and the average web surfer will not be expecting to discover them on your web site. Because of this, drag-and-drop components could get overlooked completely. How do we solve the problem?
We could provide text instructions on the page, explaining which objects are draggable and what to do with them, but we all know that people don’t read on the web; they scan. So, let’s give visitors a visual cue to help them quickly identify draggable components.
I’ve created a draggable icon to help address the problem. Actually, there are two icons: one for use on light backgrounds and another for dark backgrounds. The icons are 16 × 16 pixel PNG images with alpha transparency. Here’s the quick preview:
|
|
You can see the draggable icons in action on the example page.
In the example, I put the icons to use as background images in the headers of my draggable boxes. Here is the HTML:
<div class="draggable dark">
<h3 class="title">Dark background</h3>
</div>
In the CSS, .draggable h3 gets the background image and is assigned a 24 pixel left padding. Its line height is also set to 24 pixels and the icon is positioned 4 pixels from the top of it’s containing h3 tag in order to keep everything vertically aligned. Here is that bit of CSS:
.dark h3.title {
background: #36c url(../images/icon_draggable_dark.png) no-repeat 2px 4px;
color: #fff;
font-size: 12px;
font-weight: bold;
line-height: 24px;
margin: 0;
padding-left: 24px;
}
Note: line-height and padding-left should be set to at least 16 pixels each in order to display the full icon.
Also note that the draggable boxes have been assigned cursor: pointer in their CSS styles in order to display the pointing hand cursor when a user hovers over them. [Update: The cursor style has now been changed to "move". This is the better option and one I had previously overlooked.] This helps to indicate that the draggable box is an actionable object. Without this style, the default cursor in our example would have been the text selector, which is less suited to the functionality we are trying to emphasize.
The jQuery UI draggable icons are free and licensed under both the GPL and MIT licenses—the same licensing used for the jQuery JavaScript library itself. Basically, you can put the icons to any use you wish, whether personal or commercial, and you won’t have to jump through any special hoops in order to do so.
Clicking the “Get the icons” button below will download a ZIP file containing the two icons as PNG files, a copy of the working example code, the MIT and GPL licenses and a layered PSD source file, which is useful if you wish to customize the icon images in some way.
