Используйте jQuery для захвата события, когда размер окна браузера изменяется, затем сделайте что-нибудь. В приведенном ниже примере записывается новый размер окна.
Обновление 16/05/2013: см. Метод debounce ниже для более разумного изменения размера окна!
//capture window resize $(window).bind('resize', function(e) { var win = $(this), w = win.width(), h = win.height(); console.log('window resized to: ' + w + ' by ' + h); }); //output: window resized to: 1598 by 521 Обновить страницу при изменении размера браузера
Довольно хакерское кросс-браузерное решение IE8 +.
//this is in a timeout so it works in IE8 setTimeout(function() { $(window).bind('resize', function(e) { if(window.RT) clearTimeout(window.RT); window.RT = setTimeout(function() { this.location.reload(false); /* false to get page from cache */ }, 300); }); }, 1000);
Пример изменения положения навигационной панели при изменении размера окна
Переместить панель меню навигации при изменении размера окна. Небольшая задержка 300 мс, но это не позволяет рекурсивно вызывать репозицию при изменении размера браузера.
(function($,W) { //DOM Ready $(function() { //responsive main nav absolute top position relative to window height function repositionMainNav() { var newT = W.innerHeight - 300; newT = (newT < 165) ? 165 : newT; //min top newT = (newT > 550) ? 550 : newT; //max top // console.log(newT); $('#navbar').css('top', newT); } repositionMainNav(); $(W).bind('resize', function(e) { if(W.RT) clearTimeout(W.RT); W.RT = setTimeout(function() { //recalculate the vertical position of the main nav repositionMainNav(); }, 300); }); }); })(jQuery, window);
Отклонено событие изменения размера окна «Умнее»
Любезность вечно выдающегося г-на Пола Айриша в его оскверненном посту и демонстрация в действии
(function($,sr){ // debouncing function from John Hann // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/ var debounce = function (func, threshold, execAsap) { var timeout; return function debounced () { var obj = this, args = arguments; function delayed () { if (!execAsap) func.apply(obj, args); timeout = null; }; if (timeout) clearTimeout(timeout); else if (execAsap) func.apply(obj, args); timeout = setTimeout(delayed, threshold || 100); }; } // smartresize jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); }; })(jQuery,'smartresize'); // usage: $(window).smartresize(function(){ // code that takes it easy... });-(function($,sr){ // debouncing function from John Hann // http://unscriptable.com/index.php/2009/03/20/debouncing-javascript-methods/ var debounce = function (func, threshold, execAsap) { var timeout; return function debounced () { var obj = this, args = arguments; function delayed () { if (!execAsap) func.apply(obj, args); timeout = null; }; if (timeout) clearTimeout(timeout); else if (execAsap) func.apply(obj, args); timeout = setTimeout(delayed, threshold || 100); }; } // smartresize jQuery.fn[sr] = function(fn){ return fn ? this.bind('resize', debounce(fn)) : this.trigger(sr); }; })(jQuery,'smartresize'); // usage: $(window).smartresize(function(){ // code that takes it easy... });