Last Updated: February 25, 2016
·
27.72K
· koryteg

Bind load and resize for responsive jQuery

I had this function set to fire off on window load. Which hides the menu when the screen is width is less than or equal to 480px (and shows the standard hamburger button). like this:

$(window).bind("load", function() {
    var width = $(window).width();
    if (width <= 480) {
        $(".container > ul").hide();
    }
    else {
        $(".container > ul").show();
    }
});

Which is great and works great when I pull it up on my iPhone, but totally breaks down when when resizing a desktop window.

note to trolls: I understand that 99% of people are not going to resize their DT window to below 480 

So just bind your responsive event to resize as well. at the least you wont have bugs when testing on your DT. you will be happy. trust me.

$(window).bind("load resize", function() {});

5 Responses
Add your response

Nice simple solution Kory!

For anything beyond one-breakpoint sites, you may find this tool I've been working on for managing breakpoints useful: https://github.com/danott/breakpoints.

over 1 year ago ·

@danott thanks Dan! that looks like a handy tool!

over 1 year ago ·

All because of the trolls, same, thanks Kory, great tip!

over 1 year ago ·

You are a life saver. Thank you

over 1 year ago ·

Excellent tip. Thanks.

over 1 year ago ·