Mirror
/
html5demos
mirror of https://github.com/Erreur32/html5demos.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

This commit is contained in:
Remy Sharp 2013-01-07 23:16:28 +00:00
parent 22497d7b7b
commit 6997fdf01d
1 changed files with 33 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
demos/worker.html
View File

@ -1,34 +1,39 @@
<title>Web Worker</title> <title>Web Worker</title>
<style> <style>
body { body {
font-family: sans-serif; font-family: sans-serif;
} }
#status { #status {
height: 200px; height: 200px;
max-height: 200px; max-height: 200px;
border: thin solid black; border: thin solid #aaa;
overflow-y: scroll; overflow-y: scroll;
} }
#square { #animationWrapper {
position: absolute; position: relative;
left: 0px; height: 50px;
top: 0px; }
width: 75px;
height: 75px; #square {
background-color: rgba(0, 0, 220, 0.3); position: absolute;
z-index: -1; left: 0px;
} top: 0px;
width: 50px;
height: 50px;
background-color: rgba(0, 0, 220, 0.3);
}
</style> </style>
<article> <article>
<h1>Web Worker Demo</h1> <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>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>Use arrow keys to change the direction of the animated square. The square is animated with <em>requestAnimationFrame</em>.</p> <div id="animationWrapper">
<p>Click the button below to start or stop the worker.</p> <div id="square"></div>
<div><input type="button" value="start worker" id="toggleWorker" /></div> </div>
<h2>Messages from Worker:</h2> <p>Click the button below to start or stop the worker.</p>
<div id="status"></div> <div><input type="button" value="start worker" id="toggleWorker" /></div>
<div id="square"></div> <h2>Messages from Worker:</h2>
<div id="status"></div>
<script src="/js/worker-main.js"></script> <script src="/js/worker-main.js"></script>
</article> </article>