O'Reilly logo

HTML5 Web Application Development By Example Beginner's guide by J.M. Gustafson

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Time for action – effects in action

Let's add some effects to the task list. First, we will add the ability to select a task in the list. When a task is clicked, it will grow in size and get a colored border so it's easy to tell that it is selected. We will also add a hover effect to the tasks so that when the user moves the mouse over a task, the task's action buttons are shown. When the mouse moves off of a task, the buttons will fade back out. You can find the code for this section in chapter2/example2.2.

The first thing we need to do is go back to taskAtHand.js and add a click event handler to the task element after it is created in the addTaskElement() method:

$task.click(function() { onSelectTask($task); });

It calls the onSelectTask() method ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required