Cara Mematikan / Mengaktifkan Javascript di Media Screen Tertentu

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

Misal Javascript untuk sticky top nav pada mode mobile, saya sendiri tidak begitu suka jika navbar juga ikut turun pada saat di scroll pada mode mobile, navbar mode mobile menjadi berantakan, dan tidak terbuka semuanya , maka dari itu saya mencoba mencari cara dan tutorial di berbagai media dan akhirnya saya menemukan di salah satu blog yaitu buatan dari kodejarwo.com

berikut langkah-langkahnya :

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

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    var stickyNavTop = $('.top-nav').offset().top;
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();
        if (scrollTop > stickyNavTop) {
            $('.top-nav').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
        } else {
            $('.top-nav').css({ 'position': 'relative' });
        }
    };
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>
 

2. Selanjutnya, tempatkan kode:

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

kode javascrib anda

}}); 

3. maka akan menjadi seperti ini

<script type='text/javascript'>
//<![CDATA[
$(window).width(function() {    if ($(this).width() > 980) {
$(document).ready(function() {
    var stickyNavTop = $('.navix').offset().top;
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();
        if (scrollTop > stickyNavTop) {
            $('.navix').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
        } else {
            $('.navix').css({ 'position': 'relative' });
        }
    };
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
}});
//]]>
</script>

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

.width() > 940)

5. Kode di atas 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.

6. save template

Baca Juga