Join TalkersCode Now !

Get Latest Tutorials And Links On Web Development
And Get Existing Offers Via Email

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

Are You Starting A New Blog
Do You Want Best Web Hosting?

Try World's Best Web Hosting Provider BlueHost
At Just $3.95/mo

Hurry Up! Limited Time Offer

Yes, I Want To Check Out BlueHost

Check The World's Best SEO And All-In-One Marketing Toolkit
For Digital Marketing Professionals SEMRUSH

Check Out SEMRUSH