AF
HomeTagSubmit NotesAsk AnythingLoginSubscribe Us
AF
1. Feel Free to ask and submit anything on Anyforum.in and get satisfactory answer
2. Registration is not compulsory, you can directly login via google or facebook
3. Our Experts are looking for yours ?.



html-jquery: How to open a webpage in full screen mode?

Please give me some suggestion how can we open a webpage in full screen mode.

html x 24
jquery x 12
Posted On : 2016-04-25 21:58:03.0
profile Saksham Kumar - anyforum.in Saksham Kumar
73433932708
up-rate
4
down-rate

Answers


For Chrome we can use Chrome Fullscreen API. Note that for (Chrome) security reasons it cannot be called or executed automatically, there must be an interaction from the user first. (Such as button click, keydown/keypress etc.)

addEventListener("click", function() {
var
el = document.documentElement
, rfs =
el.requestFullScreen
|| el.webkitRequestFullScreen
|| el.mozRequestFullScreen
;
rfs.call(el);
});


Example:
----------------------------------------------
<html>
<head>
<title>Full Screen Mode By Jquery- Anyforum</title>
</head>
<body>
<a href="#">Enter in Full Screen Mode- Click Here</a>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
addEventListener("click", function() {
var
el = document.documentElement
, rfs =
el.requestFullScreen
|| el.webkitRequestFullScreen
|| el.mozRequestFullScreen
;
rfs.call(el);
});
</script>
</body>
</html>


By using Javascript Fullscreen API:
--------------------------------------------------------------------------
// Find the right method, call on correct element
function launchFullScreen(element) {
if(element.requestFullScreen) {
element.requestFullScreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
}

// Launch fullscreen for browsers that support it!
launchFullScreen(document.documentElement); // the whole page
launchFullScreen(document.getElementById("videoElement")); // any individual element


Example:
--------------------------------------
<html>
<head>
<title>Full Screen Mode by Javascipt- Anyforum</title>
</head>
<body>
<a href="#" onclick="launchFullScreen(document.documentElement);">Enter in Full Screen Mode- Click Here</a>
<script>
function launchFullScreen(element) {
if(element.requestFullScreen) {
element.requestFullScreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
}
</script>
</body>
</html>


Output:
----------------------------

Enter in Full Screen Mode By Jquery- Click Here

Posted On : 2016-04-25 22:13:38
Satisfied : 1 Yes  0 No
profile Rishi Kumar - anyforum.in Rishi Kumar
523188241268
Reply This Thread
up-rate
5
down-rate



Post Answer
Please Login First to Post Answer: Login login with facebook - anyforum.in