you can ues the requestFullscreen API to achieve this. Details on this given here – https://developer.mozilla.org/en-US/docs/Web/API/Element/requestFullscreen
You just need to find the element which you need to make full screen and then call as below:
document.querySelector("#myDiv").requestFullscreen()
You need to ask the browser the permission to pass into fullscreen mode.
This can be done using vanilla js.
Then your website will be displayed in fullscreen.
If you want a particular div to be fullscreen’d, you then need to add logic to your application so that when it enters fullscreen the div takes 100% of the height and width.
You can find documentation about how to enter fullscreen here: https://gomakethings.com/going-full-screen-with-vanilla-js/
PS: Which library (if one) do you use to develop your website ?
From w3schools: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_fullscreen2
var elem = document.documentElement;
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
elem.msRequestFullscreen();
}
}
function closeFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}/* Chrome, Safari and Opera syntax */
:-webkit-full-screen {
background-color: yellow;
}
/* Firefox syntax */
:-moz-full-screen {
background-color: yellow;
}
/* IE/Edge syntax */
:-ms-fullscreen {
background-color: yellow;
}
/* Standard syntax */
:fullscreen {
background-color: yellow;
}
/* Style the button */
button {
padding: 20px;
font-size: 20px;
}<h2>Fullscreen with JavaScript</h2>
<p>Click on the "Open Fullscreen" button to open this page in fullscreen mode. Close it by either clicking the "Esc" key on your keyboard, or with the "Close Fullscreen" button.</p>
<button onclick="openFullscreen();">Open Fullscreen</button>
<button onclick="closeFullscreen();">Close Fullscreen</button>I am looking for the way to create a ‘full screen mode’ functionallity by using javascript or jquery.
It means that click on the button should display div (and all children) on full screen (full window, not browser, just full screen like on the movies on youtube).
I did a research in vain, do you know any solution for this?
@UPDATE
I would like to disply on full screen mode myDiv (and all children) and make scrollable if necessary, for example:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<h2>Fullscreen with JavaScript</h2>
<p>Click on the button to open the video in fullscreen mode.</p>
<button onclick="openFullscreen();">Open Video in Fullscreen Mode</button>
<p><strong>Tip:</strong> Press the "Esc" key to exit full screen.</p>
<div style="width:50px;height:50px;background:red" controls id="myDiv">
<div style="width:50px;min-height:1050px;background:yellow" controls id="aaa">
</div>
<div style="width:50px;min-height:1050px;background:blue" controls id="bbb">
</div>
</div>
<script>
var elem = document.getElementById("myDiv");
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
elem.msRequestFullscreen();
}
}
</script>
<p>Note: Internet Explorer 10 and earlier does not support the msRequestFullscreen() method.</p>
</body>
</html>
The myDiv should be scrollable on he full screen mode but it doesnt.
With this solution I have a problem when the page/div has to be scrollable (because there are a lot of children). It looks like full screen on this way does not support this issue. Am I right?
Could you provide more details on what isn’t scrollable? You can actually try the below. It makes the whole document fullscreen within your own page. Are you facing scrolling problems with the full document too?
I updated my post, I would like to display this content with scrollable
You just need to add
I qould like to use jquery, I updated mu post because there is a scrollable problem.
@RashJ how about using a
To which element I should use this css?
With this solution I have a problem when the page/div has to be scrollable (because there are a lot of children). It looks like full screen on this way does not support this issue. Am I right?
I updated my post,