Permalink
Browse files

Complete reorganisation of the directory so that making new demos app…

…ears, visually, more consistent. I'd like a better way to credit other people if they start contributing demos - but for now, no one has ;-)
  • Loading branch information...
1 parent a3b1847 commit ad614eef1bfb913431fe2ca43365daf6496aaf34 @remy committed Mar 4, 2010
View
@@ -15,6 +15,8 @@ RewriteCond %{REQUEST_FILENAME} -f
RewriteRule .* - [L]
RewriteCond %{REQUEST_FILENAME}.html -f
-RewriteRule (.*) $1.html [L]
+RewriteRule (.*) $1.html [QSA,L]
+
+RewriteRule ^(.*)$ page.php [QSA,L]
</IfModule>
View
@@ -62,5 +62,16 @@
};
}
</script>
+<a href="http://github.com/remy/html5demos"><img style="position: absolute; top: 0; left: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png" alt="Fork me on GitHub" /></a>
+<script>
+var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
+document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
+</script>
+<script>
+try {
+var pageTracker = _gat._getTracker("UA-1656750-18");
+pageTracker._trackPageview();
+} catch(err) {}</script>
+
</body>
</html>
View
@@ -1,143 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
-<head>
-<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
-<title>HTML5 Demo: canvas</title>
-<style>
-body {
- font: normal 16px/20px Helvetica, sans-serif;
- background: rgb(237, 237, 236);
- margin: 0;
- margin-top: 40px;
- padding: 0;
-}
-
-article, section, header, footer {
- display: block;
-}
-
-#wrapper {
- width: 600px;
- margin: 0 auto;
- background: #fff url(images/shade.jpg) repeat-x center bottom;
- -moz-border-radius: 10px;
- -webkit-border-radius: 10px;
- border-radius: 10px;
- border-top: 1px solid #fff;
- padding-bottom: 76px;
-}
-
-h1 {
- padding-top: 10px;
-}
-
-h2 {
- font-size: 100%;
- font-style: italic;
-}
-
-header,
-article > *,
-footer a,
-footer p {
- margin: 20px;
-}
-
-footer > * {
- margin: 20px;
- color: #999;
-}
-
-article {
- position: relative;
-}
-</style>
-<script>
-// For discussion and comments, see: http://remysharp.com/2009/01/07/html5-enabling-script/
-(function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while (i--){document.createElement(e[i])}})()
-</script>
-</head>
-<body>
-<section id="wrapper">
- <header>
- <h1>Canvas</h1>
- </header>
- <article></article>
- <footer><a href="/">HTML5 demo</a></footer>
-</section>
-<script src="h5utils.js"></script>
-<script>
-
-buildSpinner({ x : 50, y : 50, size : 20, degrees : 30 });
-
-function buildSpinner(data) {
-
- var canvas = document.createElement('canvas');
- canvas.height = 100;
- canvas.width = 300;
- document.getElementsByTagName('article')[0].appendChild(canvas);
- var ctx = canvas.getContext("2d"),
- i = 0, degrees = data.degrees, loops = 0, degreesList = [];
-
- for (i = 0; i < degrees; i++) {
- degreesList.push(i);
- }
-
- // reset
- i = 0;
-
- // so I can kill it later
- window.canvasTimer = setInterval(draw, 1000/degrees);
-
- function reset() {
- ctx.clearRect(0,0,100,100); // clear canvas
-
- var left = degreesList.slice(0, 1);
- var right = degreesList.slice(1, degreesList.length);
- degreesList = right.concat(left);
- }
-
- function draw() {
- var c, s, e;
-
- var d = 0;
-
- if (i == 0) {
- reset();
- }
-
- ctx.save();
-
- d = degreesList[i];
- c = Math.floor(255/degrees*i);
- ctx.strokeStyle = 'rgb(' + c + ', ' + c + ', ' + c + ')';
- ctx.lineWidth = data.size;
- ctx.beginPath();
- s = Math.floor(360/degrees*(d));
- e = Math.floor(360/degrees*(d+1)) - 1;
-
- ctx.arc(data.x, data.y, data.size, (Math.PI/180)*s, (Math.PI/180)*e, false);
- ctx.stroke();
-
- ctx.restore();
-
- i++;
- if (i >= degrees) {
- i = 0;
- }
- }
-}
-
-
-</script>
-<script>
-var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-</script>
-<script>
-try {
-var pageTracker = _gat._getTracker("UA-1656750-18");
-pageTracker._trackPageview();
-} catch(err) {}</script>
-</body>
-</html>
View
@@ -1,130 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
-<head>
-<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
-<title>HTML5 Demo: contenteditable</title>
-<style>
-body {
- font: normal 16px/20px Helvetica, sans-serif;
- background: rgb(237, 237, 236);
- margin: 0;
- margin-top: 40px;
- padding: 0;
-}
-
-section, header, footer {
- display: block;
-}
-
-#wrapper {
- width: 600px;
- margin: 0 auto;
- background: #fff url(images/shade.jpg) repeat-x center bottom;
- -moz-border-radius: 10px;
- -webkit-border-radius: 10px;
- border-radius: 10px;
- border-top: 1px solid #fff;
- padding-bottom: 76px;
-}
-
-h1 {
- padding-top: 10px;
-}
-
-h2 {
- font-size: 100%;
- font-style: italic;
-}
-
-#wrapper > * > * {
- margin: 20px;
-}
-
-input {
- font-size: 16px;
- padding: 3px;
- margin-left: 5px;
-}
-
-footer > * {
- color: #999;
-}
-
-article div {
- margin: 10px 0;
-}
-
-label {
- float: left;
- display: block;
- width: 125px;
- line-height: 32px;
-}
-
-[contenteditable]:hover {
- outline: 1px dotted #ccc;
-}
-
-</style>
-<script src="h5utils.js"></script>
-</head>
-<body>
-<div id="wrapper">
- <article>
- <section>
- <header>
- <h1>ContentEditable</h1>
- </header>
- <p>Any elements with the <code>contenteditable</code> attribute set will have a grey outline as you hover over. Feel free to edit and change their contents. I'm using local storage to maintain your changes.</p>
- <p><small>Note that since Opera doesn't support storage, the changes won't save.</small></p>
- </section>
- <section id="editable" contenteditable="true">
- <h2>Go ahead, edit away!</h2>
- <p>Here's a typical paragraph element</p>
- <ol>
- <li>and now a list</li>
- <li>with only</li>
- <li>three items</li>
- </ol>
- </section>
- <div>
- <input type="button" id="clear" value="Clear changes" />
- </div>
- </article>
- <footer><a href="/">HTML5 demo</a></footer>
-</div>
-<script>
-var editable = document.getElementById('editable');
-
-addEvent(editable, 'blur', function () {
- // lame that we're hooking the blur event
- localStorage.setItem('contenteditable', this.innerHTML);
- document.designMode = 'off';
-});
-
-addEvent(editable, 'focus', function () {
- document.designMode = 'on';
-});
-
-addEvent(document.getElementById('clear'), 'click', function () {
- localStorage.clear();
- window.location = window.location; // refresh
-});
-
-if (localStorage.getItem('contenteditable')) {
- editable.innerHTML = localStorage.getItem('contenteditable');
-}
-
-
-</script>
-<script>
-var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
-document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
-</script>
-<script>
-try {
-var pageTracker = _gat._getTracker("UA-1656750-18");
-pageTracker._trackPageview();
-} catch(err) {}</script>
-</body>
-</html>
Oops, something went wrong.

1 comment on commit ad614ee

@yiqiejieyoukeneng
<style> #div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;} </style> <script> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } </script>

Drag the W3Schools image into the rectangle:


Please sign in to comment.