Question

Can anyone suggest some javascript code that will refresh the browser window when the window is resized to a specific height. Similar to CSS Media queries.

i.e if the browser max-height is 700px then refresh.

Thanks in advance.

Answer 1

I’ve recently been doing something similar, and there’s a nice JavaScript function that I’m using:

var viewportwidth;
var viewportheight;

function resize() {
    // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight

    if (typeof window.innerWidth != 'undefined') {
        viewportwidth = window.innerWidth,
        viewportheight = window.innerHeight
    }

    // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document)

    else if (typeof document.documentElement != 'undefined' && typeof document.documentElement.clientWidth != 'undefined' && document.documentElement.clientWidth != 0) {
        viewportwidth = document.documentElement.clientWidth,
        viewportheight = document.documentElement.clientHeight
    }

    // older versions of IE

    else {
        viewportwidth = document.getElementsByTagName('body')[0].clientWidth,
        viewportheight = document.getElementsByTagName('body')[0].clientHeight
    }
}

This will get the current height and width of the browser. If you want to check when the user is resizing the page and call the resize() function, just use a simple JavaScript command window.onresize=resize();

This is the basic function. From here it should be easy enough to make some changes to the code. For example, if you want the page to be refreshed only when the width becomes greater than or equal to 700, add something like this to the resize() function:

if(viewportwidth >= 700) {
    window.reload();
}