Question

I was wondering how i would go about selecting this class and changing it to a span12 once the screen size is below 1000px using jquery

<div class="span4 minus65">

I am using

$(window).resize(function(){
    if($(this).outerWidth() < 1000){
        $('.span4 minus65').attr('class',"span12");
    }

});

but nothing changes when the screen width is below 1000px

Answer 1

If you can’t use media queries, you should use “addClass” and “removeClass”

$(el).addClass('span12').removeClass('span4');

Depending on the browser, “resize” sometimes will fire, and sometimes will fire too often. You should take the function you’re using in the “resize” event and fire it periodically like so:

var resizeFunc = function(){
    //add/remove classes
};

//"fix" the sizing even if "resize" doesn't fire.
setInterval(resizeFunc(), 1000);

jQuery(document).resize(resizeFunc);

Also, resize will fire…A LOT. You can also “throttle” it so that it doesn’t fire more than once every few hundred milliseconds.

You should probably consider using media queries for this (which has good support in newer versions of IE and all the other modern browsers:

http://caniuse.com/#search=media%20queries