javascript adding a resize function

Question

I need to add a resize function so I can check and then apply classes on window resize. I can't use media-query so I have to achieve using javascript.

var mq = window.matchMedia( "(min-width: 640px)" );
var el = document.getElementById('output');

if (mq.matches) {
  el.innerHTML ='640 and over';
  el.className += 'over'
} else {
  el.innerHTML ='640 and under';
  el.className += 'under'
}

#output{
  padding:20px;
  color:#fff;
}

.over{
  background:#808;
}

.under{
  background:#f00;
}

<div id="output"></div>

Curious why you can't use media-queriies? Are you saying you can't use an external library? — jusopi
– jusopi, Commented Feb 16, 2017 at 14:03
@user3699998, are you asking for JavaScript code that detects the browser window's size on resize? — user7393973
– user7393973, Commented Feb 16, 2017 at 14:09

arc · Accepted Answer · 2017-02-16 14:10:11Z

1

var el = document.getElementById('output');
function checkSize() {

   if(window.innerWidth >= 640) {
      el.innerHTML = '640 and over';
      el.className = 'over'
   } else {
     el.innerHTML = 'under 640';
     el.className = 'under'
   }

 }
 window.addEventListener("resize", checkSize)
 checkSize()

#output{
  padding:20px;
  color:#fff;
}

.over{
  background:#808;
}

.under{
  background:#f00;
}

<div id="output"></div>

edited Feb 16, 2017 at 14:10

answered Feb 16, 2017 at 14:05

arc

4,7515 gold badges37 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

arc Over a year ago

@user3699998 sure, sorry. had a mistake

Collectives™ on Stack Overflow

javascript adding a resize function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related