Mengecek Ukuran Viewport dengan JQuery

Hal ini tentunya sangat bermanfaat bagi para pemakai template dengan tema responsif. Setidaknya, dengan cara ini Anda bisa mengetahui lebar dan tinggi viewport dengan cepat. Tutorial ini sekaligus juga untuk menjelaskan secara singkat tentang event .resize() yang belum sempat Saya tuliskan di artikel event-event dasar JQuery:

Lihat Demo

HTML

Letakkan kode ini di atas </body>:

<div id='viewport-checker'>
    <ul>
        <li id='width'></li>
        <li id='height'></li>
    </ul>
</div>

CSS

Letakkan kode ini di atas kode ]]></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 template Anda sudah dilengkapi dengan JQuery. Setelah itu letakkan script ini di bawahnya:

<script type='text/javascript'>
$(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 saat 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 saat pointer meninggalkan kotak keterangan
    $('#viewport-checker').mouseleave(function() {
        $(this).animate({opacity:"hide", top:"-100px"}, 100);
    });
});
</script>

Simpan perubahan.