Modify CSS property below resolution

Question

I'm trying to use the following code to improve a couple of layout elements on an adaptive design. It doesn't seem to work though, it calls the first property, but that's it. Here it is in testing state using color.

$(document).ready(function() {
    if ((screen.width>940)) {
        // if screen size is 940px wide or larger
        $("body").css('color', '#222'); // you can also use $(".yourClass").hide();
    } else {
        // if screen size width is less than 940px
        $("body").css('color', 'red'); // here you can also use show();
    }
});

Any help is sincerely appreciated!

You might want to wrap your if statement with $(window).resize(function() { /* code here */ }).resize();. — thirtydot
– thirtydot, Commented Sep 13, 2011 at 23:45

v42 · Accepted Answer · 2011-09-13 23:51:51Z

2

You can use $(window).width(); on your code, but I strongly encourage you use CSS3 Media Queries for this purpose.

body{
    color: #222;
}
@media screen and (max-width: 940px) {
    body{
        color: red;
    }
}

Here's a good arcticle about it:

http://www.alistapart.com/articles/responsive-web-design/

edited Sep 13, 2011 at 23:51

answered Sep 13, 2011 at 23:45

v42

1,42514 silver badges23 bronze badges

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

2 Comments

CAM Over a year ago

Yea I refer to that article all the time.

Jeremy Over a year ago

Thanks for the recommendation but the adaptivity I need is only minor and media queries aren't supported by ie7 which is what most of our users are on.

Joseph Marikle · Accepted Answer · 2011-09-13 23:40:14Z

1

do you by any chance mean $(window).width()? screen.width for me is always 1920 on my computer. On a smart phone it should be smaller, but on any given device it should be pretty constant. In any case using $(window).width() proves your syntax is correct.

http://jsfiddle.net/VvFkK/

answered Sep 13, 2011 at 23:40

Joseph Marikle

78.8k18 gold badges114 silver badges130 bronze badges

3 Comments

Jeremy Over a year ago

Thanks, I believe you're right, that's what I'm looking for! Though I tried your code and it broke the other Javascript on my page.

Joseph Marikle Over a year ago

idk why it doesn't work, but this one better illustrates this type of approach.

Jeremy Over a year ago

Thank you so much Joseph, you have solved my problem and made my day! :D

CAM · Accepted Answer · 2011-09-13 23:53:18Z

Here is What I would do...or something close to it... If I were using JS

$(function(){
                        // on window resize fire this 
                        $(window).resize(function(){
                            //get window width
                            var wide = $(window).width();

                            //log width
                            console.log(wide);

                            if (wide > 940) 
                                {
                                    console.log('wider');
                                }                             
                            else (wide < 940)
                                {
                                    console.log('not so wide');
                                }
                        });


            });//END Doc Ready

Collectives™ on Stack Overflow

Modify CSS property below resolution

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related