checking css media queries with jquery not working

Question

I cant help but feel stupid. I have a simple setup which should be working but is not. Obviously im missing something simple. Im trying to get it to load on doc ready rather than using window scroll btw.

why does this not work?

if ($(".container").css("width") == "100%"){
    alert("adfgf adg df afdgadg");
}

http://jsfiddle.net/bxLLH/2/

thanks in advance.

meni181818 · Accepted Answer · 2014-07-28 23:29:50Z

1

use width():

if ($(".container").width() == $(window).width()){
    alert("adfgf adg df afdgadg");
}

demo: http://jsfiddle.net/bxLLH/3/

answered Jul 28, 2014 at 23:29

meni181818

1,1011 gold badge7 silver badges11 bronze badges

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

1 Comment

mike Over a year ago

I didnt want to use window width since js / media query pixels are a bit off but I guess since its 100% of both it would be ok in this instance. Thanks I didnt think to do it this way

jontewks · Accepted Answer · 2014-07-28 23:29:47Z

1

jQuery seems to only return pixel widths rather than percentages. Try using

if ($('.container').width() === $('.container').parent().width())

That will check to be sure something is the same width as it's direct parent element.

answered Jul 28, 2014 at 23:29

jontewks

4583 silver badges7 bronze badges

3 Comments

mike Over a year ago

no friggin way, lol. So how is one supposed to do jquery checks on responsive layouts that use percentages? Is there a way to do it w/ jquery ui possibly?

jontewks Over a year ago

If the parent element is 500px wide and the child is 100%, well then the child element is 500px! If you drag it smaller and the outer element is now 250px, then the inner, that is still set to 100% will return 250px. Try it out if you don't believe me, but you came looking for an answer and you got it.

mike Over a year ago

It wasnt a matter of believing you, I believe you because I tried both your answers and they work. I am just blown away that jquery doesnt calculate percentages. I guess I just have to check other parts of the css that media queries are changing other than percentages...Thanks for the answer!

Collectives™ on Stack Overflow

checking css media queries with jquery not working

2 Answers 2

1 Comment

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Related