simple go to fullscreen on the single element - though CSS is not working yet

remy · remy · commit 6a9749da6c57 · 2013-01-13T23:53:36.000Z
diff --git a/demos.json b/demos.json
@@ -4,10 +4,10 @@
     "url": "fullscreen",
     "tags": "fullscreen",
     "support": {
-      "live": "opera",
-      "nightly": "chrome firefox safari"
+      "live": "opera chrome firefox safari",
+      "nightly": ""
     },
-    "test": ""
+    "test": "document.body.requestFullscreen !== undefined"
   },
   {
     "desc": "Stream video and filter with canvas",
diff --git a/demos/fullscreen.html b/demos/fullscreen.html
@@ -12,7 +12,8 @@
   <p>This example shows how an element can request fullscreen support from the browser.</p>
   <p id="unavailable">Not supported :(</p>
   <div id="game">
-
+    <button id="gofull">Go fullscreen</button>
+    <button id="goback">Go back to non-fullscreen</button>
   </div>
 </article>
 <script>
@@ -39,12 +40,18 @@
   return !!shim(document.body)
 }
 
-var no = $('#unavailable');
+var no = $('unavailable'),
+    go = $('gofull'),
+    back = $('goback');
 
 if (available()) {
   no.parentNode.removeChild(no);
 }
 
+go.onclick = function () {
+  shim(this.parentNode).call(this.parentNode);
+}
+
 
 
 
