Combining jQuery and CSS Media queries

Question

I'm using this code to trigger stuff on window resize.

css

@media only screen and (min-width : 320px) and (max-width : 768px) {
    .placeholder {
        width:100%;
    }

js

if ($(window).width() <= 768){ 
$('#middle').hide();
$('.left').removeClass('hidden');

} else {
$('#middle').show();
$('.left').addClass('hidden');
}
});

However, these is an inconsistency between the CSS media query at 768 and the jquery window width 768 because they do not appear to trigger at the same time. This is something explained on this great article, http://www.fourfront.us/blog/jquery-window-width-and-media-queries

However, when I try to apply this like

if ($(".placeholder").css("width") === "100%") {
         $('.left').removeClass('hidden');
         $('#middle').hide();
    } else {
        $('#middle').show();
        $('.left').addClass('hidden');
    }

This doesn't work. I've tried applying other css values, like a 2px margin, but this also doesn't work. What am I doing wrong? Can anyone help? Many thanks.

I understand the question, but why not use CSS to do your show/hide? — isherwood
– isherwood, Commented Dec 5, 2013 at 14:58
isherwood- You are absolutely right. I didn't want to bore you with too much code so I didn't put the whole thing. Please see the updated version, I have add and remove classes too. — Alga
– Alga, Commented Dec 5, 2013 at 15:10

André Junges · Accepted Answer · 2013-12-05 15:22:59Z

2

As mehdi said, $(".placeholder").css("width") will return you a px value. To resolve this you can add another style to your class that won't influence in your design like border-color: rgb(255, 0, 0); and use it to your if..

See this example

answered Dec 5, 2013 at 15:22

André Junges

5,3673 gold badges38 silver badges50 bronze badges

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

1 Comment

Alga Over a year ago

Thanks André! That worked beautifully. I was trying to do that before but for some reason it didn't work. It works now!

mehdi · Accepted Answer · 2013-12-05 15:27:11Z

1

even if you set the width:100%, $(".placeholder").css("width") give you width in px

DEMO

if ($(".placeholder").css("width") == $(window).width()+"px")//or $(container).width()

means .placeholder width is 100% if margin=0

edited Dec 5, 2013 at 15:27

answered Dec 5, 2013 at 15:02

mehdi

1,7552 gold badges15 silver badges21 bronze badges

2 Comments

Alga Over a year ago

no, sorry. That was a bad choice of div name. Forget about #this, let's call it #blue.

AfromanJ Over a year ago

I don't think so because that would be targeting window.

Collectives™ on Stack Overflow

Combining jQuery and CSS Media queries

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related