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.

1 comments:


EmoticonEmoticon