Media Query conflicts with $(window).resize()

0
votes

I've got a left nav div that hides via media query at < 768 and a filter button that displays at < 768. When you click the filter button it uses JQuery to toggle the display of the left nav via show()/hide(). When the window is resized >= 768 I use JQuery to set the display of the left nav back to show.

As I said, my media query handles hiding the left nav when the window width goes below 768, but the problem is it only fires if I have not clicked the filter button. Once I size it under 768 and then click the filter button to turn it on and then click it again to turn it off and then size up over 768 and then back down the left nav is still there. It's like the media query no longer works for the display:none attribute. There are other css properties I change in the media query like width and color and those still work, but it's no longer hiding the div.

I've simplified the code to illustrates the problem.

HTML

<a href="" id="filterButton">Button</a>
<div id="navLeft">NavLeft</div>

CSS

#navLeft {
    background-color:orange;
}
#filterButton {
    background-color:silver;
    display: none;
}

@media only screen and (max-width: 300px) {
#navLeft {
    display: none;
    }
#filterButton {
    display: inline;
    }
}

JS

$(window).resize(function()
    {
    var $theWindowSize = $(this).width();
    if($theWindowSize > 300)
        {
        $('#navLeft').show();
        }
    });

// Filters
$('#filterButton').bind('click',function(event)
    {
    event.preventDefault();

    if ($('#filterButton').hasClass('filtersActive'))
        {
         $('#navLeft').hide();
         $('#filterButton').removeClass('filtersActive');
        }
    else
        {
        $('#navLeft').show();
        $('#filterButton').addClass('filtersActive');
        }
    });

Here's the fiddle. To replicate the behavior follow the steps below.

https://jsfiddle.net/athcy8fL/

1) Resize the width of the Result viewport several times under and above 300px before clicking anything and you'll see everything works as planned. Under 300px the button comes on and the NavLeft div hides. Over 300px and the Button hides and the NavLeft shows

2) Size the Result viewport below 300px and click the Button link. The NavLeft div should appear. Good.

3) Size the Result viewport above 300px and the Button hides. Good.

4) Size the Result viewport below 300px, the NavLeft should hide but it does not. Not Good.

Why doesn't the media query work after using Javascript to alter its display property?

2
javascriptjquerycssmedia-queries

2 Answers

3
votes

The problem is that when you call .show() in an element that is not already visible, jquery will add an inline style to show the element and override your css, causing the media-query not to work.

I modified your code a little bit to take the inline-style priority into account http://jsfiddle.net/yjs3fou7/

basically I changed the resize function:

$(window).resize(function()
{
var $theWindowSize = $(this).width();
if($theWindowSize > 300)
    {
        $('#navLeft').show();
        $('#filterButton').removeClass('filtersActive')
    } else {
        if (!$('#filterButton').hasClass('filtersActive'))
            $('#navLeft').hide();
    }
});

inline styles have more priority than id or class styles according to css specificity rules so once you start manipulating things from javascript you must remember it may cause your css to stop being applied

1
votes

The problem is the use of inline styles which has more specificity than the css rules.

$(window).resize(function() {
  var $theWindowSize = $(this).width();
  if ($theWindowSize > 300) {
    $('#navLeft').removeClass('show');
    $('#filterButton').removeClass('filtersActive');
  }
});

// Filters
$('#filterButton').bind('click', function(event) {
  event.preventDefault();
  $('#filterButton').toggleClass('filtersActive');

  $('#navLeft').toggleClass('show', $('#filterButton').hasClass('filtersActive'));
});
#navLeft {
  background-color: orange;
}
#filterButton {
  background-color: silver;
  display: none;
}
@media only screen and (max-width: 300px) {
  #navLeft {
    display: none;
  }
  #filterButton {
    display: inline;
  }
  #navLeft.show {
    display: block;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a href="" id="filterButton">Button</a>
<div id="navLeft">NavLeft</div>

Demo: Fiddle