Most of the sidebar icons come from our stock set (along with a few from other sources). The icons look a bit squashed because they’re using the 32 pixel icons from the free set and scaling them to 16 pixels (Note: our pro toolbar icon set includes meticulously sized 16 pixel versions of these icons).

It’s great to see the icons being put to good use in the wild. Browser interfaces will doubtless evolve quickly over the coming years and we’re proud to be (even tangentially) involved in the discussion of where they should go. A few more threads in the conversation can be found at:

• Aza Raskin’s post on moving Firefox tabs to the sidebar (Aza is head of User Experience for Mozilla Labs)
• Frederic Lardinois’ article on a tabless Firefox with built-in Ubiquity at ReadWriteWeb

Oh, and Mozilla—if you’re looking for some new icon designs, we’re available to hire :-)

Last month I responded to a request in Peter Shankman’s HARO [Help A Reporter Out] email from prolific tech writer Pam Baker. She was working on a piece titled Twitter and the Future of Discourse. Her query included several questions about Twitter such as:

• Is it a fad or is it here to stay?
• Will its 140 character limit on messages feed its success or prove to be a fatal flaw?
• And, is Twitter “reversing the course of intelligent conversation, taking us back to
  toddler language skills?”

I found her questions genuinely interesting, so I took some time to think through and respond to all of them. I began anticipating reading her article as soon as I sent her my thoughts, and was very pleasantly surprised to find out a few weeks later [thanks to Kreg's Google Alerts] that I’d been quoted in the article.

Since then Pam’s Twitter and the Future of Discourse Part 2 has been published on Technology News – check it out, both are worth reading. And no, not because of my two cents – there are many stronger points made by Pam herself and the others who responded to her.

Peter deserves a lot of credit for putting together HARO and making it possible for reporters to connect with an increasingly broad source of contacts for their research and writing in an efficient, timely manner. I know that without Haro this would never have happened. Thank you to Peter and Pam for giving the Twitter community [and others] the opportunity to participate in journalism in the midst of its huge upheaval, and hopefully – its renaissance.

Contact us if you’d like to learn more about this project and/or if you’re interested in a new custom site with great features that is also easy to maintain.

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:

• Get jQuery
• Get jQuery UI

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.

The poof effect

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?

Download the Script

or check out the demo page

Hiding and removing elements with jQuery

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.

Elements of a poof

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.

Why use sprite animation?

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.

Displaying and animating the sprite

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.

License

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.

Download

Clicking the “Download the Script” link 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.

Download the Script

or check out the demo page

Download the Icons

or check out the demo page

Users need a hint

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.

The icons

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 demo page.

Making use of the icons

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. 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.

License

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.

Download the Icons

or check out the demo page

A solution to our dilemma arrived in the form of CSS themes. After a bit of fiddling with JavaScript and alternate stylesheets, visitors to our site can now select a theme of their choice and completely refashion the look of the site with a single click. Give it a try—you can choose a theme by selecting it in the drop-down menu in the upper-right corner of this page.

We’ve set up two main themes (“classic” and “cool breeze”) with large print alternatives for each. Plus there’s a high contrast version (larger print with light text on a dark background) as well as a completely unstyled version in case you’re into that sort of thing.

Offering alternate site themes that radically reshape page layout and design (such as switching from “classic” to “cool breeze”) makes sense on a site offering web design services, but would probably not benefit many other businesses. The ability to offer large print versions of a site however, has a universal application and should be more pervasive on the web.

Setting up a website for theming requires a strict separation between structure and style. We eliminated inline styles and image tags as much as possible and of course, laying out the pages with CSS rather than tables is imperative. The graphic look of our themes is created with CSS and background images and the style switching is handled with a slightly modified version of the script described in this article on A List Apart.

If you haven’t tried Vienna yet, give it a shot—it’s an excellent, full-featured and free alternative to paid newsreaders. And you can give Prague a whirl by selecting it from the View / Style menu.

First, if you haven’t already, check out the site and let us know what you think. Next I’d like to point out our Industry News aggregation widget [News from around the web »] This widget is no longer available. It’s another one of Kreg’s creations and one that can be habit forming.

Brian has also put together a couple of cool apps that you may find useful. If you are struggling with leviathan-length URLs, head over to Shortify. If you’d like to quickly create a web page or make some notes publicly or privately, check out his Wikinote.

Recent projects here have included:

• Launching TechnicalProse.com
• The refresh of the Mr Box site, mostly the CSS and backend functionality
• Ongoing maintenance and backend functionality enhancements for ProTrails.com
• A bunch of stuff we can’t say a lot about for a well known technology company, including marketing collateral and sales training

Semi-random suggested reading: The Best of Brochure Design 9
This series of books has been a running favorite at Kombine for several years.