re-worded some of the worker copy and moved the animating square to front-and-centre

remy · remy · commit 6997fdf01dd2 · 2013-01-07T23:16:28.000Z
diff --git a/demos/worker.html b/demos/worker.html
@@ -1,34 +1,39 @@
 <title>Web Worker</title>
 <style>
-    body {
-        font-family: sans-serif;
-    }
-    
-    #status {
-        height: 200px;
-        max-height: 200px;
-        border: thin solid black;
-        overflow-y: scroll;
-    }
-    
-    #square {
-        position: absolute;
-        left: 0px;
-        top: 0px;
-        width: 75px;
-        height: 75px;
-        background-color: rgba(0, 0, 220, 0.3);
-        z-index: -1;
-    }
+body {
+  font-family: sans-serif;
+}
+
+#status {
+  height: 200px;
+  max-height: 200px;
+  border: thin solid #aaa;
+  overflow-y: scroll;
+}
+
+#animationWrapper {
+  position: relative;
+  height: 50px;
+}
+
+#square {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 50px;
+  height: 50px;
+  background-color: rgba(0, 0, 220, 0.3);
+}
 </style>
 <article>    
-    <h1>Web Worker Demo</h1>
-    <p>Works in Chrome, Safari, and Firefox. Web worker portion works in Opera.</p>
-    <p>Use arrow keys to change the direction of the animated square. The square is animated with <em>requestAnimationFrame</em>.</p>
-    <p>Click the button below to start or stop the worker.</p>
-    <div><input type="button" value="start worker" id="toggleWorker" /></div>
-    <h2>Messages from Worker:</h2>
-    <div id="status"></div>
-    <div id="square"></div>
+  <p>This demo shows how main window animation isn't interrupted by Web Workers. <small>Note that the animation does not work in Opera (due to lack of requestAnimationFrame support).</small></p>
+  <p>Use arrow keys to change the direction of the animated square. The square is animated with <em>requestAnimationFrame</em>.</p>
+  <div id="animationWrapper">
+     <div id="square"></div>
+  </div>
+  <p>Click the button below to start or stop the worker.</p>
+  <div><input type="button" value="start worker" id="toggleWorker" /></div>
+  <h2>Messages from Worker:</h2>
+  <div id="status"></div>
 <script src="/js/worker-main.js"></script>
 </article>
