Change class with javascript when resizing the screen

Question

I need a javascript code to change the class menu for the class responsivemenu when the screen resolution is less than 750px.

Answer 1

Using Javascript

Note that I am checking the size inside the block window.addEventListener('resize', function() {..});, the function will be called every time the screen resolution is changed.

window.addEventListener('resize', function () {
    //var altura = window.innerHeight;
    var largura = window.innerWidth;

    if (largura < 750) 
        document.getElementsByClassName('menu')[0].className = 'responsivemenu';
});

Using CSS Media Query

The simplest way using Media Query is to define specific style sheets for each device type, so just add the property media to set to what type of device your css will be used.
Utilize handheld for handheld devices, mobile phones and other devices of this profile. Usually with small screens and limited bandwidth.

<link rel="stylesheet" href="estilo.css" type="text/css" media="handheld">

Now the way I believe to be more correct, in your style file you will use conditionals to define the style for each resolution you want.

/* Estilo padrão */
menu {
  color: blue;
}

/* Estilo para resolução menor que 750 pixels */
@media screen and (max-width: 750) {
  menu {
    color: green;
  }
}

Inside the block you will define the specific style for the resolution.

Source: Introduction about Media Queries

Answer 2

There are several ways to do this.

With Jquery, for example, it can be done like this:

if ($(window).width() <= 750)
  $('.menu').removeClass('menu').addClass('responsivemenu');
  // ou
  $('.menu').attr('class','responsivemenu');

There are several ways to do this operation.

If you want to delve into this method I have presented, take a look at: http://goo.gl/F26YSx

Answer 3

Buddy, try the following form.

if(window.screen.availWidth<750){
  $('.menu').addClass('responsivemenu').removeClass('menu');
}