Quick tip: jQuery Media Queries
Media queries are great, but there are times when pure CSS just doesn’t cut it when trying to develop a fully responsive website. It is in those dark times that jQuery is needed to bridge the gap. This is the best way I’ve found to trigger jQuery based on browser width:
This is the CSS:
For this example lets say the break point is when the viewport is 960px wide and you want your styles to only affect resolution widths lower than that.
@media screen and (max-width: 960px) {
/* Style Something */
}
This is the jQuery:
Wrap jQuery behavior in this to correlate it with the above CSS media query.
$(window).resize(function() {
var width = $(window).width();
if (width < 960) {
// Do Something
}
else {
//Do Something Else
}
});
10 Comments Read below or add one
Curt Howard Oct 22, at 06:58pm
The problem with this approach (above) is twofold. First, and more importantly, the $(window).resize() function of jQuery is not self-initializing. This means that if you are not actively changing the size of the viewable area (ie. clicking and dragging the corner of your browser, or moving your device from portrait to landscape at least once) this function will not fire.
The second issue is that the resize function, by itself, will usually be called twice per resize. When you’re clicking and dragging your browser to resize to test your queries, you will notice this, as the dragging will look very laggy.
To get around this you can create a delay function, as I’ve done. This will ensure that the resize function is only called ONCE in the number of milliseconds as dictated by the “pause” variable. The code is here, enjoy:
http://pastie.org/pastes/5100802/text
Mitch Hillman Oct 23, at 08:26am
Thanks for the tip Curt. I’m going to give that a shot.
Curt Howard Oct 23, at 10:02am
Not a problem!
Ashley Oct 26, at 01:54pm
Curt,
Your wisdom is 100-fold.
Curt Howard Oct 26, at 02:03pm
Hey Ashley,
Thanks for the compliment. It took me a long time to figure out a good solution for that but, admittedly, that was back when I was using jQuery to alter entire layouts for a responsive design. Not ideal. Now i use Skeleton or Bootstrap, depending on the requirements of the project, and hook into the different media query points via javascript in this way.
I try to only set classes with this jQuery code, that way the CSS is still doing most of the work and jQuery is just telling the CSS what to do and when to do it.
Curt
Steven Dec 04, at 08:01pm
Thank you Mitch and Curt for posting this tip!
Curt, I would love to see your example working together with a jQuery plugin I’m using on my Bootstrap site. Can I ask you to help me out with this one please?
http://pastie.org/5481420
I would like to see the verticalOffset change to 0 if (width < 960)
verticalOffset = typeof(verticalOffset) != ‘undefined’ ? verticalOffset : -181;
I tried lots of different things but I can’t get it working, but I’m an absolute jQuery beginner!
Any help would be greatly appreciated!
Thanks in advance.
Steven
Curt Howard Dec 05, at 01:53pm
Hey Steven,
It seems like you would then need to explicitly pass the vertical offset in this case, since you’re testing to see if the verticalOffset parameter is set. Resetting the “vo” variable to NULL when the browser is 960 or larger will still retain this effect and explicitly set the vo to 0 when it’s under. Something like this should point you in the right direction:
http://pastie.org/pastes/5484906/text
Curt
Steven Dec 05, at 03:47pm
Hi Curt,
Thanks a million! This is amazing…
I only had to change the vo “0” to “-181” in the else statement to get it working.
This is how it looks like now and seems to work for me: http://pastie.org/5485365
Do you think this is OK?
Hope I didn’t do anything wrong by changing the “0” value.
Need to learn some JavaScript/jQuery to understand what I’m really doing :)
Thanks again!
Curt Howard Dec 05, at 03:49pm
Hey Steven,
If it works, it works. Great job!
I’d recommend CodeAcademy.com for more JavaScript training. It’s free and fun. jQuery is a different beast, of course, but can be picked up relatively easily just by using it, once you have a good idea of what you’re doing.
Good luck!
Curt
Minecraft Jan 03, at 02:53am
I don’t really understand in which case use this script