Media Queries not working properly after Javascript alters element CSS

Question

any idea why in the example below, media queries stops changing the height of the menu bar after it's been changed by js? (make window small and click on the arrow to expand the mini menu). Do I need to register a point of origin for the menu element or something?

CSS:

#menu {
    position: fixed;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 90px;
    z-index: 11000;
    opacity: 1;
    background-color: #F03600;
    }

JS:

if ($("#arrowup").css('top') == '0px') {
    $("#menu").animate({'height':'270px'}, 800, "easeInOutQuint");
    } else {
    $("#menu").animate({'height':'55px'}, 800, "easeInOutQuint");
    }

You can check out the page here, all the code's on a single page:

http://www.nioute.co.uk/stuff/

Also, what's a good read with regards to media queries / js interaction?

Thanks!

Please read this: meta.stackexchange.com/questions/125997/… — Diodeus - James MacFarlane
– Diodeus - James MacFarlane, Commented Jul 12, 2013 at 19:56

ayyp · Accepted Answer · 2013-07-12 19:58:54Z

9

The reason the media queries don't work is because when you modify the bar with Javascript, it applies inline-css. This overrides CSS that you may have in your stylesheets. The problem seems to be, when you toggle the arrow back down, #menu has an inline style of height="55px" applied to it, which blocks the regular style of 90px on a larger size.

The solution would be to clear the style when the window is resized to larger than your media query breakpoint using something like $(window).resize(function()...); and checking the current width of the window against your breakpoint. If it returns true, call $('#menu').attr('style', ''); and that will remove the inline style.

answered Jul 12, 2013 at 19:58

ayyp

6,5984 gold badges35 silver badges47 bronze badges

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

1 Comment

phlidd Over a year ago

Worked really well Andrew thanks. Also instead of .attr() I used document.getElementById("menu").style.height = "90px"; - For extending the script to mobile devices I found matchMedia useful: dbaron.org/log/20110422-matchMedia

Paul Roub · Accepted Answer · 2019-05-12 20:18:50Z

1

You can use class for adding some styles to elements and removing they after the job instead of getElementById(#menu).style.height = ...

for example:

getElementById(#menu).classList.add("newHeight")

Or

getElementById(#menu).classList.remove("newHeight")

edited May 12, 2019 at 20:18

Paul Roub

36.5k27 gold badges88 silver badges95 bronze badges

answered May 12, 2019 at 20:04

Mahdi Irani

5583 silver badges6 bronze badges

Collectives™ on Stack Overflow

Media Queries not working properly after Javascript alters element CSS

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related