Bagaimana cara supaya div yang kita inginkan tampil fullscreen sesuai display resolusi monitor kita. Berikut saya contohkan:
//CSS
.fullscreen:-webkit-full-screen {
z-index: 9999 !important;
width: 100% !important;
height: 100% !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
}
//HTML
<script type="text/javascript">
var chart_rencana = document.getElementById("chart_rencana");
function toggleFullScreen_rencana() {
if (!document.mozFullScreen && !document.webkitFullScreen) {
if (chart_rencana.mozRequestFullScreen) {
chart_rencana.mozRequestFullScreen();
} else {
chart_rencana.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else {
document.webkitCancelFullScreen();
}
}
}
document.addEventListener("keydown", function (e) {
if (e.keyCode == 13) {
toggleFullScreen();
}
}, false);
</script>
ATAU
<script type="text/javascript">
function fullscreen(name) {
if (!document.mozFullScreen && !document.webkitFullScreen) {
if (document.getElementById("chart_" + name).mozRequestFullScreen) {
document.getElementById("chart_" + name).mozRequestFullScreen();
}
else
{
document.getElementById("chart_"+name).webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
}
}
else
{
if (document.mozCancelFullScreen){
document.mozCancelFullScreen();
} else {
document.webkitCancelFullScreen();
}
}
}
</script>
Sumber: developer[dot]mozilla[dot]org
Sekian, terimakasih atas kunjungannya.
//CSS
.fullscreen:-webkit-full-screen {
z-index: 9999 !important;
width: 100% !important;
height: 100% !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
}
//HTML
<button class="btn btn-xs btn-default pull-right" title="Full Screen" onclick="toggleFullScreen_realisasi()"><i class="fa fa-expand fa-fw"></i> </button>
//JQUERY & JAVASCRIPT
<script type="text/javascript" src="jquery.min.js"></script>
var chart_rencana = document.getElementById("chart_rencana");
function toggleFullScreen_rencana() {
if (!document.mozFullScreen && !document.webkitFullScreen) {
if (chart_rencana.mozRequestFullScreen) {
chart_rencana.mozRequestFullScreen();
} else {
chart_rencana.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else {
document.webkitCancelFullScreen();
}
}
}
document.addEventListener("keydown", function (e) {
if (e.keyCode == 13) {
toggleFullScreen();
}
}, false);
</script>
ATAU
<script type="text/javascript">
function fullscreen(name) {
if (!document.mozFullScreen && !document.webkitFullScreen) {
if (document.getElementById("chart_" + name).mozRequestFullScreen) {
document.getElementById("chart_" + name).mozRequestFullScreen();
}
else
{
document.getElementById("chart_"+name).webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
}
}
else
{
if (document.mozCancelFullScreen){
document.mozCancelFullScreen();
} else {
document.webkitCancelFullScreen();
}
}
}
</script>
Sumber: developer[dot]mozilla[dot]org
Sekian, terimakasih atas kunjungannya.
Salam,
PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.
1 comments:
terimakasih
EmoticonEmoticon