View Webpage In Fullscreen Using jQuery

Friday, Jan 27, 2017

Tags:- jQuery HTML


In this tutorial we will show you how to view webpage in fullscreen using jQuery.Now if you want your website always open in fullscreen mode in browser you can use this method and it is also cross browser compatible.


See Demo
View Webpage In Fullscreen Using jQuery


To View Webpage In Fullscreen It Takes Only One Step:-

  1. Make a HTML file and define markup,scripting and styling


Step 1.Make a HTML file and define markup,scripting and styling

We make a HTML file and save it with a name fullscreen.html

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $(".fullscreen_button").on("click", function() 
 {
  document.fullScreenElement && null !== document.fullScreenElement || !document.mozFullScreen && !document.webkitIsFullScreen ? document.documentElement.requestFullScreen ? document.documentElement.requestFullScreen() : document.documentElement.mozRequestFullScreen ? document.documentElement.mozRequestFullScreen() : document.documentElement.webkitRequestFullScreen && document.documentElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT) : document.cancelFullScreen ? document.cancelFullScreen() : document.mozCancelFullScreen ? document.mozCancelFullScreen() : document.webkitCancelFullScreen && document.webkitCancelFullScreen()
 });	
});
</script>
<style>
body
{
 text-align:center;
 width:100%;
 margin:0 auto;
 padding:0px;
 font-family: "Myriad Pro","Helvetica Neue",Helvetica,Arial,Sans-Serif;
 background-color:#819FF7;
}
#wrapper
{
 margin:0 auto;
 padding:0px;
 text-align:center;
 width:995px;
}
#wrapper .fullscreen_button
{
 background:none;
 border:2px solid #585858;
 color:#585858;
 width:200px;
 height:40px;
 font-weight:bold;
}	
</style>
</head>
<body>
<div id="wrapper">

<input type="button" class="fullscreen_button" value="VIEW FULLSCREEN">

</div>
</body>
</html>

In this step we create a button to toggle fullscreen mode and we use document.ready function to execute our jQuery code to toggle fullscreen when the buttons clicks.


That's all, this is how to view webpage in fullscreen using jQuery.You can customize this code further as per your requirement. And please feel free to give comments on this tutorial.

Join Us With Our 21000+ Subscribers And Get Our Latest Tutorials Update Via Email