I am using Flot to graph some of my data and I was thinking it would be great to make this graph appear fullscreen (occupy full space on the monitor) upon clicking on a button. Currently, my div
is as follows:
<div id="placeholder" style="width:800px;height:600px"></div>
Of course, the style attribute is only for testing. I will move this to CSS
after during the actual design. Is there anyway I could make this div fullscreen and still preserve all event handling?
This question is related to
javascript
jquery
html
css
flot
Can use FullScreen API like this
function toggleFullscreen() {
let elem = document.querySelector('#demo-video');
if (!document.fullscreenElement) {
elem.requestFullscreen().catch(err => {
alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
});
} else {
document.exitFullscreen();
}
}
Demo
const elem = document.querySelector('#park-pic');_x000D_
_x000D_
elem.addEventListener("click", function(e) {_x000D_
toggleFullScreen();_x000D_
}, false);_x000D_
_x000D_
function toggleFullScreen() {_x000D_
_x000D_
if (!document.fullscreenElement) {_x000D_
elem.requestFullscreen().catch(err => {_x000D_
alert(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);_x000D_
});_x000D_
} else {_x000D_
document.exitFullscreen();_x000D_
}_x000D_
}
_x000D_
#container{_x000D_
border:1px solid #aaa;_x000D_
padding:10px;_x000D_
}_x000D_
#park-pic {_x000D_
width: 100%;_x000D_
max-height: 70vh;_x000D_
}
_x000D_
<div id="container">_x000D_
<p>_x000D_
<a href="#" id="toggle-fullscreen">Toggle Fullscreen</a>_x000D_
</p>_x000D_
<img id="park-pic"_x000D_
src="https://storage.coverr.co/posters/Skate-park"></video>_x000D_
</div>
_x000D_
CSS way:
#foo {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
JS way:
$(function() {
function abso() {
$('#foo').css({
position: 'absolute',
width: $(window).width(),
height: $(window).height()
});
}
$(window).resize(function() {
abso();
});
abso();
});
u can try this..
<div id="placeholder" style="width:auto;height:auto"></div>
width and height depends on your flot or graph..
hope u want this...
or
By clicking, u can use this by jquery
$("#placeholder").css("width", $(window).width());
$("#placeholder").css("height", $(window).height());
Use document height if you want to show it beyond the visible area of browser(scrollable area).
CSS Portion
#foo {
position:absolute;
top:0;
left:0;
}
JQuery Portion
$(document).ready(function() {
$('#foo').css({
width: $(document).width(),
height: $(document).height()
});
});
.widget-HomePageSlider .slider-loader-hide {
position: fixed;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 10000;
background: white;
}
You can use HTML5 Fullscreen API for this (which is the most suitable way i think).
The fullscreen has to be triggered via a user event (click, keypress) otherwise it won't work.
Here is a button which makes the div fullscreen on click. And in fullscreen mode, the button click will exit fullscreen mode.
$('#toggle_fullscreen').on('click', function(){_x000D_
// if already full screen; exit_x000D_
// else go fullscreen_x000D_
if (_x000D_
document.fullscreenElement ||_x000D_
document.webkitFullscreenElement ||_x000D_
document.mozFullScreenElement ||_x000D_
document.msFullscreenElement_x000D_
) {_x000D_
if (document.exitFullscreen) {_x000D_
document.exitFullscreen();_x000D_
} else if (document.mozCancelFullScreen) {_x000D_
document.mozCancelFullScreen();_x000D_
} else if (document.webkitExitFullscreen) {_x000D_
document.webkitExitFullscreen();_x000D_
} else if (document.msExitFullscreen) {_x000D_
document.msExitFullscreen();_x000D_
}_x000D_
} else {_x000D_
element = $('#container').get(0);_x000D_
if (element.requestFullscreen) {_x000D_
element.requestFullscreen();_x000D_
} else if (element.mozRequestFullScreen) {_x000D_
element.mozRequestFullScreen();_x000D_
} else if (element.webkitRequestFullscreen) {_x000D_
element.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);_x000D_
} else if (element.msRequestFullscreen) {_x000D_
element.msRequestFullscreen();_x000D_
}_x000D_
}_x000D_
});
_x000D_
#container{_x000D_
border:1px solid red;_x000D_
border-radius: .5em;_x000D_
padding:10px;_x000D_
}
_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<div id="container">_x000D_
<p>_x000D_
<a href="#" id="toggle_fullscreen">Toggle Fullscreen</a>_x000D_
</p>_x000D_
I will be fullscreen, yay!_x000D_
</div>
_x000D_
Please also note that Fullscreen API for Chrome does not work in non-secure pages. See https://sites.google.com/a/chromium.org/dev/Home/chromium-security/deprecating-powerful-features-on-insecure-origins for more details.
Another thing to note is the :fullscreen CSS selector. You can append this to any css selector so the that the rules will be applied when that element is fullscreen:
#container:-webkit-full-screen,
#container:-moz-full-screen,
#container:-ms-fullscreen,
#container:fullscreen {
width: 100vw;
height: 100vh;
}
For fullscreen of browser rendering area there is a simple solution supported by all modern browsers.
div#placeholder {
height: 100vh;
}
The only notable exception is the Android below 4.3 - but ofc only in the system browser/webview element (Chrome works ok).
Browser support chart: http://caniuse.com/viewport-units
For fullscreen of monitor please use HTML5 Fullscreen API
This is the simplest one.
#divid {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
<div id="placeholder" style="position:absolute; top:0; right:0; bottom:0; left:0;"></div>
Source: Stackoverflow.com