Fungsi : Memperbesar ukuran layar browser menjadi 'Full Screen' atau penuh sebesar layar dekstop.
Tingkat Kesulitan : Mudah
Bahasa Pemrograman : CSS, HTML, Javascript, jQuery
File Eksternal : jQuery Library
Source Code : Putu Radith
CSS
.fullscreen, .fullscreenExit{background:#000;color:#fff;text-decoration:none;padding:10px 20px;border-radius:3px}HTML
<a class='fullscreen' href='#' title='Layar Penuh'>Click Me!</a>
<a class='fullscreenExit' href='#' style='display:none;' title='Keluar Layar Penuh'>Keluar dari Layar Penuh</a>jQuery & Javascript
<script type='text/javascript'>
//<![CDATA[
$(function() {
//Fullscreen
$('a.fullscreenExit').hide();
$('a.fullscreen').on('click', function() {var docElement, request;docElement = document.documentElement;request = docElement.requestFullScreen || docElement.webkitRequestFullScreen || docElement.mozRequestFullScreen || docElement.msRequestFullScreen;if(typeof request!='undefined' && request){request.call(docElement);}$(this).hide();$('a.fullscreenExit').show();return false;});
$('a.fullscreenExit').on('click', function() {var docElement, request;docElement = document;request = docElement.cancelFullScreen|| docElement.webkitCancelFullScreen || docElement.mozCancelFullScreen || docElement.msCancelFullScreen || docElement.exitFullscreen;if(typeof request!='undefined' && request){request.call(docElement);}
$(this).hide();$('a.fullscreen').show();return false;});
});
//]]>
</script>jQuery Library
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>