javascript - Remove/add css classes on breakpoint with matchmedia.js -


i have following code works fine when screen size 770px , below (as determined 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 , (max-width: 770px)');  handlematchmedia(mql);  mql.addlistener(handlematchmedia);  

the problem when window resized 770px , lose classes.

how achive change class on window resize?

you need cache selectors. see jsfiddle :

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 , (max-width: 770px)');  handlematchmedia(mql);  mql.addlistener(handlematchmedia);  

Comments

Popular posts from this blog

asp.net mvc - SSO between MVCForum and Umbraco7 -

Python Tkinter keyboard using bind -

ubuntu - Selenium Node Not Connecting to Hub, Not Opening Port -