CODEWITHSUNDEEP
javascriptjquerycss
Rvervuurt
Rvervuurt

Reputation: 8961

Check browser width after resize, without reload (Javascript)

I have a small piece of Javascript that checks what the browser's width is on load and, depending on the result, runs a piece of jQuery. This to display a different menu on mobile devices

However, it CAN happen a user starts with a very small browser on his desktop, running the jQuery (and therefore the mobile menu). If he then resizes to full-screen, the menu doesn't change, because the check on the browser's width doesn't run again.

The question: How do I adapt the Javascript so it checks every time the browser is resized?

My code:

if (window.innerWidth <= 992) {
    jQuery(document).ready(function($) {
        $(".main-menu").hide();
        $(".mobile-nav-button").click(function() {
            $(".main-menu").slideToggle(500);
        });
    });
}
else {
    jQuery(document).ready(function($) {
        $(".mobile-nav-button").hide();
        $(".mobile-cart-button").hide();
    });
}

Upvotes: 1

Views: 4745

Answers (3)

somethinghere
somethinghere

Reputation: 17358

You can use a resize function wrapper like this:

function resize(){
    // do all your stuff here
}

And then call it once on page load, and recall it on every resize event:

$(document).ready(function(){
    resize();
    $(window).resize(resize);
});

Instead of the wrapper you could also use an anonymous function ($(window).resize(function(){/*Do stuff here*/})), but then you can't call your function on page load and you'd have to repeat yourself.

Your specific case

In your specific case you'd have to take out the document readys. Heres how it should look:

function resize(){
    // First we need to show all, then we will selectively hide based on page width
    $(".main-menu, .mobile-nav-button, .mobile-cart-button").show();
    if (window.innerWidth <= 992) {
        $(".main-menu").hide();
        // also, because you bind a click event here, you'll need to unbind it every time
        // otherwise it will be executed multiple times after a couple of resizes
        // (you could also do what @david does and move this into the document.ready below)
        $(".mobile-nav-button").off("click").click(function() {
            // slideToggle will toggle display of an element, but because its wrapped in click()
            // it only gets executed onclick, not resize. Also, you don't want animation on resize.
            $(".main-menu").slideToggle(500);
        });
    } else {
        $(".mobile-nav-button").hide();
        $(".mobile-cart-button").hide();
    }
}

$(document).ready(function(){
    resize();
    $(window).resize(resize);
});

A snippet

Below is a snippet with the code working. I reduced the width to 700 pixels so I could see the effects at a smaller screen difference (because that how the snippet editor looks) but it all works.

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div class="mobile-nav-button">Mobile Nav Button</div>
    <div class="mobile-cart-button">Mobile CART Button</div>
    <div class="main-menu">MAIN MENU</dov>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script type="text/javascript">
        function resize(){
            $(".mobile-nav-button, .mobile-cart-button, .main-menu").show();
            if (window.innerWidth <= 700) {
                $(".main-menu").hide();
                $(".mobile-nav-button").off("click").click(function() {
                    $(".main-menu").slideToggle(500);
                });
            } else {
                $(".mobile-nav-button").hide();
                $(".mobile-cart-button").hide();
            }
        }

        $(document).ready(function(){
            resize();
            $(window).resize(resize);
        });
    </script>
</body>
</html>

Upvotes: 3

saun4frsh
saun4frsh

Reputation: 383

Just call resize function on pageLoad

$(document).ready(function($) {
    $(window).resize(YourFunctionName);
    $(window).resize();
 });

 function YourFunctionName() {
          // Here is your code which you want to run automatically on page resize.
  }

Upvotes: 0

David
David

Reputation: 7525

you can use 

jQuery(document).ready(function($) {

    $(".mobile-nav-button").click(function() {
        $(".main-menu").slideToggle(500);
    });

    $(window).resize(function()
    {
        if (window.innerWidth <= 992) {
            $(".main-menu").hide();
        }
        else {

           $(".mobile-nav-button").hide();
           $(".mobile-cart-button").hide();

       }
    ));

    $(window).resize();


));

Upvotes: 0

Related Questions