Cara Memakai Conditional Javascript

Postingan ini saya buat untuk melanjutkan postingan sebelumnya perihal mobile friendly. Pada postingan sebelumnya saya menyampaikan bahwa supaya blog responsive lebih mobile friendly maka perlu dihilangkan beberapa elemen dan javascript pada tampilan mobile. Makara 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 yakni conditional javascript dari Mr. +Patrick Sexton untuk menghilangkan javascript pada tampilan mobile. Sebenarnya pada postingannya sudah cukup jelas, namun alasannya yakni berbahasa Inggris ada beberapa blogger yang kesulitan untuk menerjemahkannya. Makara di sini saya akan menjelaskan penggunaannya secara sederhana supaya gampang dimengerti.

Conditional javascript ini ibarat pada arahan 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 dapat juga ibarat ini:

 <script type='text/javascript'>
 //<![CDATA[
 if (window.matchMedia("(min-width:800px)").matches){
 Javascript di sini
 }
 //]]>
 </script>

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

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

Sebagai pola 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 ibarat berikut:
Efek tombol close #close-pengumuman akan bekerja pada layar dengan lebar minimal 800px (pada layar di bawah 800px imbas javascript ini tidak bekerja), sedangkan untuk arahan tracking Google Analytics tidak terpengaruh conditional javascript jadi bekerja di semua lebar device.

Atau bila ada javascript yang hanya ingin ditampilkan pada mobile saja (lebar 800px ke bawah), maka tinggal ganti arahan min-width dengan max-width.
Sumber https://www.kompiajaib.com/

Share this post