Cara Menggunakan Conditional Javascript

Cara Menggunakan Conditional Javascript

Bola Hero Gawai

Cara Menggunakan Conditional Javascript

Cara Menggunakan Conditional Javascript
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.

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×