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.