Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Improved demo and added README.

  • Loading branch information...
commit 5b7afbd0b8239e642355dbd5757dd74e4e0cbd40 1 parent 13b7b4a
@kayahr authored
Showing with 76 additions and 4 deletions.
  1. +51 −0 README.md
  2. +25 −4 demo/index.html
View
51 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();
View
29 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>
Please sign in to comment.
Something went wrong with that request. Please try again.