jQuery if statement with CSS media queries

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();
});

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

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?

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

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

$(window).resize(function() {

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

});

1. make sure the div gets the class with the float, so add it outside the resize function.
2. 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.
3. set the width to whatever you prefer.

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

Resize the window to see it work.

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');
        }
    });
});