First and foremost, I am very aware of CSS media queries. My problem is this: When you have div classes stacked in one div; Example:

<div class="class1 class2"></div>

And you want to remove "class2" @media (max-width: 768px) Creating an output of:

<div class="class1"></div>

...once the 768px threshold has been reached.

So far I have come up with nothing other than this non-functional code:

<script>
 jQuery(document).resize(function () {
  var screen = $(window)    
   if (screen.width < 768) {
    $(".class2").hide();
  }
     else {
       $(".class2").show();
      }
  });
</script>

I am really having a hard time finding an answer that works for this. I do not want to block the entire div's contents! Just remove one of two classes.

First and foremost, I am very aware of CSS media queries. My problem is this: When you have div classes stacked in one div; Example:

<div class="class1 class2"></div>

And you want to remove "class2" @media (max-width: 768px) Creating an output of:

<div class="class1"></div>

...once the 768px threshold has been reached.

So far I have come up with nothing other than this non-functional code:

<script>
 jQuery(document).resize(function () {
  var screen = $(window)    
   if (screen.width < 768) {
    $(".class2").hide();
  }
     else {
       $(".class2").show();
      }
  });
</script>

I am really having a hard time finding an answer that works for this. I do not want to block the entire div's contents! Just remove one of two classes.

• javascript
• jquery
• html
• css
• responsive-design

• 1 Wouldn't "responsive design" in this case mean putting the styles for .class2 into @media (min-width: 768px) { … } instead of removing the class via JS? I.e. you don't change the DOM, you sort the styles into breakpoints. – millimoose Commented Dec 28, 2013 at 21:23

4 Answers 4

I'm not sure I get this, but are you just trying to toggle a class?

$(window).on('resize', function () {
    $('.class1').toggleClass('class2', $(window).width() < 768);
});

FIDDLE

jQuery has addClass(), removeClass() and toggleClass() methods readily available.

Note that screen is already defined in javascript.

Use the jQuery .removeClass() method:

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

     if (screen.width < 768) {
         $('div').removeClass('class2');
     } else {
         $('div').addClass('class2');
     }

OR:

     screen.width < 768 ? $('div').removeClass('class2') : $('div').addClass('class2');
  });

$(".class2").removeClass("class2")

And you should listen to the window not the document, so you can modify your code to the following:

<script>
 jQuery(window).resize(function () {
  var screen = $(window)    
   if (screen.width < 768) {
    $(".class2").removeClass("class2");
  }
     else {
       $(".class1").addClass("class2");
      }
  });
</script>

Of course, this will only toggle class2 properly if you want all class1 elements to have class2 when the screen width is greater than 768. If you don't want that, just add an extra class that has no effect, but acts as a flag indicating which elements should have class2.

The above solutions dont work for me. I found this one and it works perfect!

https://codepen.io/richerimage/pen/jEXWWG

jQuery(document).ready(function($) {
  var alterClass = function() {
    var ww = document.body.clientWidth;
    if (ww < 600) {
      $('.test').removeClass('blue');
    } else if (ww >= 601) {
      $('.test').addClass('blue');
    };
  };
  $(window).resize(function(){
    alterClass();
  });
  //Fire it when the page first loads:
  alterClass();
});

body {
  font: normal 16px/1.5em sans-serif; 
  color: #111;
}

code {
  background: #ccc;
}

.test {
  background: #fffccc;
  border: solid 3px rgba(0,0,0,0.1);
  margin: 20px;
  padding: 40px 20px;
}

.test.blue {
  background: dodgerBlue;
}

.test.green {
  background: green;
}

<div class="test">
  <h3>Hello World</h3>
  <p>The class of <code>blue</code> is added when I am wider than 600px and is removed when I am 600px or less in width.</p>
</div>