Want To Be A Blogger  →  Start A Blog  →  Increase Traffic  →  Make Money Online  →  Recommended Things

View Webpage In Fullscreen Using jQuery

Thursday, Sep 28, 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.

Subscribe Our Newsletter And Get Tutorials And Offers Via Email

About Me


Hello, My Name is Mudit Jain. I am a Web Developer, Professional Blogger and Digital Marketer from India. I am the founder of TalkersCode. I started this blog in february 2015 to help web developers & bloggers by providing easy and best tutorials, articles and offers for web developers and bloggers.