Cara Menggunakan Conditional Javascript

Ditulis oleh: Adhy Suryadi

Ditulis pada: 4/16/2015

Postingan ini saya buat untuk melanjutkan postingan sebelumnya tentang mobile friendly. Pada postingan sebelumnya saya mengatakan bahwa agar blog responsive lebih mobile friendly maka perlu dihilangkan beberapa elemen dan javascript pada tampilan mobile. Jadi untuk mobile sebaiknya kita hanya mem-fokus-kan pada konten atau postingan (termasuk komentar di dalamnya). Sedangkan untuk sidebar dan javascript selain script tracking Google Analytics kita sembunyikan atau hilangkan.

Nah yang akan kita bahas kali ini adalah conditional javascript dari Mr. +Patrick Sexton untuk menghilangkan javascript pada tampilan mobile. Sebenarnya pada postingannya sudah cukup jelas, namun karena berbahasa Inggris ada beberapa blogger yang kesulitan untuk menerjemahkannya. Jadi di sini saya akan menjelaskan penggunaannya secara sederhana agar mudah dimengerti.

Conditional javascript ini seperti pada kode di bawah ini:

<script type='text/javascript'>

//<![CDATA[

var mql = window.matchMedia('screen and (min-width: 800px)');if (mql.matches){

Javascript di sini

}

//]]>

</script>

Atau bisa juga seperti ini:

<script type='text/javascript'>

//<![CDATA[

if (window.matchMedia("(min-width:800px)").matches){

Javascript di sini

}

//]]>

</script>

Jika diartikan, kode javascript di atas seperti berikut:
Jika window (layar) minimal 800px, maka gunakan kode javascript ini (Javascript di sini). atau gunakan javascript pada lebar layar 800px ke atas.

Dengan begitu ketika layar memiliki lebar kurang dari 800px maka javascript tidak digunakan. Jadi silahkan simpan javascript yang tidak ingin ditampilkan di mobile (lebar di bawah 800px) pada Javascript di sini.

Sebagai contoh silahkan lihat javascript di bawah ini.

<script type='text/javascript'>

//<![CDATA[

var mql = window.matchMedia('screen and (min-width: 800px)');if (mql.matches){

var button=document.querySelector("#close-pengumuman");button.addEventListener("click",function(){var t=document.querySelector(button.getAttribute("data-target"));t.style.display="none"==t.style.display?"block":"none"});

}



(function(e,t,n,r,i,s,o){e["GoogleAnalyticsObject"]=i;e[i]=e[i]||function(){(e[i].q=e[i].q||[]).push(arguments)},e[i].l=1*new Date;s=t.createElement(n),o=t.getElementsByTagName(n)[0];s.async=1;s.src=r;o.parentNode.insertBefore(s,o)})(window,document,"script","//www.google-analytics.com/analytics.js","ga");ga("create","UA-XXXXXX-1","auto");ga("send","pageview");

//]]>

</script>

Jika dibaca, maka javascript di atas seperti berikut:
Efek tombol close #close-pengumuman akan bekerja pada layar dengan lebar minimal 800px (pada layar di bawah 800px efek javascript ini tidak bekerja), sedangkan untuk kode tracking Google Analytics tidak terpengaruh conditional javascript jadi bekerja di semua lebar device.

Atau jika ada javascript yang hanya ingin ditampilkan pada mobile saja (lebar 800px ke bawah), maka tinggal ganti kode min-width dengan max-width.