Replacing stylesheets with jQuery depending on screen size

Question

Hi I wonder if anyone can help, I'm trying to create a responsive site using jQuery (got to do it this way as the target audience is on IE7/8 and css3-mediaqueries.js seems to interfere with jQuery UI that i'm using also). I'm using the following script to detect width and height and apply styles accordingly, it works great for the width but not the height, it loads the SMstyle.css then overwrites with the style.css. I'm trying to learn JavaScript but not super strong at the moment, i know there's got to an easier way! Any help would be appreciated...

function adjustStyle(width) { width = parseInt(width); if ((width >= 701) && (width < 1200 )) { $("#size-stylesheet").attr("href", "css/SMstyle.css"); } else { $("#size-stylesheet").attr("href", "css/style.css"); } } $(function() { adjustStyle($(this).width()); $(window).resize(function() { adjustStyle($(this).width()); }); }); function adjustStyle(height) { height = parseInt(height); if (height < 800 ) { $("#size-stylesheet").attr("href", "css/SMstyle.css"); } else { $("#size-stylesheet").attr("href", "css/style.css"); } } $(function() { adjustStyle($(this).height()); $(window).resize(function() { adjustStyle($(this).height()); }); });

are you specifying the height in PX or percent? Height won't work in percent without every parent element specifically defined. You may need to dynamically set the height in PX rather than calling a style sheet... if my hunch is correct. — Flat Cat
– Flat Cat, Commented Dec 20, 2012 at 17:55

antila · Accepted Answer · 2012-12-21 12:55:38Z

When dealing with responsive layouts, you don't really care about the height. The whole concept is that if the content can't fit with the width, it collapses (and thus increases the height).

EDIT:

I believe you need to use $(document) instead of $(this), since the scope of $(this) will be different when you trigger it manually and when it's triggered by a resize event.

function adjustStyle() { var width = $(document).width(); var height = $(document).height(); if (((width >= 701) && (width < 1200)) || (height < 800)) { $("#size-stylesheet").attr("href", "css/SMstyle.css"); } else { $("#size-stylesheet").attr("href", "css/style.css"); } } adjustStyle(); $(window).resize(function() { adjustStyle(); });

To see the different scopes, try this:

$(function() { console.log('Scope', $(this)); // Scope is DOM-element $(window).resize(function() { console.log('Scope', $(this)); // Scope is Window object. }); });

Depends who you ask. Some folks would argue that vertical responsiveness is also important. css-tricks.com/responsive-web-above-the-fold
in this case height is important as I'm using the paralax effect with localScroll and physical scrolling turned off. Some of the users for the site have laptop screen dimensions of 1366x768 so height becomes an important factor
Many thanks Antila! It works perfectly, you've stopped me from tearing my hair out!

Atif · Accepted Answer · 2012-12-20 17:59:01Z

Refactored (untested)

function adjustStyle(width, height) { width = parseInt(width); height = parseInt(height); if (((width >= 701) && (width < 1200)) || (height < 800)) $("#size-stylesheet").attr("href", "css/SMstyle.css"); else $("#size-stylesheet").attr("href", "css/style.css"); } $(function() { adjustStyle($(this).width(), $(this).height()); $(window).resize(function() { adjustStyle($(this).width(), $(this).height()); }); });

nope, it looks like it loads the correct SMstyle.css for the height but then bounces back to style.css and only goes back to SMstyle.css on a window resize...
In that case there should be some other script doing that, I would also want to take a look at your HTML

Collectives™ on Stack Overflow

Replacing stylesheets with jQuery depending on screen size

2 Answers 2

3 Comments

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Related