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!