CODEWITHSUNDEEP
javascriptjquery
elJeffe
elJeffe

Reputation: 368

Add class to html depending on screen size

When a screen size is smaller than x-amount of pixels, the HTML should get a class if it is bigger and smaller than an x-amount it should get a different class and so on.

I am using jQuery 2.2.1.

JavaScript

$(document).on('resize, ready', function() {
 // Add class if screen size equals
 var $window = $(window),
 $html = $('html');

 function resize() {
    if ($window.width() < 768) {
      return $html.addClass('xs');
    }
    else if ($window.width() > 768 && $window.width() < 992) {
      return $html.addClass('sm');
    }
    else if ($window.width() > 992 && $window.width() < 1200) {
      return $html.addClass('md');
    }
    else if ($window.width() > 1200) {
      return $html.addClass('lg');
    }
    $html.removeClass('xs sm md lg');
  }
  $window.resize(resize).trigger('resize');
});

The problem is, that on page load, it will get the correct class, when resizing the browser the correct class will add, but it won't remove the old class.

http://jsbin.com/jusapucadi/edit?html,js,output

I am using the code from this post: jquery, add/remove class when window width changes

Upvotes: 3

Views: 8892

Answers (4)

itzmukeshy7
itzmukeshy7

Reputation: 2678

/* cache object */
$html = $('html');

$(document).on('resize, ready', function() {
    /* initially remove all existing classes */
    $html.removeClass('xs sm md lg');

    var width = $(window).width();
    if (width < 768) {
        return $html.addClass('xs');
    }else if (width > 768 && width < 992) {
        return $html.addClass('sm');
    }else if (width > 992 && width < 1200) {
        return $html.addClass('md');
    }else{
        return $html.addClass('lg');
    }
});

Upvotes: 0

Billy
Billy

Reputation: 2448

Use jquery .attr and it automatically removes the other classes , from Jquery

To replace all existing classes with another class, we can use .attr( "class", "newClass" ) instead.

$(document).on('resize, ready', function() {
      // Add class if screen size equals
      var $window = $(window),
          $html = $('html');

      function resize() {
        if ($window.width() < 768) {
          return $html.attr( "class","xs" );
        }
        else if ($window.width() > 768 && $window.width() < 992) {
          return $html.attr( "class", "sm" );
        }
        else if ($window.width() > 992 && $window.width() < 1200) {
          return $html.attr( "class", "md" );
        }
        else if ($window.width() > 1200) {
          return $html.attr( "class", "lg" );
        }
     
      }
      $window.resize(resize).trigger('resize');

    });
    .xs body {
       background:red;
     }
     .sm body {
       background:blue;
     }
     .md body {
       background:black;
     }
     .lg body {
       background:purple;
     }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>

 
</head>
<body>
  
</body>
</html>

updated jsbin

Upvotes: 1

alexey
alexey

Reputation: 801

I think you should remove old class in start of the method and remove each class like this:

function resize() {
  $html.removeClass('xs sm md lg');

    if ($window.width() < 768) {
      return $html.addClass('xs');
    }
    else if ($window.width() > 768 && $window.width() < 992) {
      return $html.addClass('sm');
    }
    else if ($window.width() > 992 && $window.width() < 1200) {
      return $html.addClass('md');
    }
    else if ($window.width() > 1200) {
      return $html.addClass('lg');
    }

  }

or you can set class attribute to ""

$html.attr("class","");

Upvotes: 1

Asons
Asons

Reputation: 87303

Your code doesn't work as you return before removing the old class.

Change it like this, by remove the old class before setting the new.

$(document).on('resize, ready', function() {
 // Add class if screen size equals
 var $window = $(window),
 $html = $('html');

 function resize() {
    $html.removeClass('xs sm md lg');

    if ($window.width() < 768) {
      return $html.addClass('xs');
    }
    else if ($window.width() > 768 && $window.width() < 992) {
      return $html.addClass('sm');
    }
    else if ($window.width() > 992 && $window.width() < 1200) {
      return $html.addClass('md');
    }
    else if ($window.width() > 1200) {
      return $html.addClass('lg');
    }
  }
  $window.resize(resize).trigger('resize');
});

Upvotes: 4

Related Questions