JQuery_ Novice to Ninja - Earle Castledine [117]
As this is jQuery, there are many ways to put this together. Our approach will be to insert a new element that’s initially hidden, positioned such that it sits directly centered and slightly above the element that triggers the action. For our triggers, we have some simple anchor tags that act as “Add to wishlist” links. When they’re clicked, a notice saying “Adding” will appear above the link and rapidly fade out while moving upwards. Once the animation finishes, the button will change to “Added” and the interaction is complete:
chapter_07/20_1_up_notifications/index.html (excerpt)
The message elements we’ll insert will have the class adding—so let’s make sure that when we append them, they’ll be invisible and properly located:
chapter_07/20_1_up_notifications/style.css (excerpt)
.adding{
position:relative;
left:-35px;
top:-4px;
display:none;
}
When the document is ready, we can then find all our targets and add the new message element to each of them. When a target (an element that has the wishlist class) is clicked, we call a custom function that sets our notification in motion. The custom function takes a reference to the current object and a callback function to run when the interaction is complete. This function will move the selection to the link (via the prev action) and set its text to “Added”:
chapter_07/20_1_up_notifications/script.js (excerpt)
$('Adding')
.addClass('adding')
.insertAfter('.wishlist');
$('.wishlist')
.click(function(e) {
doOneUp(this, function() {
$(this).prev().text('Added');
});
e.preventDefault();
})
Our custom function features nothing new to us at this point: it simply moves to the hidden span element and displays it. Now the message is visible to the end user. We then kick off an animation that adjusts the span’s top and opacity properties—to move it upwards and fade it out simultaneously:
chapter_07/20_1_up_notifications/script.js (excerpt)
function doOneUp(which, callback) {
$(which)
.next()
.show()
.animate({
top:"-=50px",
opacity:"toggle"
},
1000,
function() {
$(this)
.css({top: ""})
.hide(callback)
.remove();
});
}
Note: Passing Callbacks
Notice the callback variable that’s being passed around in the example? We supply a function as a parameter to our doOneUp code, but we don’t do anything with it ourselves; we just pass it along as the callback to jQuery’s hide action. When hide completes, it will run whatever code we gave it. In this case, it’s the code to change the link text from “Add to wishlist” to “Added.”
This effect is impressive, but it would be more useful if it were customizable, especially with respect to the positioning of the text message; at the moment it’s hard-coded into the CSS. It would be good to make this an option in the code, and also provide options to select the distance the message travels and its speed. In short, this effect would be perfect as a plugin! You’ll have to wait until (or skip over to) Chapter 9 to learn how to do that.
We’re in Good Form
Building usable, accessible, and impressive forms and interface controls is hard work, and to tackle the task we have to use all of the tools we have at our disposal: HTML, CSS, JavaScript, and jQuery. It’s a team effort, and as developers, we need to be aware which tool is the right one for the job. Once we’ve figured this out though, it’s all bets off. Forms and controls are the core of application development on the Web—so it’s an exciting area to be experimenting in. Striking a balance between impressive, novel, and usable interactions can be tricky, but if you get it right, you can have a significant impact on the way people use and perceive your site.
Chapter 8
Lists, Trees, and Tables
The popularity of StarTrackr! has just skyrocketed, after exposing an