From a027a384ac1e215151dc7503ab9177e250f3d410 Mon Sep 17 00:00:00 2001 From: Remy Sharp Date: Mon, 10 Dec 2012 10:44:20 +0000 Subject: [PATCH 1/3] tweaked markup to work as an include --- demos/worker.html | 56 ++++++++++++++++++++++------------------------- 1 file changed, 26 insertions(+), 30 deletions(-) diff --git a/demos/worker.html b/demos/worker.html index c8eec8a..b559f27 100644 --- a/demos/worker.html +++ b/demos/worker.html @@ -1,30 +1,27 @@ - - - Worker - - - +Web 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.

@@ -33,6 +30,5 @@

Messages from Worker:

- - - + +
\ No newline at end of file From 6997fdf01dd293d49fd2435420c382110c832ec7 Mon Sep 17 00:00:00 2001 From: Remy Sharp Date: Mon, 7 Jan 2013 23:16:28 +0000 Subject: [PATCH 2/3] re-worded some of the worker copy and moved the animating square to front-and-centre --- demos/worker.html | 61 +++++++++++++++++++++++++---------------------- 1 file changed, 33 insertions(+), 28 deletions(-) diff --git a/demos/worker.html b/demos/worker.html index b559f27..6891efc 100644 --- a/demos/worker.html +++ b/demos/worker.html @@ -1,34 +1,39 @@ Web 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:

-
-
+

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 From f07a64c928f9385dc6d0530f023719cbb23adf4e Mon Sep 17 00:00:00 2001 From: Remy Sharp Date: Mon, 7 Jan 2013 23:17:18 +0000 Subject: [PATCH 3/3] fixed animating - without the px it would not actually move --- js/worker-main.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) 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: