CODEWITHSUNDEEP
javascriptjqueryhtmlcss
ÄR Âmmãř Żąîñh
ÄR Âmmãř Żąîñh

Reputation: 533

How to remove class with media queries

When @media screen and (max-width: 500px) is in active removing class .fade . How can i do this? my script is here below.

@media screen and (max-width: 500px) {
    .post_profile_image{
        width:35px;
        height:35px
    }
    .fade{
    /* Remove this class */
    }
}

<div id="myModal" class="modal fade" role="dialog">

Upvotes: 11

Views: 49228

Answers (6)

Kevin Abad Romero
Kevin Abad Romero

Reputation: 11

You can do it more easily,check this

if($(".toChange").css("border-block-color") == "rgb(0, 0 , 0)"){

$(".toChange").removeClass("toQuit")

}

//Basic, if the ".toChange" element has a property in css that is equal to "rgb(0, 0, 0)" that is the way to refer to black color. We proceed to execute the next block.

// In the next Block we use .removeClass("name_of_class_what_we_wanna_destroy") to quit the "toQuit" class when this happen
@media (min-width: 1900px){
.toChange{
  border-block-color:aliceblue!important;
  }
}

/* we use media screen to send a style that the browser won't show, but the jquery can read, so this is easier way, don't you worry, the property border-block-color is almost invisible, it's only used to make one change when the window's size be = than what when are looking for to quit the class

- less Css 
- less JQuery 
+ More production

*/ 
<div class="toChange toQuit">
</div>
<!-- We wanna quit the "toQuit" class when window size is > than 1900px -->

hope help anyone :D

Upvotes: 0

Devsaiful
Devsaiful

Reputation: 157

Check this code. I Hope, it helps you.

   $(window).on('resize', function(){
              var win = $(this); //this = window
              if (win.width()< 500) { $('#myModal').removeClass('fade'); }
         });
    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    <div id="myModal" class="modal fade" role="dialog">Hello there</div>

Upvotes: 1

mohammad sulaibi
mohammad sulaibi

Reputation: 1

$(function(){
    $(window).on('resize', function(){
        if(window.innerWidth < 500){
            $('#slide-menu').removeClass('fade');
            
        }
    });
});

Upvotes: -1

Michael Mammoliti
Michael Mammoliti

Reputation: 1597

With CSS only you can't remove it from the DOM.. But.. You can overwrite it. Simply define that class in the right place.

Resize the HTML box in jsFiddle.

DEMO: jsFiddle

HTML

<div id="myModal" class="modal fade" role="dialog">

CSS: 

.fade { 
     opacity: 0; 
     transition: opacity 0.15s linear;
     -o-transition: opacity 0.15s linear; 
     -webkit-transition: opacity 0.15s linear; 
}

.fade:hover {
    opacity: 1
}

@media screen and (min-width: 0px) and (max-width: 500px) {
    .post_profile_image{
        width:35px;
        height:35px
    }
    .fade{
        transition: none;
        -o-transition: none; 
        -webkit-transition: none; 
    }

}

Upvotes: 2

Ahmadbaba46
Ahmadbaba46

Reputation: 231

$(window).resize(function(){
 If($(window).width()<500){
  $('.fade').removeClass('fade');
 }
});

Upvotes: 11

T.J. Crowder
T.J. Crowder

Reputation: 1073978

How to remove class with media queries

You don't. Instead, you define new rules that apply to the class which do the styling you want done. Media queries can't add or remove classes to elements, they merely change what rules apply to elements.

Upvotes: 19

Related Questions