Remove/add css classes on breakpoint with matchmedia.js

Question

I have following code which works fine when the screen size is 770px and below (as determined by breakpoints):

    var handleMatchMedia = function (mediaQuery) {
      if (mediaQuery.matches) {

         $j(".view-all a").removeClass("button");
         $j(".view-all").removeClass("view-all");

    } else {

        $j(".view-all a").addClass("button");
        $j(".view-all").addClass("view-all");
    }
},

mql = window.matchMedia('all and (max-width: 770px)');

handleMatchMedia(mql); 
mql.addListener(handleMatchMedia);

The problem is when the window is resized to 770px and up I lose my classes.

How to achive to change class on window resize?

vittore · Answer 1 · 2015-04-27T20:09:05.160

2

You need to cache your selectors. See jsfiddle as well :

var viewAll = $j(".view-all")
  , buttons = $j(".view-all a")
  , handleMatchMedia = function (mediaQuery) {
     if (mediaQuery.matches) {
       buttons.removeClass("button");
       viewAll.removeClass("view-all");
    } else {
       buttons.addClass("button");
       viewAll.addClass("view-all");
    }
  }
  , mql = window.matchMedia('all and (max-width: 770px)');

handleMatchMedia(mql); 
mql.addListener(handleMatchMedia);

edited Apr 27 '15 at 20:09

answered Apr 27 '15 at 13:52

vittore

17,449
6
44
82

Nothing. With your solution now classes stays no matter of breakpoint width. – user642523 Apr 27 '15 at 17:10
create simple jsfiddle with your code. when you cache selector ( ie `viewAll=$j(...)` it just save reference to all nodes, and you are free to add/remove classes over those elements. Also if all you want is to change some styles consider using media queries right into css. – vittore Apr 27 '15 at 20:02
added jsfiddle to show that this code is indeed working. – vittore Apr 27 '15 at 20:10

score 1 · Accepted Answer · answered May 02 '15 at 22:39

Guessing what you're going for is changing the design page when media changes, by adding classes.

Simply using css and media queries will achieve this:

@media all and (max-width: 770px) {
  .viewall a {
    color: blue;
  }
}

but if you truly want it too be handled with javascript I'll recommend using another class as marker, like .adapt and changing the code to:

var handleMatchMedia = function (mediaQuery) {
    if (mediaQuery.matches) {
       $j(".adapt a").removeClass("button");
       $j(".adapt").removeClass("view-all");
    } else {
       $j(".adapt a").addClass("button");
       $j(".adapt").addClass("view-all");
    }
},

mql = window.matchMedia('all and (max-width: 770px)');

handleMatchMedia(mql); 
mql.addListener(handleMatchMedia);

score 0 · Answer 3 · answered May 04 '15 at 09:31

I would suggest to save the needed classes in a data-770-classes attribute.

if (mediaQuery.matches) {
   buttons.removeClass(buttons.attr('data-770-classes'));
   viewAll.removeClass(viewAll.attr('data-770-classes'));
} else {
   buttons.addClass(buttons.attr('data-770-classes'));
   viewAll.addClass(viewAll.attr('data-770-classes'));
}

I assume $j creates a jQuery object.

The HTML would look like:

<div class="view-all" data-700-classes="view-all">...</div>

score 0 · Answer 4 · answered May 04 '15 at 10:15

You can use element.className += "button" to add class and .className = ""to remove class, here's the code you need:

var viewAll = document.getElementsByClassName("view-all")[0];
var buttons = viewAll.getElementsByTagName("a");
var handleMatchMedia = function (mediaQuery) {
  if (mediaQuery.matches) {
     buttons.className += "button";
     viewAll.className = "";
  } else {
     buttons.className += "button";
     viewAll.className += "view-all";
  }
}
var mql = window.matchMedia('all and (max-width: 770px)');

handleMatchMedia(mql); 
mql.addListener(handleMatchMedia);

Remove/add css classes on breakpoint with matchmedia.js

4 Answers4