Javascript and media queries

Question

I want to add some kind of media query to the JS below so on mobile or screens <767px the height only animates to 280px. Also would be interested if this can be achieved with CSS

Javascript

   $("#open").click(function(e){
       e.preventDefault();
        $("div#panel").animate({height: "337px"},"medium");
    });

Many thanks

Answer 1

There's a great CSS3 solution that is described in this article: http://webdesignerwall.com/tutorials/adaptive-mobile-design-with-css3-media-queries

This technique uses the CSS media query: @media screen and (max-width: 767px) { ... }

Keep in mind that you might have to get a little creative in your solution if you choose to use this method. Let me know if this is enough information, or if you need me to detail how you could use this to solve your problem.

========== Edit

There's probably a much better way to go about this, but here's what I was thinking...

CSS:

#panel {
  z-index: 0;
}

@media screen and (max-width: 767px) {
  #panel {
    z-index: 1;
  }
}

jQuery:

$("#open").click(function(e){
  e.preventDefault();
  $("div#panel").css("z-index", 0).animate({height: "337px"},"medium");
  $("div#panel").css("z-index", 1).animate({height: "280px"},"medium");
});