JavaScript media queries

Question

I am trying to reduce the cube size for small screens using media queries. I gave media queries in js since my cube-size is set in js, but my cube size is not reducing when I decrease the browser window. Can you tell me why its not working?

http://jsfiddle.net/rajkumart08/8YK2n/embedded/result/

$(window).bind('resize', function() { location.reload();

     Gallery.setOptions({
            size: 78,
            lightbox: false,
            //animation:  'drop'
            //speed:      500,
            //closeOnEsc: true,
            //slideshow:  false,
            //slideshow_speed: 3000,
            //cube_speed: 1000
        });

 });

if (screen.width < 600) {

     $(window).bind('resize', function() { location.reload();

     Gallery.setOptions({
            size: 25,
            lightbox: false,
            //animation:  'drop'
            //speed:      500,
            //closeOnEsc: true,
            //slideshow:  false,
            //slideshow_speed: 3000,
            //cube_speed: 1000
        });

 });

Answer 1

Probably because you're using location.reload() , which will refresh the page and not run any of the subsequent code?

---

You're also doing the check outside of the resize handler, so you only bind the appropriate handler based on the window's original size. (Actually, if the window is smaller than 600, you'll bind both handlers and they'll both run!) You probably want that if inside your handler.

FYI, this isn't a "media query"; those are a specific new feature with a particular syntax ported from CSS. screen is an ancient DOM0 thing.

Also I've gotta say the endlessly rotating cube is pretty annoying.