├── fullscreen └── jquery.fullscreen.js └── readme.md /fullscreen/jquery.fullscreen.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @name jQuery FullScreen Plugin 3 | * @author Martin Angelov, Morten Sjøgren 4 | * @version 1.2 5 | * @url http://tutorialzine.com/2012/02/enhance-your-website-fullscreen-api/ 6 | * @license MIT License 7 | */ 8 | 9 | /*jshint browser: true, jquery: true */ 10 | (function($){ 11 | "use strict"; 12 | 13 | // These helper functions available only to our plugin scope. 14 | function supportFullScreen(){ 15 | var doc = document.documentElement; 16 | 17 | return ('requestFullscreen' in doc) || 18 | ('mozRequestFullScreen' in doc && document.mozFullScreenEnabled) || 19 | ('webkitRequestFullScreen' in doc); 20 | } 21 | 22 | function requestFullScreen(elem){ 23 | if (elem.requestFullscreen) { 24 | elem.requestFullscreen(); 25 | } else if (elem.mozRequestFullScreen) { 26 | elem.mozRequestFullScreen(); 27 | } else if (elem.webkitRequestFullScreen) { 28 | elem.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT); 29 | } 30 | } 31 | 32 | function fullScreenStatus(){ 33 | return document.fullscreen || 34 | document.mozFullScreen || 35 | document.webkitIsFullScreen || 36 | false; 37 | } 38 | 39 | function cancelFullScreen(){ 40 | if (document.exitFullscreen) { 41 | document.exitFullscreen(); 42 | } else if (document.mozCancelFullScreen) { 43 | document.mozCancelFullScreen(); 44 | } else if (document.webkitCancelFullScreen) { 45 | document.webkitCancelFullScreen(); 46 | } 47 | } 48 | 49 | function onFullScreenEvent(callback){ 50 | $(document).on("fullscreenchange mozfullscreenchange webkitfullscreenchange", function(){ 51 | // The full screen status is automatically 52 | // passed to our callback as an argument. 53 | callback(fullScreenStatus()); 54 | }); 55 | } 56 | 57 | // Adding a new test to the jQuery support object 58 | $.support.fullscreen = supportFullScreen(); 59 | 60 | // Creating the plugin 61 | $.fn.fullScreen = function(props){ 62 | if(!$.support.fullscreen || this.length !== 1) { 63 | // The plugin can be called only 64 | // on one element at a time 65 | 66 | return this; 67 | } 68 | 69 | if(fullScreenStatus()){ 70 | // if we are already in fullscreen, exit 71 | cancelFullScreen(); 72 | return this; 73 | } 74 | 75 | // You can potentially pas two arguments a color 76 | // for the background and a callback function 77 | 78 | var options = $.extend({ 79 | 'background' : '#111', 80 | 'callback' : $.noop( ), 81 | 'fullscreenClass' : 'fullScreen' 82 | }, props), 83 | 84 | elem = this, 85 | 86 | // This temporary div is the element that is 87 | // actually going to be enlarged in full screen 88 | 89 | fs = $('
', { 90 | 'css' : { 91 | 'overflow-y' : 'auto', 92 | 'background' : options.background, 93 | 'width' : '100%', 94 | 'height' : '100%' 95 | } 96 | }) 97 | .insertBefore(elem) 98 | .append(elem); 99 | 100 | // You can use the .fullScreen class to 101 | // apply styling to your element 102 | elem.addClass( options.fullscreenClass ); 103 | 104 | // Inserting our element in the temporary 105 | // div, after which we zoom it in fullscreen 106 | 107 | requestFullScreen(fs.get(0)); 108 | 109 | fs.click(function(e){ 110 | if(e.target == this){ 111 | // If the black bar was clicked 112 | cancelFullScreen(); 113 | } 114 | }); 115 | 116 | elem.cancel = function(){ 117 | cancelFullScreen(); 118 | return elem; 119 | }; 120 | 121 | onFullScreenEvent(function(fullScreen){ 122 | if(!fullScreen){ 123 | // We have exited full screen. 124 | // Detach event listener 125 | $(document).off( 'fullscreenchange mozfullscreenchange webkitfullscreenchange' ); 126 | // Remove the class and destroy 127 | // the temporary div 128 | 129 | elem.removeClass( options.fullscreenClass ).insertBefore(fs); 130 | fs.remove(); 131 | } 132 | 133 | // Calling the facultative user supplied callback 134 | if(options.callback) { 135 | options.callback(fullScreen); 136 | } 137 | }); 138 | 139 | return elem; 140 | }; 141 | 142 | $.fn.cancelFullScreen = function( ) { 143 | cancelFullScreen(); 144 | 145 | return this; 146 | }; 147 | }(jQuery)); 148 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # jQuery FullScreen Plugin 2 | 3 | A jQuery 1.7 plugin that wraps around the *[Full Screen API](https://developer.mozilla.org/en/DOM/Using_full-screen_mode)* and works around various browser differences. Works in FF 10, Chrome and Safari. It is useful for presenting users with an easier to read version of your web pages, or zooming *<canvas>* and *<video>* elements. 4 | 5 | ## How to use 6 | 7 | Include jquery.fullscreen.js in your page along with version 1.7 of the jQuery library. This gives you the `$('#elem').fullScreen()` method. You can optionally pass an object with properties: 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 |
PropertyValueMeaning
backgrounda color hashThis is the color that will be used for the background.
callbacka functionThe callback function will be called on a full screen change event. It has one argument - a boolean indicating whether we are in full screen or not.
fullscreenClassa stringThis is the CSS class that will be added to elements in fullscreen mode. The default class is "fullScreen".
31 | 32 | After the plugin makes your element full screen, it will add the `fullScreen` class on it (unless overridden with the `fullscreenClass` parameter), so you can easily style it. 33 | 34 | ## Example 35 | 36 | ```js 37 | // The plugin sets the $.support.fullscreen flag: 38 | if($.support.fullscreen){ 39 | 40 | // ... 41 | // Show your full screen button here 42 | // ... 43 | 44 | $('#fullScreen').click(function(e){ 45 | 46 | $('#content').fullScreen(); 47 | 48 | // You can also pass a hash with properties: 49 | // $('#content').fullScreen({ 50 | // 'background' : '#111', 51 | // 'callback' : function(isFullScreen){ 52 | // // ... 53 | // // Do some cleaning up here 54 | // // ... 55 | // } 56 | // }); 57 | }); 58 | } 59 | ``` 60 | 61 | You can then apply additional styles to your element. Take the opportunity to increase the font size, hide distractions and make for a better reading experience. 62 | 63 | ```css 64 | 65 | # content.fullScreen{ 66 | /* Give the element a width and margin:0 auto; to center it. */ 67 | } 68 | 69 | ``` 70 | 71 | If you later wish **to cancel the full screen view**, you can do so by calling the `fullScreen()` method again. 72 | 73 | ## Demo 74 | 75 | Go to [Tutorialzine](http://tutorialzine.com/2012/02/enhance-your-website-fullscreen-api/) for a live demo. 76 | --------------------------------------------------------------------------------