Trying to add css depending on browser width. Need Help (jQuery)

Question

I'm trying to add a css file depending on the browser width and not sure how to go about it.

In this case, if the browser window is bigger than 1200 width it will add the css file. I know how to do this so it works with refresh but i want it so if the browser is being resized while active on the page the css file's will change.

Here's what I have at the moment, i'm probably going in the wrong direction im not too sure:

<link rel="stylesheet" type="text/css" id="smallS" href="<?php bloginfo('template_directory'); ?>/css/default-960.css" /> 
<script>
    $(function(){
        $(window).resize(function(){
            var w = $(window).width();
            if (w > '1200') {
                document.write('<link rel="stylesheet" type="text/css" id="largeS" href="<?php bloginfo('template_directory'); ?>/css/default.css" />');
            }
            else {
                if($('#largeS').length > 0) {
                    $('#largeS').remove();
                }
            }
        });
    });
</script>

This is what I had before, but its not what I'm looking to do:

if ((screen.width>=1024))
    {
        document.write('<link rel="stylesheet" type="text/css"  href="<?php bloginfo('template_directory'); ?>/css/default.css" />');
    }

Any thoughts?

window with is an integer and you are comparing it to a string if (w > '1200'), try taking out the single quotes of the 1200 — amosrivera
– amosrivera, Commented Jan 11, 2011 at 19:24

lonesomeday · Accepted Answer · 2011-01-11 21:00:34Z

2

The problem is that document.write only works when the document is being first parsed, not later. You need to use DOM manipulation functions instead. Since you are using jQuery, this is greatly simplified:

$(window).resize(function(){
    if ($(window).width() > 1200) {
        if (!$('#largeS').length) {
            $('head').append('<link rel="stylesheet" type="text/css" id="largeS" href="<?php bloginfo('template_directory'); ?>/css/default.css" />');
        }
    }
    else {
        $('#largeS').remove();
    }
}).trigger('resize'); // invoke the handler immediately

Note that this uses $('head').append() and doesn't do an unnecessary check on the length of $('#largeS').

edited Jan 11, 2011 at 21:00

answered Jan 11, 2011 at 19:29

lonesomeday

239k54 gold badges330 silver badges329 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

lonesomeday Over a year ago

@Daryl Could you give an example page, then, rather than having me shoot in the dark?

Daryl Over a year ago

thefinishedbox.com - I have w3 Cache on atm, I can turn that off if you wish.

Daryl Over a year ago

I see, well I moved it, if you look now it still loads small, but as soon as resize the window it switches to large css. Problem being is that even if you switch it with the browser being in a small minimized version it will still switch to big, also it doesn't remove it... what a nightmare lol.

Daryl Over a year ago

jQuery was always loaded. Line 25 ( <script type='text/javascript' src='ajax.googleapis.com/ajax/libs/jquery/1.4.2/…> )

lonesomeday Over a year ago

@Daryl Have corrected my code -- I wrongly changed $(window).width(), which is the correct way to do what you want.

|

Peter Örneholm · Accepted Answer · 2011-01-11 19:35:49Z

2

If using CSS3 is an option, mediaqueries will do this for you in a much nicer way. http://www.w3.org/TR/css3-mediaqueries/#width

Example:

<link rel="stylesheet" media="screen and (min-width: 1200px)" href="/css/default.css" />

answered Jan 11, 2011 at 19:35

Peter Örneholm

2,85820 silver badges24 bronze badges

1 Comment

Tom Over a year ago

Media Queries are part of CSS2 spec quirksmode.org/css/mediaqueries.html Which platforms are you targeting?

wajiw · Accepted Answer · 2011-01-11 21:13:35Z

1

Although you may not be able to code for CSS3 specifically, QuirksMode has an excellent article on using Javascript with media queries keeping standards in mind: http://www.quirksmode.org/blog/archives/2010/08/combining_media.html

There is also a jQuery plugin that makes media queries available for all browsers: project site | jquery site

answered Jan 11, 2011 at 21:13

wajiw

12.3k17 gold badges56 silver badges73 bronze badges

Collectives™ on Stack Overflow

Trying to add css depending on browser width. Need Help (jQuery)

3 Answers 3

9 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

9 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related