Question

Im currently using 2 CSS style sheets with media queries attached for my website so that it will resize for different browser sizes. My problem is that I have a Jquery powered slideshow and I need the images to change to a smaller size when the website is being viewed at the smaller resolution. I have the slideshow contained in a div that has a jquery animation that expands the set width of the box giving the illusion of revealing the slideshow inside which needs to alter as well to compensate.

Here is my default Jquery that has the animation for the div to expand

$(document).ready(function() {
$("#slideshow_box")
    .animate({"height": "600px"}, 500)
    .animate({"width": "488px"}, 500);
});

How would I change that so that the smaller viewing version would be this but would only trigger off when the site is being viewed in the smaller resolution?

$(document).ready(function() {
$("#slideshow_box")
    .animate({"height": "400px"}, 500)
    .animate({"width": "288px"}, 500);
});

CSS

#slideshow_box{
    position:relative;
    float:left;
    height: 0px;
    width: 0px;
    margin-right: 60px;
    overflow:hidden;
}

Answer 1

Use screen width and height. based on these write your code

 $(document).ready(function(){
   if ((screen.width>=1024) && (screen.height>=768)) {

        alert('Screen size: 1024x768 or larger');

  }
  else  {
        alert('Screen size: less than 1024x768, 800x600 maybe?');

    }
});

Thanks..