CODEWITHSUNDEEP
javascriptjqueryresize
Richard R
Richard R

Reputation: 75

Only run JQuery on mobile view

I'm kinda new to JavaScript overall, and I've made a script by myself which is supposed to add classes to other classes on click.

Now the problem I have is that the code is supposed to work for the mobile view only (under 800px width) which works well, but when I resize the window to something above, after using the script it is still active.

Script: 

$(document).ready(function() { 
    if ($(window).width() <=800 ) {
        $('.mobileNavButton').click(function() {
            $('.mainNav').toggleClass('active');
            $('.mobileNavButton').toggleClass('active');
        });
        $('.hasDropdown').click(function() {
            $('.dropdown').toggle('slide');
            $('.dropdown').toggleClass('active');
            $('.hasDropdown').toggleClass('rotate');
        });
        $('.hasSubDropdown').click(function() {
            $('.subDropdown').toggle('slide');
            $('.subDropdown').toggleClass('active');
            $('.hasSubDropdown').toggleClass('rotate');
        });
    }
});

You guys all helped me out a lot! Thanks!

Upvotes: 1

Views: 16056

Answers (3)

aaronofleonard
aaronofleonard

Reputation: 2576

 $(document).on('click', 'body.mobile .mobileNavButton', function() {
    $('.mainNav').toggleClass('active');
    $('.mobileNavButton').toggleClass('active');
});

$(document).on('click', 'body.mobile .hasDropdown', function() {
   $('.dropdown').toggle('slide');
    $('.dropdown').toggleClass('active');
    $('.hasDropdown').toggleClass('rotate');
});

$(document).on('click', 'body.mobile .hasSubDropdown', function() {
    $('.subDropdown').toggle('slide');
    $('.subDropdown').toggleClass('active');
    $('.hasSubDropdown').toggleClass('rotate');
});

$(window).resize(function(e) {
    if ($(window).width() <= 800) {
        $('body').addClass('mobile');
    }
    else {
        $('body').removeClass('mobile');
    }
});

$(document).ready(function(){
  $(window).resize(); // call once for good measure!
});

https://jsfiddle.net/3okzr4z4/ Drag the window around and see the text change.

This is probably the most reliable quick solution, though I hesitate to give it since it might be beyond what you've learned so far. But the thing is, you avoid calling the .off() function if something isn't .on, and you also avoid having to tediously rebind and unbind function calls every moment the window is resized. You also avoid needing to place if conditions in every block.

Binding need only be done once.

What's happening is: Since we bind to the document, it checks against the selector that is our second argument when we get a click. So if the selector matches 'body.mobile .mobileNavButton', it executes the function.

On the window resize event, we add or remove the 'mobile' class from the body, that way the functions only run if the elements are children of 'body.mobile'. (We call it once when the script first runs for good measure)

Caveats

Although, if you REALLY want to make sure it's mobile, and not just a small screen, you will need more extensive checks than just $(window).width(); If this is relevant to you, check out this:

What is the best way to detect a mobile device in jQuery?

(Also, come on guys, you can't use media queries in jQuery lol)

Upvotes: 2

Quentin Roger
Quentin Roger

Reputation: 6538

You can handle the window resize event : (but for this kind of behavior you should use css media queries )

Update : limit calls on resize

var resizeTimer;
$(window).resize(function(e) {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(function() {
        if ($(window).width() <= 800) {
            $('.mobileNavButton').click(function() {
                $('.mainNav').toggleClass('active');
                $('.mobileNavButton').toggleClass('active');
            });
            $('.hasDropdown').click(function() {
                $('.dropdown').toggle('slide');
                $('.dropdown').toggleClass('active');
                $('.hasDropdown').toggleClass('rotate');
            });
            $('.hasSubDropdown').click(function() {
                $('.subDropdown').toggle('slide');
                $('.subDropdown').toggleClass('active');
                $('.hasSubDropdown').toggleClass('rotate');
            });
        } else {
            $('.hasDropdown').off("click");
            $('.hasSubDropdown').off("click");
            $('.mobileNavButton').off("click");
        }
    },250);
});

Upvotes: 1

guest271314
guest271314

Reputation: 1

Try placing if condition within click handlers, .toggleClass() calls within if statement

    var check  = function() {
      return $(window).width() <=800
    }

    $('.mobileNavButton').click(function() {
         if (check()) {
           $('.mainNav').toggleClass('active');
           $('.mobileNavButton').toggleClass('active');
         }
     });
     $('.hasDropdown').click(function() {
         if (check()) {
           $('.dropdown').toggle('slide');
           $('.dropdown').toggleClass('active');
           $('.hasDropdown').toggleClass('rotate');
         }
     });
     $('.hasSubDropdown').click(function() {
         if (check()) {
           $('.subDropdown').toggle('slide');
           $('.subDropdown').toggleClass('active');
           $('.hasSubDropdown').toggleClass('rotate');
         }
     });

Upvotes: 2

Related Questions