Mengecek Ukuran Viewport dengan jQuery

Tabel Konten
  1. HTML 
  2. CSS 
  3. jQuery 
Mengetahui lebar dan tinggi layar browser

Hal ini tentunya sangat bermanfaat bagi para pemakai tema 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 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 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.

6 Komentar

  • Sodikin Kurniawan

    Makasih ilmunya Sob... banyak belajar dari blog ini..

  • Cerita Cory

    mas taufik pandai dalam membuat artikel tutorial. jelas dalam pemaparannya... guud
    semoga segala ilmu yang di beri menjadi manfaat bagi yg membaca dan bisa menjadi pahala bagi yang membuat. semangat! :)

  • Taufik Nurrohman

    @Sodikin Kurniawan: Sama-sama...
    @Cerita Cory: Setidaknya harus mantap terlebih dahulu bahwa diri sendiri sudah paham sebelum memutuskan untuk berbagi tutorial.

  • Anonim

    Kalau Mendapatkan Lebar Pada Elemen Css Gimana...?

    • Taufik Nurrohman

      • Anonim

        Kalau Itu Dengan Hover , Atau Menyesuaikan Lebar Dengan Js ,
        Maksud Saya ,
        Mengukur Css Yang Berbentuk Rsponsive ,
        Misalnya : Kita Ambil Contohnya Sebuah Box , dan Text Widthnya Pun Nampil ,
        Ketika Kita Perlebar Kotaknya Atau Kotaknya Melebar Otomatis Ataupun Merubahnya Melalui Periksa Elemen dan Lain Lain ,

        Apakah Ada Sperti itu Mas ,..? , Menampilkan Width Secara Otomatis,

Komentar telah ditutup.