Cara Mematikan / Mengaktifkan Javascript di Media Screen Tertentu
Cara Mematikan/Mengaktifkan Javascript di Media Screen Tertentu

Javascript memiliki peranan yang sangat penting pada suatu blog. Selain berguna untuk mempercantik tampilan blog, Javascript juga dapat menambah fitur-fitur baru di dalam blog.

Masalahnya, tidak semua Javascript cocok dipakai pada media screen tertentu. Saya pernah mengalaminya.

Misal Javascript untuk widget sticky saya. Widget sticky akan mengalami bug yaitu blog tidak dapat di scroll sampai ke footer bila blog diakses melalui media screen tertentu (biasanya dibawah 900px alias tampilan mobile)...

Dikarenakan layar akan tertutupi oleh widget yang sticky dan hanya berhenti diatas footer. Lalu, saya mencoba memakai cara ini untuk mematikan scriptnya pada media screen untuk mobile dan berhasil.

Oleh karenanya, kali ini saya akan membagikan sedikit cara untuk mematikan atau bisa juga dipakai untuk mengaktifkan Javascript pada media query screen tertentu. Langsung saja disimak langkahnya berikut ini.

Javascript pada Media Query Screen


Tentunya, pertama siapkan Javascript yang ingin anda matikan/aktifkan. Kali ini saya berikan contoh seperti gambar dibawah ini.

<script type='text/javascript'> //<![CDATA[

//ini kode javascript contoh

//]]> </script>

Selanjutnya, tempatkan kode:

$(window).width(function() {    if ($(this).width() > 940) {

tepat diatas kode javascript anda dan kode:

   } }); 

tepat dibawah kode javascript. Sehingga penampilannya secara penuh seperti ini:

<script type='text/javascript'> //<![CDATA[
$(window).width(function() {    if ($(this).width() > 940) {

// ini kode javascript contoh

}});
//]]> </script>

Sekarang, anda simak baik-baik kode diatas. Disana terdapat kode:

.width() > 940 

Kode tadi memiliki arti bahwa Javascript hanya akan diaktifkan pada media screen dengan width melebihi 940px saja. Sedangkan pada media screen kurang dari 940px, Javascript menjadi tidak aktif alias mati. Anda juga dapat mengganti kode > menjadi < dan sebaliknya.

Sudah mengerti maksudnya? Bila iya, silahkan sekarang anda bereksperimen dan menyesuaikan dengan keperluan anda! Berikut beberapa contoh lainnya supaya anda lebih mengerti tentang cara penggunaan media query pada Javascript ini.

.width() > 940 
Aktif hanya pada media screen lebih dari 940px dan Mati pada media screen kurang dari 940px

.width() < 940  
Aktif hanya pada media screen kurang dari 940px dan Mati pada media screen lebih dari 940px

Selamat mencoba dan semoga berhasil!
Silakan pilih sistem komentar anda ⇛   

5 komentar untuk Cara Mematikan / Mengaktifkan Javascript di Media Screen Tertentu.

Silakan berkomentar dengan sopan. Jangan buang-buang waktu anda hanya untuk melakukan SPAM di sini.

Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 7 Januari 2018 10.31

Silakan di ask ke saya kalau bingung...

Balas
Qoqok Dwi Sunarko Kode Jarwo
Qoqok Dwi Sunarko
# 6 Januari 2018 15.34

Bingung sekali saya

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 10 September 2017 09.02

Kok gak ada gan...

Balas
Ozik Jarwo Kode Jarwo
Ozik Jarwo author
# 10 September 2017 08.57

Siap gan lagi diproses...

Balas
Wuwuh Kode Jarwo
Wuwuh
# 9 September 2017 21.58

Komentar ini telah dihapus oleh administrator blog.

Balas