使JS响应屏幕宽度

Question

I am having trouble with getting my JS to respond to browser size. To give an idea of what I am working on, my updated JS Fiddle can be found at the link http://jsfiddle.net/T5CqA/1/ .

The original code is as follows; ` $(document).ready(function(){

            $('#myDeepMenu').deepMenu({"tileW":64,"tileH":100,
                                       "columns":2,"rows":2,
                                       "mark-type":"top-left",
                                       "mark-color":"#A1A1A1"});
        });

When you click on the icons (there are no icons at the moment), several image menus pop up. The arrangement of these icons is dictated by the "Row" and "Column" portion of the Javascript. I am having trouble getting the values to change based on screen resize. I want the colums and row arrangement to be different so that they fit screen size.

For instance, going from a single row and column to several when the screen gets smaller.

Answer 1

Here's a jQuery module I like to include into development sites I am working with resizing the window so that I can see the value in the console and use the returned value from checkWidth() to make calculations.

jQuery(function($){

    //store the reference outside the event handler:
    var $window = $(window);

    function checkWidth() {
        var windowSize = $window.width();

        return windowSize;
    }

    // Execute on load
    checkWidth();

    // Bind event listener to window resize
    $(window).resize(function(){
            //remove console.log from production version - useful for while in development
        console.log('checkWidth: ', checkWidth() + 'px' );
    });

});