jQuery if statement with CSS media queries

Question

I'm trying to use media queries to disable float at a certain browser width. This if statement only works if I reload the page for the current size. Is it possible to have jQuery apply the change when the CSS property changes?

if($('.two-column li').css('float') == 'left') {
    $('.two-column li').equalHeights();
}

and I'm probably supposed to use $(this) or something on the second $('.two-column li') but I don't know why it doesn't work. I don't know too much about jQuery.

edit:

By default, the style for two-column li is something like

.two-column li {
    float: left;
}

and then let's say...

@media only screen and (max-width: 767px) {
    .two-column li {
        float: none;
    }
}

This does work. When the width is below 767px, it stops floating. The ugly jquery I have above seems to work partially. By default, equalheights plugin runs, but when width is below 767px, the plugin does not run. My problem is that whether it runs or not depends on what size the browser was at when the page was loaded. I'm trying to make it dynamic like the media query in a responsive design.

And I called it on document ready.

With the help of more research and a comment below, it is now like this including doc ready... still doesn't do it on resize though, needs refresh.

$(document).ready(function () {
    $('.two-column li').filter(function(index) {
        return $(this).css('float') != 'none'
    }).equalHeights();
});

When are you calling this code? Is it inside a window.onresize event handler? Please provide more context — Jason Miesionczek
– Jason Miesionczek, Commented Jun 20, 2011 at 3:25
Could you post the code you are using to switch styles based on browser width? There is a way to get the browser to respect it just by resizing the browser, so that may be the easiest way to fix it. — Nathan Bell
– Nathan Bell, Commented Jun 20, 2011 at 3:26
It is not clear how media queries are related to your code and what jQuery is doing in your sample. Media Queries are defined here: w3.org/TR/css3-mediaqueries — c-smile
– c-smile, Commented Jun 20, 2011 at 3:28

David Wick · Accepted Answer · 2011-06-20 03:27:55Z

1

modernizr provides media queries testing. in addition, you could also attach an event handler to $(window).resize()

answered Jun 20, 2011 at 3:27

David Wick

7,1152 gold badges38 silver badges38 bronze badges

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

Comments

Nathan Bell · Accepted Answer · 2011-06-20 03:30:41Z

The example code you pasted is a bit off, it won't do what you expect it to. What you need to do is select all of the elements you want to operate on, and then filter them based on the value of their float style. Then, after filtering, apply the operations you want to the filtered set. For instance, if you want to run the equalHeights plugin on the set of all ".two-column li" elements that have float set to "left", try this code:

$('.two-column li').filter(function(index) {
    if($(this).css('float') == 'left') return true;
}).equalHeights();

With that said, it sounds like the root of your problem is with your CSS media query not properly being activated when the browser is resized. Could you post your media query code to see if there's an easier solution in there?

Jason Gennaro · Accepted Answer · 2011-06-20 04:30:19Z

0

You can do this using $(window).resize()

$('div#first').addClass("right");

$(window).resize(function() {

    $('#first').toggleClass("right", $(this).width() > '500');

});

make sure the div gets the class with the float, so add it outside the resize function.
when the window is resized, toggle the class on or off (i.e., float or no float) based on the size of the window. In this case, toggle happens when window is greater than 500px. Conversely, when it is smaller, the class is removed.
set the width to whatever you prefer.

http://jsfiddle.net/jasongennaro/7qc8e/3/

Resize the window to see it work.

answered Jun 20, 2011 at 4:30

Jason Gennaro

34.9k9 gold badges67 silver badges86 bronze badges

Comments

gavsiu · Accepted Answer · 2011-06-20 19:29:06Z

0

Okay.. so after more research and some fiddling around, I seem to have the functionality that I want. I can't write proper jQuery code though, can someone tell me what I'm doing wrong to make it more elegant?

var $float = $('.two-column li');
$float.filter(function(index) {
    return $(this).css('float') != 'none'
}).equalHeights();
$(window).resize(function () {
    $float.filter(function(index) {
        if ($(this).css('float') != 'none') {
            $float.equalHeights();
        }
        else {
            $float.height('auto');
        }
    });
});

answered Jun 20, 2011 at 19:29

gavsiu

7675 gold badges9 silver badges27 bronze badges

Collectives™ on Stack Overflow

jQuery if statement with CSS media queries

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related