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() {});
Written by Kory Tegman
Related protips
5 Responses
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.
@danott thanks Dan! that looks like a handy tool!
All because of the trolls, same, thanks Kory, great tip!
You are a life saver. Thank you
Excellent tip. Thanks.