Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

re-worded some of the worker copy and moved the animating square to f…

…ront-and-centre
  • Loading branch information...
commit 6997fdf01dd293d49fd2435420c382110c832ec7 1 parent 22497d7
@remy authored
Showing with 33 additions and 28 deletions.
  1. +33 −28 demos/worker.html
View
61 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>
Please sign in to comment.
Something went wrong with that request. Please try again.