HTML5 and CSS3, Second Edition

css3_animation/javascripts/form.js

varaddFormSubmitWithFallback=function(){

$(".login").submit(function(event){

varform= $(this);

request= processLogin(form,event);

request.fail(function(){

form.animate({left:"-2%"}, 100)

.animate({left:"2%"}, 100)

.animate({left:"-2%"}, 100)

.animate({left:"2%"}, 100)

.animate({left:"0%"}, 100);

});

});

};

Finally, we use Modernizr to detect animation support. If the browser supports

animations, we use our original approach. If it doesn’t support animations,

we call the fallback approach, which still calls the original form-processing

code we wrote, but this time uses the fail() callback to attach the animation.

css3_animation/javascripts/form.js

➤ if(Modernizr.cssanimations){

addFormSubmitWithCSSAnimation();

addAnimationEndListener();

➤ }else{

➤ addFormSubmitWithFallback();

➤ }

There’s a little code duplication, but by moving most of the common function-

ality into a another function, we kept it manageable. Plus we got to learn

about promises a bit as we built this out.

Take a second to reflect on what we did and think about whether it’s neces-

sary. Like the rest of the topics in this chapter, it might not be worth your

time, or even necessary, to create a fallback solution. If the box doesn’t shake

for 15 percent of your users, do you care? Just because you can add a fallback

solution doesn’t mean you should—unless, of course, your next paycheck

depends on it.

8.1 The Future

In this chapter, we explored a few ways CSS3 replaces traditional web-devel-

opment techniques, but we only scratched the surface. The specification

includes 3D transformations, support for multiple border images, reflection,

and even filter effects on images.

The CSS3 modules, when completed, will make it much easier for us to create

richer, better, and more inviting interface elements for our users while

Chapter 8. Eye Candy • 178

Download from Wow! eBook <www.wowebook.com> report erratum • discuss