As shown below, beides the '+' icon is the full screen button.
When clicked on it, it does not go full screen.
I tried basic jQuery :
$("#fullScreen-btn").css({height: 100%, width: 100%});
This does not seem to work.
I need it to work like we press F11 on browsers, it must go full screen on mobile (not the google maps app)
Can anyone help me out here ?
As shown below, beides the '+' icon is the full screen button.
When clicked on it, it does not go full screen.
I tried basic jQuery :
$("#fullScreen-btn").css({height: 100%, width: 100%});
This does not seem to work.
I need it to work like we press F11 on browsers, it must go full screen on mobile (not the google maps app)
Can anyone help me out here ?
Share Improve this question asked Jun 23, 2017 at 6:23 Ashish BahlAshish Bahl 1,4921 gold badge18 silver badges28 bronze badges 4- Is this a react native app running on android? And you want it to be able to go to full screen hiding the android UI? – Mor Paz Commented Jun 27, 2017 at 12:23
- I need it to go fullscreen but it is a javascript-jquery based app and it is not a react native app. – Ashish Bahl Commented Jun 27, 2017 at 12:35
- share more code. – Nidhin Chandran Commented Jun 27, 2017 at 13:18
- @AshishBahl check the answer and let me know if you have any problem – Sagar V Commented Jun 27, 2017 at 15:01
4 Answers
Reset to default 8 +50In order to make a Mobile Browser visible in full screen mode, you should use the requestFullscreen()
Add an event listener to the button dynamically when it gets loaded as
button.addEventListener("click",function(){
document.body.requestFullscreen();
});
Or
button.addEventListener("click",function(){
document.documentElement.requestFullscreen();
});
Works for Chrome for android.
Also many browser for Computers also have this ability.
Read more on MDN
Your jQuery needs correction - you missed the quotes, try this:
$("#fullScreen-elm").css({"height": "100%", "width": "100%"});
and moreover you need to update this css for the screen element you want to resize and not the fullscreen button.
And yes, Element.requestFullscreen() is definitely an other option refer MDN
Try this. I calculated the height separately to achieve the results. Tested in android device.
$(document).ready(function() {
let height = $(document).height();
$('.fullscreen').on('click', function() {
$('iframe').css({
height: height,
width: '100%'
});
});
});body {
margin: 0;
padding: 0;
}
.fullscreen {
position: absolute;
top: 10px;
right: 10px;
}<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<iframe src="https://www.google./maps/embed?pb=!1m18!1m12!1m3!1d423283.3363121453!2d-118.69191670818714!3d34.020750397391296!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2c75ddc27da13%3A0xe22fdf6f254608f4!2sLos+Angeles%2C+CA%2C+USA!5e0!3m2!1sen!2srw!4v1499159650271"
width="250" height="250" frameborder="0" style="border:0" allowfullscreen></iframe>
<div class="container">
<input type="button" name="fullscreen" value="fullscreen" class="fullscreen" />
</div>
<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>You can activate full screen mode using JavaScript without jQuery.
<!DOCTYPE html>
<html>
<head>
<title>Full Screen Test</title>
</head>
<body id="body">
<h1>test</h1>
<script>
var elem = document.getElementById("body");
elem.onclick = function() {
req = elem.requestFullScreen || elem.webkitRequestFullScreen || elem.mozRequestFullScreen;
req.call(elem);
}
</script>
</body>
</html>
One thing that is important to note, you can only request full screen mode when a user performs an action (e.g. a click). You can't request full screen mode without a user action1 (e.g. on page load).
Here is a cross browser function to toggle full screen mode (as obtained from the MDN):
function toggleFullScreen() {
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) { // current working methods
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
}
For more information, check out the MDN page on full screen APIs.
If you need a plugin that supports versions of IE prior to IE11 (IE8-10), take a look at jQuery.fullscreen. IE did not support this feature natively until IE11.