CODEWITHSUNDEEP
jqueryhtmlcss
Firnas
Firnas

Reputation: 389

How to remove a css class using jquery in a certain screen size

I've a div with a class and when the window is resized to a mobile view-port I want that class to be removed. 

<div class="box"></div>

Upvotes: 2

Views: 1974

Answers (5)

AddWeb Solution Pvt Ltd
AddWeb Solution Pvt Ltd

Reputation: 21681

Please check below code and you can check my JSFIDDLE.

HTML:

<div class="box">dd</div>

JQ:

$(window).on('resize', function () {
    var screen = $(window);//Window instance...
    var mobileWidth = 400;//Mobile width...

    //If mobile view then remove div class, set div class other then mobile view...
    screen.width() < mobileWidth ? $('div').removeClass('box') : $('div').addClass('box');

    //Set window current width for temporary check...
    $('div').text($(window).width());//Comment this if you don't want it.
}).trigger('resize');

Hope this help you well..

Upvotes: 1

dreamweiver
dreamweiver

Reputation: 6002

Using CSS3 media queries you can do this.

CSS3 Code:

/* ----------- iPhone 4 and 4S ----------- */

/* Portrait and Landscape */
@media only screen 
 and (min-device-width: 320px) 
 and (max-device-width: 480px)
 and (-webkit-min-device-pixel-ratio: 2) {
     .box {
        //reset all css properties set for box class.
     }
 }

This is the only possible solution in CSS3, since CSS cant modify the DOM or its structure.

Upvotes: 1

Anubhav pun
Anubhav pun

Reputation: 1323

use this may help you in style

@media screen and (min-width: 480px) {
    .box {
        display:none;
    }
}

or you may use

  @media screen and (min-width: 480px) {
        .box {
            visibility: hidden;
        }
    }

Upvotes: 0

Bhojendra Rauniyar
Bhojendra Rauniyar

Reputation: 85633

You can do this just using media queries. But still if you're looking for a solution in jquery then you can use toggleClass method like this:

$(window).on('resize',function(){
  var size = $(window).width();//get updated width when window is resized
  $('.box').toggleClass('box', size > 1067);//remove class only in less or equal to 1067
}).resize();//trigger resize on load

Upvotes: 3

Senjuti Mahapatra
Senjuti Mahapatra

Reputation: 2590

Try this:

$(window).resize(function() {
  if ($(window).width() < 480) {
          $('#yourDivId').removeClass('box');
     }
  else{}
});

Upvotes: 3

Related Questions