CODEWITHSUNDEEP
javascriptcssdommedia-queries
Out of Orbit
Out of Orbit

Reputation: 563

@media query overwritten by javascript DOM manipulation

I have a @media query hiding/showing a DOM element by setting "display:none;" based on screen orientation. The following CSS works fine.

@media all and (orientation: landscape) {
  #header-container {
    display: none; 
  }
}

But after hiding and showing the same element in my javascript seems to break the media query. For example

//JS

this.element.find('#header-container').css(display: "none");

//And later..

this.element.find('#header-container').fadeIn(500);

The element is no longer hidden/shown based on orientation

My guess is that the .fadeIn() method sets a new value to the display property, and the only way I have found getting around this is to put !important in the media query like so:

@media all and (orientation: landscape) {
  #header-container {
    display: none !important; 
  }
}

Is using !important the only way to make the media queries persistent even after DOM manipulation?

Upvotes: 1

Views: 777

Answers (4)

sabithpocker
sabithpocker

Reputation: 15566

Animation/CSS with jQuery usually modifies the style attribute with the respective styles. So if it writes some display property in there that will override the CSS in stylesheet.

<div id="header-container" style="display:block;opacity:1"></div>

@media all and (orientation: landscape) {
  #header-container {
    display: none; 
  }
}

It should be some situation like above, so display will be block instead of none. Inline style has the highest precedence (only exception being use of important). Also note that media-query doesn't have any extra precedence, they work just like IF statements.

Meanwhile, you can override inline styles with [important][1] which you have already done as in:

@media all and (orientation: landscape) {
  #header-container {
    display: none !important; 
  }
}

Apparently, there is no other way to override inline CSS from within stylesheet. If you think about that, there can't be a reference to a DOM Node more specific than writing the CSS directly on the DOM Node itself in its style attribute.

In your scenario, you could reset the style of the element after doing jQuery animations, so reset the style after fadeIn is complete:

this.element.find('#header-container').fadeIn(500, function(){
    $(this).attr('style', '');
});

To briefly list the different cases in precedence order:

  1. Style declared in "style attribute" with !important keyword.

  2. Style declared in "stylesheet" with !important attribute.

  3. Normal style declared in style attribute (without !important attribute).

  4. Normal Style in style sheet.

Upvotes: 2

SilentTremor
SilentTremor

Reputation: 4902

redneck style removal :), get the fade in effects , at success fading -> remove the style (generated by fade-in) witch is overriding media query.

this.element.find('#header-container').fadeIn(500, function() {
    $(this).removeAttr('style');
});

Upvotes: 0

Benneb10
Benneb10

Reputation: 1489

You can wrap your javascript in an if statement like this, but doesn't work too well with responsive design. Just another way it could be done.

if (window.innerWidth > window.innerHeight){
    some javascript for landscape position
}
else{
    some javascript for portrait position
}

Upvotes: 0

David Jones
David Jones

Reputation: 4305

The reason you are seeing this behaviour is that the jQuery fadeIn method adds inline CSS so this will overwrite what is in the stylesheet. You could have some JS that fades it out again / hides it. I would not recommend putting display: none !important on it because then you will not be able to use JS to control the visibility. I'm assuming that in some state you want this element to be shown.

Any of the below should work.

//JS

this.element.find('#header-container').css(display: "none");

//And later..

this.element.find('#header-container').fadeIn(500);

// Later again.

this.element.find('#header-container').fadeOut(500);
this.element.find('#header-container').hide();

If you post more code I could give you a more detailed answer.

Hope that helps.

Upvotes: 0

Related Questions