Browser full screen API using Query

Full screen mode of browser, usually for this full screen mode we just press button f11 key, here we are going to see that in coding using fullscreen Jquery. By the help of this coding when we press the location the browser will be as full screen mode, in most of the social media network sites using this kind of full screen mode to establish their idea in full screen, so let see the coding.

DOWNLOAD                     LIVE DEMO

Code

<div id="main">
           <div id="fullscreen">
                <p class="support-p">Your browser<span id="support">doesn't support</span>FullScreen API.</p>
                <a href="#" class="exitfullscreen" style="display: none"><img src="normal-screen.png"></a>
                <a href="#" class="requestfullscreen"><img src="full-screen`.png"></a>
           </div>
            <script type="text/javascript">
                $(function() {
                    // check native support
                    $('#support').text($.fullscreen.isNativelySupported() ? 'supports' : 'doesn\'t support');

                    // open in fullscreen
                    $('#fullscreen .requestfullscreen').click(function() {
                        $('#fullscreen').fullscreen();
                        return false;
                    });

                    // exit fullscreen
                    $('#fullscreen .exitfullscreen').click(function() {
                        $.fullscreen.exit();
                        return false;
                    });

                    // document's event
                    $(document).bind('fscreenchange', function(e, state, elem) {
                        // if we currently in fullscreen mode
                        if ($.fullscreen.isFullScreen()) {
                            $('#fullscreen .requestfullscreen').hide();
                            $('#fullscreen .exitfullscreen').show();
                        } else {
                            $('#fullscreen .requestfullscreen').show();
                            $('#fullscreen .exitfullscreen').hide();
                        }

                        $('#state').text($.fullscreen.isFullScreen() ? '' : 'not');
                    });
                });
            </script>
        
        </div>

The above coding is full screen master, in the beginning of the code span id=”support” is check whether the browser support the coding or not. Then click location, there we can put any of our design in the anchor tag. When we click the anchor tag the full will be come.

Then the script starts, the script as details description about that. The we should add the two Jquery’s.

Script

<script type="text/javascript" src="jquery-1.8.1.min.js"></script>
<script type="text/javascript" src="jquery.fullscreen-0.3.2.min.js"></script>

we should add this are all in the head tag.