Changing a class name with jquery given a specific width range (media query)

Question

I have the following html that I am trying to modify:

<div class="col1 width8"><img src="images/entity.jpg"></div>

I want to use media queries, but I do not want to modify the css, but rather replace the class name from width8 to width6. This is not typically possible with the standard media query below:

@media only screen and (min-width: 1240px) and (max-width: 1484px) { }

I wish to use jquery to remove the class and add a class when the window is between 1240 and 1484px wide. Can you assist me with the jquery alternative to media queries for modifying inline class and id names?

Here is my jquery

 $(document).ready(function() { 
    $(window).resize(function(){
            var width = $(window).width();

            if(width >= 1240 && width <= 1484){
                $('#info').removeClass('col9').addClass('col8');
            }
            else if(width >= 1485 && width <= 1788){
                $('#info').removeClass('col8').addClass('col7');
            }

            else if(width >= 1789 && width <= 2237){
                $('#info').removeClass('col7').addClass('col6');
            }

            else if(width >= 2238 && width <= 3000){
                $('#info').removeClass('col7').addClass('col6');
            }
            else{
                $('#info').removeClass('col8').addClass('col9');
             }
            })

.resize();

    });

Answer 1

You can try this.

$(window).resize(function(){
   console.log('resize called');
   var width = $(window).width();
   if(width >= 700 && width <= 900){
       $('#myelement').removeClass('width8').addClass('width6');
   }
   else{
       $('#myelement').removeClass('width6').addClass('width8');
   }
})
.resize();//trigger the resize event on page load.

Answer 2

Take a look at enquire.js

It is a no dependency library that allows you to respond to media queries with JavaScript.

For example:

var $info = $('#info');

enquire.register("screen and (min-width: 1240px) and (max-width: 1484px)", {
    match: function() {
        $info.addClass('col8');
    },

    unmatch: function() {
        $info.removeClass('col8');
    }
}).listen();

Then you can simply register media queries for the various breakpoints in your site so classes will be added and removed upon successful match.

Answer 3

You can do something like:

var x = $('#myelement'); // this is your element
var w = $(window).width();
if(w >= 700 && w <= 900) {
    x.removeClass('class-to-remove').addClass('class-to-add');
}