Hal ini tentunya sangat bermanfaat bagi para pemakai tema dengan tema responsif. Setidaknya, dengan cara ini Anda dapat mengetahui lebar dan tinggi viewport dengan cepat. Tutorial ini sekaligus juga untuk menjelaskan secara singkat wacana event .resize() yang belum sempat Saya tuliskan di artikel event-event dasar jQuery:
HTML
Letakkan instruksi ini di atas </body>:
<div id='viewport-checker'> <ul> <li id='width'></li> <li id='height'></li> </ul> </div>CSS
Letakkan instruksi ini di atas instruksi ]]></b:skin> atau </style>:
#viewport-checker { width:200px; height:auto; text-align:left; background-color:#333; padding:0; border:2px solid #e6e6e6; font:italic bold 16px/1.4 Cambria,Georgia,Serif; color:#eee; text-shadow:0 1px 1px #000; position:fixed !important; position:absolute; top:-100px; left:50%; margin:0 0 0 -108px; -webkit-box-shadow:0 1px 3px rgba(0,0,0,.7); -moz-box-shadow:0 1px 3px rgba(0,0,0,.7); box-shadow:0 1px 3px rgba(0,0,0,.7); z-index:1000; display:none; } #viewport-checker ul, #viewport-checker li { margin:0; padding:0; border:none; list-style:none; } #viewport-checker li { border-top:1px solid #444; border-bottom:1px solid #222; padding:10px 15px; list-style:none; } #viewport-checker li b {color:#74AE3D}jQuery
Pastikan bahwa tema Anda sudah dilengkapi dengan jQuery. Setelah itu letakkan script ini di bawahnya:
<script> $(document).ready(function() { $(window).resize(function() { var vPortWidth = $(window).width(), //mengambil data lebar layar vPortHeight = $(window).height(); //mengambil data tinggi layar //menampilkan keterangan lebar dan tinggi layar dikala ukuran layar diubah $('#viewport-checker').animate({opacity:"show", top:"50px"}, 600); $('#viewport-checker #width').html('Lebar: ' + vPortWidth); $('#viewport-checker #height').html('Tinggi: ' + vPortHeight); }); //menyembunyikan keterangan lebar dan tinggi layar dikala pointer meninggalkan kotak keterangan $('#viewport-checker').mouseleave(function() { $(this).animate({opacity:"hide", top:"-100px"}, 100); }); }); </script>Simpan perubahan.
Sumber https://www.dte.web.id/