Override the JavaScripted style with media query

Question

In my page design, I have put a menu button on the small resolutions, which onclick I show the menu items. If the items are in the show state (which is done by JS) and I maximize the browser (it would change to another query conditions) the items did not hide. Even I add the display:none to the css to hide them, but it did not hide. To overcome I put !important there. But it caused another issue: the menu items would not shown by the menu click. It is appreciated if someone could help me. Edit for better understanding. The menu click js is as following:

$("#mobilemenu").click(function(){
   var dis = $("#menuitems li").css('display');
   if(dis == 'none') {
      $("#menuitems li").slideDown("slow");}
   else {
     $("#menuitems li").slideUp("slow");
   }
});

On my media query:

@media {
   #menuitems li {display:none;}
}

And on the main css:

#menuitems li {display:none;}

James Donnelly · Accepted Answer · 2014-02-26 09:43:43Z

2

Rather than directly setting the style in your JavaScript code, you should instead give the element a class which allows it to be styled with CSS.

For example, instead of directly setting display: block, you can show the element like this:

JavaScript

myElem.className = 'show';

CSS

myElem.show {
    display: block;
}

Then with your media query, you can simply override this:

CSS

@media screen {
    myElem.show {
        display: none;
    }
}

answered Feb 26, 2014 at 9:43

James Donnelly

129k35 gold badges215 silver badges224 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Payman Biukaghazadeh Over a year ago

thanks for your prompt response. I have edited my question and added the codes. Could you please take a look to see if it should changed to what you said?

James Donnelly Over a year ago

jQuery's slideDown() method directly sets display: block. You'll need to replace slideDown() with something else. (E.g. a CSS class styled to increase an element's height with a transition).

Collectives™ on Stack Overflow

Override the JavaScripted style with media query

1 Answer 1

JavaScript

CSS

CSS

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

JavaScript

CSS

CSS

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related