Improved demo and added README.

kayahr · kayahr · commit 5b7afbd0b823 · 2012-04-10T19:29:52.000+02:00
diff --git a/README.md b/README.md
@@ -0,0 +1,51 @@
+jQuery Fullscreen Plugin
+========================
+
+
+Description
+-----------
+
+This jQuery plugin provides a simple to use mechanism to control the
+new fullscreen mode of modern browsers. Currently only newer Webkit-based
+browsers (Like Chrome) and Firefox provide this new fullscreen feature.
+
+
+Usage
+-----
+
+### Entering Fullscreen mode ###
+ 
+You can either switch the whole page or a single HTML element to fullscreen
+mode:
+
+    $(document).fullScreen(true);
+    $("#myVideo").fullScreen(true);
+
+This only works when the code was triggered by a user interaction (For
+example a onclick event on a button). Browsers don't allow entering
+fullscreen mode without user interaction.
+
+### Exiting Fullscreen mode ###
+
+Fullscreen mode is always exited via the document but this plugin allows
+it also via any HTML element. The owner document of the selected HTML 
+element is used then:
+
+    $(document).fullScreen(false);
+    $("#myVideo").fullScreen(false);
+
+### Querying Fullscreen mode ###
+
+Simply pass no argument to the `fullScreen` method to query the current
+state. The method returns `true` when fullscreen mode is active, `false`
+if not  or `null` when the browser does not support fullscreen mode at all.
+So you can use this method also to display a fullscreen button only when the
+browser supports fullscreen mode:
+
+    $("#fullscreenButton").toggle($(document).fullScreen() != null))
+
+### Toggling Fullscreen mode ###
+
+The plugin provides another method for simple fullscreen mode toggling:
+
+    $(document).toggleFullScreen();
diff --git a/demo/index.html b/demo/index.html
@@ -5,11 +5,32 @@
     <title>jQuery Fullscreen Plugin demo</title>
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
     <script type="text/javascript" src="../jquery.fullscreen-min.js"></script>
+    <script type="text/javascript">
+    
+    $(function() {
+    
+    $(".fullscreen-supported").toggle($(document).fullScreen() != null);
+    $(".fullscreen-not-supported").toggle($(document).fullScreen() == null);
+    
+    });
+    
+    </script>
   </head>
   <body>
-    <button onclick="$(document).fullScreen(true)">Go Fullscreen</button>
-    <button onclick="$(document).fullScreen(false)">Exit Fullscreen</button>
-    <button onclick="$(document).toggleFullScreen()">Toggle Fullscreen</button>
-    <button onclick="alert($(document).fullScreen())">Are we Fullscreen?</button>
+    <h1>jQuery Fullscreen Plugin demo</h1>
+    <div id="buttons">
+      <button onclick="$(document).fullScreen(true)">Enter Fullscreen mode (Document)</button>
+      <button onclick="$('#buttons').fullScreen(true)">Enter Fullscreen mode (Button panel)</button><br />
+      <button onclick="$(document).fullScreen(false)">Exit Fullscreen mode</button><br />
+      <button onclick="$(document).toggleFullScreen()">Toggle Fullscreen mode (Document)</button><br />
+      <button onclick="alert($(document).fullScreen())">Query Fullscreen mode</button>
+    </div>
+    <p class="fullscreen-supported">
+      Browser supports fullscreen mode.
+    </p>
+    <p class="fullscreen-not-supported">
+      Browser does not support fullscreen mode.    
+    </p>
+      
   </body>
 </html>
