diff --git a/demos/worker.html b/demos/worker.html index c8eec8a..6891efc 100644 --- a/demos/worker.html +++ b/demos/worker.html @@ -1,38 +1,39 @@ - - - Worker - - - -

Web Worker Demo

-

Works in Chrome, Safari, and Firefox. Web worker portion works in Opera.

-

Use arrow keys to change the direction of the animated square. The square is animated with requestAnimationFrame.

-

Click the button below to start or stop the worker.

-
-

Messages from Worker:

-
-
- - - +Web Worker + +
+

This demo shows how main window animation isn't interrupted by Web Workers. Note that the animation does not work in Opera (due to lack of requestAnimationFrame support).

+

Use arrow keys to change the direction of the animated square. The square is animated with requestAnimationFrame.

+
+
+
+

Click the button below to start or stop the worker.

+
+

Messages from Worker:

+
+ +
\ No newline at end of file diff --git a/js/worker-main.js b/js/worker-main.js index 5077b18..e77cb04 100644 --- a/js/worker-main.js +++ b/js/worker-main.js @@ -4,7 +4,7 @@ (function () { "use strict"; - var SQUARE_SIZE = 75; + var SQUARE_SIZE = 50; var MOVEMENT_STEP = 3; var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || @@ -52,26 +52,26 @@ var top = parseInt(square.style.top, 10); var right = left + SQUARE_SIZE; var bottom = top + SQUARE_SIZE; - + switch (direction) { case 37: // left if (left > 0) { - square.style.left = left - MOVEMENT_STEP; + square.style.left = left - MOVEMENT_STEP + 'px'; } break; case 38: // up if (top > 0) { - square.style.top = top - MOVEMENT_STEP; + square.style.top = top - MOVEMENT_STEP + 'px'; } break; case 39: //right if (right < document.documentElement.clientWidth) { - square.style.left = left + MOVEMENT_STEP; + square.style.left = left + MOVEMENT_STEP + 'px'; } break; case 40: // down if (bottom < document.documentElement.clientHeight) { - square.style.top = top + MOVEMENT_STEP; + square.style.top = top + MOVEMENT_STEP + 'px'; } break; default: