Showing posts with label fullscreen. Show all posts
Showing posts with label fullscreen. Show all posts

Full Screen Menggunakan Javascript Berdasar Element ID

fullscreen
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
<button class="btn btn-xs btn-default pull-right" title="Full Screen" onclick="toggleFullScreen_realisasi()"><i class="fa fa-expand fa-fw"></i> </button>


<script type="text/javascript" src="jquery.min.js"></script>

<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.
Salam,
PHP Aku : Membangun web terorganisasi dan mudah dimengerti, contoh tutorial dengan menggunakan HTML, CSS, JavaScript, SQL, PHP, dan XML.