How to only use jquery .css() on a specific media query?

Question

When a user's browser has a width of less than 1160px, a media query is setup to collapse my site's right sidebar. They can get it back by clicking on a little arrow and then it will overlap the content (absolute positioning).

Anyway, I used the following jQuery to achieve this:

$('.right_sidebar_preview').on('click', function() {
     $('.right_sidebar_preview').css('display', 'none');
     $('.right_sidebar').css('display', 'block');
});
$('.right_sidebar').on('click', function() {
     $('.right_sidebar_preview').css('display', 'block');
     $('.right_sidebar').css('display', 'none');
});

So basically I already have the preview hidden when the browser is larger than 1160px and the sidebar is visible, in the media query I have it set up so when it's below 1160px, the sidebar becomes invisible and the "sidebar preview" is shown which users can click to make it bigger.

CSS:

.right_sidebar {
  width: 242px;
  height: 100%;
  background-color: #d8e1ef;
  float: right;
  position: relative;
}
.right_sidebar_preview {
  display: none;
}
@media(max-width:1160px) {
  .right_sidebar {
    position: absolute;
    right: 0;
    display: none;
  }
  .right_sidebar_preview {
    display: block;
    background-color: #d8e1ef;
    position: absolute;
    right: 0;
    width: 15px;
    height: 100%;
  }
}

My question is, when I use the code above, let's say we're in the less than 1160px media query, I'll open the sidebar then collapse it again, and when I stretch my browser out to go back, it also closed the sidebar on the greater than 1160px media query.

So is there anyway I can use .css() (or an alternative method) to point at a specific media query?

Salman Arshad · Accepted Answer · 2015-03-23 22:38:40Z

3

Do not manipulate the CSS display: property. Instead, use CSS classes to control the visibility of sidebar and its handle. This way you can use your media query to control whether an element displays or not.

In the following demo, click the "Full page" button to see how this works on screens > 1160px.

$(function() {
  $('.right_sidebar, .right_preview').on('click', function() {
    $('.right_sidebar, .right_preview').toggleClass('lt-1160-hide lt-1160-show');
  });
});

.right_sidebar {
  width: 100px;
  height: 100px;
  background-color: papayawhip;
  float: left;
  display: block;
}
.right_preview {
  width: 20px;
  height: 100px;
  background-color: palegoldenrod;
  float: left;
  display: none;
}
@media(max-width: 1160px) {
  /* note: the following rules do not apply on larger screens */
  .right_sidebar.lt-1160-show, .right_preview.lt-1160-show {
    display: block;
  }
  .right_sidebar.lt-1160-hide, .right_preview.lt-1160-hide {
    display: none;
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>


<div class="right_sidebar lt-1160-hide">Sidebar</div>
<div class="right_preview lt-1160-show">&rsaquo;</div>

edited Mar 23, 2015 at 22:38

answered Mar 23, 2015 at 22:00

Salman Arshad

274k85 gold badges450 silver badges540 bronze badges

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

4 Comments

Brad Mitchell Over a year ago

Like using .addClass()? Wouldn't that just give me the same result if I was to add .css() to their current class?

C3roe Over a year ago

@Brad: No, it would not, if as Salman said you set up your classes to only affect the element when the media query is matched …

Salman Arshad Over a year ago

The point is that you use add/remove class functions instead of .css("display"); then in your stylesheet you set rules so that the sidebar is always visible and previous button is always hidden on larger screens. I'll try to add an example.

Brad Mitchell Over a year ago

Thanks a ton Salman, just figured it out as well. Also learned papayawhip is a color today. Chosen as best answer.

dyaa · Accepted Answer · 2015-03-23 21:49:42Z

1

On a recent project, I had to process a single function in jQuery based on the browser size. Initially I was going to check the device width was applicable to a mobile device (320px):

jQuery

$(window).resize(function(){

       if ($(window).width() <= 320) {  

              // your code here

       }     

});

or

$(window).resize(function(){     

       if ($('header').width() == 320 ){

              // your code here

       }

});

answered Mar 23, 2015 at 21:49

dyaa

1,45020 silver badges44 bronze badges

1 Comment

Brad Mitchell Over a year ago

I still run into the same issue. Your code works except when I collapse the sidebar (in the less than 1160px) it than shows collapse in the greater than 1160, and I always want it to be showing in that.

herrfischer · Accepted Answer · 2015-03-23 21:48:41Z

0

Something like this?

$(window).resize(function(){
   if ($(window).width() <= 1160){  
      // lets party
   }    
});

answered Mar 23, 2015 at 21:48

herrfischer

1,8282 gold badges24 silver badges36 bronze badges

1 Comment

Brad Mitchell Over a year ago

I still run into the same issue. Your code works except when I collapse the sidebar (in the less than 1160px) it than shows collapse in the greater than 1160, and I always want it to be showing in that.

Collectives™ on Stack Overflow

How to only use jquery .css() on a specific media query?

3 Answers 3

4 Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related