Exercice 5: track mouse down/up on whole surface.

Chapter 3/03.js

@@ -28,7 +28,7 @@ $(document).ready(function () {
   // Allow the style switcher to expand and collapse.
   var toggleSwitcher = function(event) {
     if (!$(event.target).is('button')) {
-      $('#switcher button').toggleClass('hidden');
+      $('#switcher').find('button').toggleClass('hidden');
     }
   };
   $('#switcher').on('click', toggleSwitcher);
@@ -41,7 +41,7 @@ $(document).ready(function () {
   var setBodyClass = function (className) {
     $('body').removeClass().addClass(className);
 
-    $('#switcher button').removeClass('selected');
+    $('#switcher').find('button').removeClass('selected');
     $('#switcher-' + className).addClass('selected');
 
     $('#switcher').off('click', toggleSwitcher);
@@ -108,12 +108,28 @@ $(document).ready(function () {
 
   // Exercise 4.
   var tracker = function(event) {
-      console.log(event.pageX, event.pageY);
+    console.log(event.pageX, event.pageY);
   };
-  $('p').mouseenter(function (event) {
+  var jP = $('p');
+  jP.mouseenter(function () {
     $(this).mousemove(tracker);
-  }).mouseleave(function (event) {
+  }).mouseleave(function () {
     $(this).off('mousemove');
   });
 
+  // Exercise 5.
+  var trackerY = 0;
+  $('html').mousedown(function (event) {
+    trackerY = event.pageY;
+    console.log('Pressed at ' + trackerY);
+  }).mouseup(function (event) {
+    console.log('Released at ' + event.pageY);
+    if (event.pageY < trackerY) {
+      jP.addClass('hidden');
+    }
+    else if (event.pageY > trackerY) {
+      jP.removeClass('hidden');
+    }
+
+  });
 });