CODEWITHSUNDEEP
jquerycss
John Holliday
John Holliday

Reputation: 333

What is the jQuery equivalent of @media screen and (max-width:1000px) and (min-width:747px)

I would like to wrap these elements

<div class="nav_menu"></div>
<div clss="logo_wrapper"></div>

on screen sizes between 1000px and 747px. So i would like it to become this:

<div class="menu-logo-wrapper">
    <div class="nav_menu"></div>
    <div clss="logo_wrapper"></div>
</div>

I was a bunch of questions about doing just min or just max width on jQuery, but I have no idea how to combine the two.

Just to be sure I'm doing the other part right, the wrap jQuery I use is:

$('.mobile_menu_button, .logo_wrapper').wrapAll( "<div class='menu-logo-wrapper'></div>" );

Upvotes: 0

Views: 979

Answers (3)

セアンデエ
セアンデエ

Reputation: 224

This Jquery Media Query works for me. Hope this works for you as well

Code:

  if (Modernizr.mq('screen and (min-width: 747px) and (max-width:1000px) ')) {
           /*Your Code Here*/
        }

Upvotes: 0

ElusiveCoder
ElusiveCoder

Reputation: 1609

You can do it by following, and you're done....

    if (window.matchMedia('(max-width: 1000px) and (min-width:747px)').matches) {
        //...
    } else {
        //...
    }

Upvotes: 1

waleed
waleed

Reputation: 464

You can always use windows width to add and remove classes or dynamically change the UI inside conditions. Here is the example code.

if($(window).width() < 1000 && $(windows).width > 747)
{
  // write something here 
  $( "#idOfYourClass" ).addClass( "your new class" );

}
elseif($(window).width() < 747)
{
  //do something else
}
else { 
 //  $( "#idOfYourClass" ).removeClass( "your new class" ); or maybe something else
}

Upvotes: 3

Related Questions