ucjphq
Last Updated: February 25, 2016
·
16.61K
· koryteg
3575018741e0d4a2214747708456797f

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() {});
Say Thanks
Respond

5 Responses
Add your response

3808
Daniel ott

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 ·
3814
3575018741e0d4a2214747708456797f

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

over 1 year ago ·
11426
3885d547021c6cf19b366dd245895226

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

over 1 year ago ·
16455
0 jogihr6zz2tctfo60mskhpbvbevai3a6xjwyhpxke7t0p5jql4sfq1kemxzr86fopjxjfqv6kfi

You are a life saver. Thank you

over 1 year ago ·
23542
Fender jazz bass reedit by chaozstar

Excellent tip. Thanks.

over 1 year ago ·