CODEWITHSUNDEEP
javascriptjquerycss
zJorge
zJorge

Reputation: 798

Make jQuery .show() to assign display based on Media Query

According to jQuery documentation the .hide() effect stores the element's display value in order to restore it when .show() is called.

The matched elements will be hidden immediately, with no animation. This is roughly equivalent to calling .css( "display", "none" ), except that the value of the display property is saved in jQuery's data cache so that display can later be restored to its initial value. If an element has a display value of inline and is hidden then shown, it will once again be displayed inline.

However, I have a navigation UL element that is display:flex; when screen width is > 768 and display:block; when shown on screens up to 768. So if you are on an iPad vertically, open and close the navigation then rotate to horizontal position, the navigation that should be display:flex; is now display:block;

BTW I'm using jquery.slimmenu.js from @adnantopal. I tried to override it by adding .css('display:flex'); depending on $(window).width() but Slimmenu's commands prevail.

Upvotes: 1

Views: 128

Answers (1)

Rounin
Rounin

Reputation: 29463

Javascript:

The javascript equivalent of CSS @media queries is window.matchMedia:

var minWidth768px = window.matchMedia("(min-width:768px)");

if (minWidth768px.matches) {
    ....CODE HERE...
    }

jQuery:

The closest jQuery equivalent is $(window).width().

But... you need to be aware that $(window).width() on its own will also include the width of the scrollbar on the right hand side of the window.

So you need to do something like this:

$('body, html').css('overflow', 'hidden');
var windowWidth = $(window).width();
$('body, html').css('overflow', 'auto');

Then you can continue in jQuery with:

if (windowWidth > 767)  {
        ....CODE HERE...
        }

Upvotes: 1

Related Questions