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>
-
Why do you want to do this? You can simply use media CSS queries.Yeldar Kurmangaliyev– Yeldar Kurmangaliyev2015-12-14 05:53:12 +00:00Commented Dec 14, 2015 at 5:53
-
Yes that is correct. You should use media css.Parth Trivedi– Parth Trivedi2015-12-14 05:53:56 +00:00Commented Dec 14, 2015 at 5:53
-
@Mohamed, Please check my snippet code answer.AddWeb Solution Pvt Ltd– AddWeb Solution Pvt Ltd2015-12-14 06:17:02 +00:00Commented Dec 14, 2015 at 6:17
-
@AddWebSolutionPvtLtd Thanks mate!Firnas– Firnas2015-12-14 08:33:07 +00:00Commented Dec 14, 2015 at 8:33
Add a comment
|
5 Answers
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
answered Dec 14, 2015 at 5:56
Bhojendra Rauniyar
86k36 gold badges179 silver badges241 bronze badges
Comments
Try this:
$(window).resize(function() {
if ($(window).width() < 480) {
$('#yourDivId').removeClass('box');
}
else{}
});
1 Comment
Parth Trivedi
This is also helpful. If don't want to use media css.
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.
Comments
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..
answered Dec 14, 2015 at 6:15
AddWeb Solution Pvt Ltd
21.8k5 gold badges30 silver badges61 bronze badges
Comments
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;
}
}
4 Comments
Senjuti Mahapatra
AFAIK, this will hide the
div with class box. But he wants the class to be removed. But, I would surely like to know how can we achieve this using CSS.
dreamweiver
@Alorika: CSS cant modify the DOM , it can change only its presentation. so you need to use jquery for this or just reset the CSS properties of
.box class
Anubhav pun
by using media qurey you can achieve this
Anubhav pun
by using media query you can hide the class as put in html<meta name="viewport" content="width=device-width, initial-scale=1">