Module 11: Using Hardware Acceleration

In this module, you add hardware accelerated page transitions when the user navigates between the list and details views.

Steps

Modify index.html as follows:

1. Add pageslider.css inside the head tag in index.html:

   <link href="assets/css/pageslider.css" rel="stylesheet">
   

2. Add a script tag to include the pageslider.js library (after jquery.js):

   <script src="lib/pageslider.js"></script>
   

   PageSlider is a micro library I host on GitHub here.

Modify app.js as follows:

1. In the Local Variables section, declare an instance of the PageSlider object as follows:

   var slider = new PageSlider($('body'));
   

2. In the routes, replace the calls to $('body').html() with calls to slider.slidePage() passing the same argument to the function.

   slider.slidePage(new HomeView(service).render().$el);
   

   and

   slider.slidePage(new EmployeeView(employee).render().$el);