✖

All TalkersCode Topics

Follow TalkersCode On Social Media

✖

devloprr.com - A Social Media Network for developers Join Now ➔

View Webpage In Fullscreen Using jQuery

Last Updated : Jul 1, 2023

IN - jQuery HTML | Written & Updated By - Anjali

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. I hope this tutorial on fullscreen webpage using jQuery helps you and the steps and method mentioned above are easy to follow and implement.

CHECK OUT THIS TUTORIAL LIVE DEMO →