✖

All TalkersCode Topics

Follow TalkersCode On Social Media

View Webpage In Fullscreen Using jQuery

Last Updated : Apr 15, 2022

IN - 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.

View Webpage In Fullscreen Using jQuery

CHECK OUT THIS TUTORIAL LIVE DEMO →

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.

CHECK OUT THIS TUTORIAL LIVE DEMO →

Latest Tutorials