Question

Is there a way to detect when the user resizes the screen below a certain width and height and show a div with a message (in a div) saying the window has become too small to properly display the page?

Answer 1

var resizeTimer;

function nagOnResize() {
    //pause for 1/4 of a second to see if the window stopped moving
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(doNagOnResize, 250);
}

function doNagOnResize() {
    $(window).unbind('resize', nagOnResize); //pause the event
    var h = $(window).height(), w = $(window).width();
    if(w < 300) {
        alert("< 300px wide");
    }
    $(window).resize(nagOnResize); //continue the event
};

$(window).resize(nagOnResize);

Live example: http://jsfiddle.net/FWhgT/