toc

Forms, Controls, and Dialogs 271 setTimeout(animate, 75); } else { $image.parent().remove(); } })();Inside this function, we’re executing the animation. Here are the highlights: We’ve wrapped the function in the (function myFunction(){})() construct, which is a way to create and execute an anonymous function that can nonethe­ less refer to itself by name. This is an odd JavaScript construct, and one that you needn’t worry about understanding completely; in this case it’s handy as it allows us to create a self-contained piece of functionality that can call itself (this will be useful when we use the setTimeout method). We find out which frame we’re up to by checking the count data. If there are still frames left to display, we calculate the offset of the image and move the correct frame into view. (We can use if (count) in this way because in JavaScript, the number 0 is equivalent to false.) We decrease the frame count so that the next time the loop runs it will display the next frame in the series. Finally, we call setTimeout, specifying our anonymous function as the callback. This way, after 75 milliseconds, the whole process will run again. When the count reaches zero and the animation concludes, we remove the puff container from the DOM.Try it out. Drag an item to the trash, and watch it vanish in a cloud of smoke!jQuery UI sortableAnother great feature of jQuery UI is the sortable behavior. An element that youdeclare as sortable becomes a droppable target to its children—and the childrenall become draggable. The result is that you can reorder the children as you see fit.While sortable allows us to order items within a container, it doesn’t actually sortanything: the sorting is up to the user. Unleash your inner jQuery ninja today!





































290 jQuery: Novice to Ninja 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, espe­ cially 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. jQuery: Novice to Ninja (www.sitepoint.com)

jQuery: Novice to Ninja (www.sitepoint.com)

What’s Next?jQuery is rapidly becoming the norm in web design. Website visitors now expect acertain level of interactivity and animation in their web experience. Once you’veread jQuery: Novice to Ninja, you’ll have the ninja skills to create powerful UIwidgets, impressing even the fussiest of clients.With jQuery: Novice to Ninja, you have the best of both worlds. Not only are thefundamentals of jQuery covered in detail, you’ll also be equipped with a big bunchof out-of-the-box solutions ready to use straight away.If you’re ready to create modern, effective websites that are feature-packed anddressed to impress, grab yourself a copy of jQuery: Novice to Ninja today.1100% Satisfaction GuaranteeWe want you to feel as confident as we do that this book willdeliver the goods, so you have a full 30 days to play with it.If in that time you feel the book falls short, simply send itback and we’ll give you a prompt refund of the full purchaseprice, minus shipping and handling.So, for the cost of a new T-shirt, start your journey into jQuerytoday!To find out more or to order your copy, visithttp://www.sitepoint.com/launch/25534b.1 https://sitepoint.com/bookstore/go/170/25534b