How to make HTML Page Full screen??
With "full screen" I mean that it should take all the space of user's screen,just like when we watch a video with the full screen model. I do not want the task bar/menu bar of the browser window display.
Any suggestions??
@jacob21
How to make HTML Page Full screen??
I'm bit confused what you are asking? Can explain a little more in detail. You want a Javacript code to make the HTML Full Page on the screen or a HTML & CSS code to do that too?
If you're using Internet Explorer, hit F11. There is no code that you can use to change how a visitor chooses to use their web browser. In other words, you can't change the size of their browser window on their behalf.
^ Actually, I take that back! I think I know what you mean. When watching a YouTube video, there's a button that says 'Full Screen' that plays the video back in full screen, outside the constraints of the browser window.
I'm pretty sure this is coded in Flash (as it's a Flash video), since Flash is actually a real app that has been installed and lives locally on your computer, and therefore is powerful enough to do such things.
I can use any code(JS/HTML) to make HTML page full screen like youtube video full screen option
If you know how to do it, would you mind sharing with the rest of us? I'm quite curious because I honestly didn't believe you could do this with JS.
You can do a resize and move the browser, but the problem is, those are disabled by default. There's also a way to remove the toolbar, but you have to open a window through script, and making it maximize is only available in IE. Also, it can be blocked by popup blockers. If it's like the "fullscreen video" you like, it's currently not possible to make the whole page fullscreen. But you can make a specific element fullscreen, it uses HTML5 Fullscreen API.
Anyway, if you insist, here's an example of creating a popup: JS Fiddle Example
width = screen.availWidth;
height = screen.availHeight;
window.open("https://google.com", "Google PopUp", "height="+height+",width="+width+",top=0,left=0,location=no,menubar=no,resizable=no,toolbar=no")
There were options with a default value, but it's for the sake of giving an example.
For the element fullscreen, here's a example to invoke it to fullscreen, you can use this in video tag and canvas too:
<!-- HTML 5 Standard -->
<img scr="example.com/image.jpeg" onclick="event.target.requestFullScreen()" />
<!-- for Chrome -->
<img scr="example.com/image.jpeg" onclick="event.target.webkitRequestFullScreen()" />
<!-- for Mozilla -->
<img scr="example.com/image.jpeg" onclick="event.target.mozRequestFullScreen()" />
see this for more detail:
Fullscreen API Doc - Mozilla
I quite run into a problem, making an example in JSFiddle for the FUllscreen API, I think I forgot the doc type; and that makes it throw invocation errors. Anyhow, hope that will clear things.
https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html (My tests: Works in Firefox and Chrome. IE9 does not support it)
Having said that, I am completely against this method and I hope it gets dropped by the time the standard is finalized.
If this one's will be used like pop-ups in the old days (although even up until now). I'll really go against it. But then...
7 Security and Privacy Considerations
User agents should ensure, e.g. by means of an overlay, that the end user is aware something is displayed fullscreen. User agents should provide a means of exiting fullscreen that always works and advertise this to the user. This is to prevent a site from spoofing the end user by recreating the user agent or even operating system environment when fullscreen. See also the definition of requestFullscreen().
To prevent embedded content from going fullscreen only embedded content specifically allowed via the allowfullscreen attribute of the HTML iframe element will be able to go fullscreen. This prevents untrusted content from going fullscreen.
Actually, what wonders me, why does MS's not implementing it on IE. FF, Chrome and Safari have implemented it.
Well then, it can be applied in a page. I have just tried it also. :D
Nice find mate.
Hi,
Need your suggestions for below problem..
On clicking practice button it should open a new HTML page(new.html) which should be full screen sized.
HTML PAge
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="container">
<section class="main-content">
<a href="http://www.google.co.in"><button id="view-fullscreen">Practice</button></a>
<script src="js/base.js"></script>
</section>
</div>
</body>
</html>
JS Code
(function () {
var viewFullScreen = document.getElementById("view-fullscreen");
if (viewFullScreen) {
viewFullScreen.addEventListener("click", function () {
var docElm = document.documentElement;
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
}, false);
}
})();
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.