Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   функция при ресайзе (https://javascript.ru/forum/events/2749-funkciya-pri-resajjze.html)

BAnder 06.02.2009 17:32

функция при ресайзе
 
Нашел на просторах НЕТа одну небольшую функцию (самому написать мозгов пока не хватает), не хватает даже на модификацию.
Функция работает следующим образом - из указанных 2х блоков уравнивает их высоту. Задача состоит в том, что б перерасчет работал не только при однократной загрузке страницы, но и при ее ресайзе.
var oldHandler = window['onload'];
	window['onload'] =function() {
	   if(typeof(oldHandler) == 'function') {
	      oldHandler();
	   }
	   setHeight();
	};
	function setHeight() {
		var b1 = document.getElementById('name1');
		var b2 = document.getElementById('name2');
		if (!b1 || !b2) return;
		var h1 = b1.offsetHeight;
		var h2 = b2.offsetHeight;
		if (h1 > h2) {
			b2.style.height = (h1 - 0) + 'px';
			b1.style.height = (h1 - 0) + 'px';
		}else if (h1 < h2) {
			b1.style.height = (h2 - 0) + 'px';
			b2.style.height = (h2 - 0) + 'px';
		}
	}

ZoNT 06.02.2009 17:47

window.onload = window.onresize =function() {...

Ну и про старую функцию на ресайзе не забыть...

BAnder 06.02.2009 17:48

ZoNT,
именно так я и пробовал - не вышло :(

ZoNT 06.02.2009 17:49

фигово пробовал...

BAnder 06.02.2009 17:53

блин, даже отредактировать не успел, уже ответ :)
в общем не совсем так я пробовал
функция у меня в голове (в смысле в head-e)
var oldHandler = window['onload']=window['onresize'];
	window['onresize']=window['onload'] =function() {
	   if(typeof(oldHandler) == 'function') {
	      oldHandler();
	   }
	   setHeight();
	};
    function setHeight() {
        var b1 = document.getElementById('name1');
        var b2 = document.getElementById('name2');
        if (!b1 || !b2) return;
        var h1 = b1.offsetHeight;
        var h2 = b2.offsetHeight;
        if (h1 > h2) {
            b2.style.height = (h1 - 0) + 'px';
            b1.style.height = (h1 - 0) + 'px';
        }else if (h1 < h2) {
            b1.style.height = (h2 - 0) + 'px';
            b2.style.height = (h2 - 0) + 'px';
        }
    }

Код изменил только в функцие.

ZoNT 06.02.2009 18:08

var oldHandler = window['onload']=window['onresize'];

Это что? Ты затёр онлоад!

BAnder 06.02.2009 18:18

ZoNT, вроде ситуация потихоньку проясняется
но почему тогда не пашет такой вариант
var oldHandlerl = window['onload'];
var oldHandlerr=window['onresize'];
	window['onresize']=window['onload'] =function() {
	   if(typeof(oldHandlerl) == 'function' || typeof(oldHandlerr) == 'function') {//в сравнении пробовал оставить только одно- результат все равно отрицательный
	      oldHandlerl();
	   }
	   setHeight();
	};

остальная часть кода - без изменений


Upd. Кстати, зачем нам нужны эти олдХэндлеры?

ZoNT 06.02.2009 18:34

дай ссылку на страничку, а то я тут с тобой до пенсии сидеть буду...

BAnder 06.02.2009 18:37

ZoNT,
вот

ЗЫ. а мне все больше и больше начинает нравиться этот форум :)

ZoNT 06.02.2009 18:41

Я не понял, блоки при онлоаде, стали равны, что ты хочешь от онресайза?

ZoNT 06.02.2009 18:44

пиши:
var oldHandlerr = window.onresize;
window.onresize = function() {
      alert(1);

      if(typeof oldHandlerr== 'function') oldHandlerr();
}


Проверяй, есть алерт?

Андрей Параничев 06.02.2009 18:45

BAnder,
Старый обычно сохраняют для того, чтобы не затереть.
// Код какого-то скрипта:
window.onload = function() { /* инициализация */ };

// Ваш код, в другом месте:
window.onload = function() {/* ваш скрипт */};

В итоге первая установка обработчика будет переназначена, и не выполнена, естественно. Для того, чтобы этого избежать, обычно сохраняют старый обработчик. Но лучше назначать обработчики через специальные методы. Тогда можно устанавливать условно-бесконечное количество обработчиков на любое событие окна или элемента.

BAnder 06.02.2009 19:14

Попробовал так:
function setHeight() {
		var b1 = document.getElementById('name1');
		var b2 = document.getElementById('name2');
		if (!b1 || !b2) return;
		var h1 = b1.offsetHeight;
		var h2 = b2.offsetHeight;
		if (h1 > h2) {
			b2.style.height = (h1 - 0) + 'px';
			b1.style.height = (h1 - 0) + 'px';
		}else if (h1 < h2) {
			b1.style.height = (h2 - 0) + 'px';
			b2.style.height = (h2 - 0) + 'px';
		}
	}
input.attachEvent( "onload" ,	setHeight())
input.attachEvent( "onresize" ,	setHeight())
input.addEventListener( "load" , setHeight(), false)
input.addEventListener( "resize" , setHeight(), false)

Не пашет. Что я опять набокопорил?
Андрей Параничев,
я так понимаю, что в данном случае в этом нет надобности? Если нет, то почему?

Кстати, ZoNT, алерт есть.

BAnder 06.02.2009 20:49

Вот попробовал запустить функцию указанным по ссылке способом
<html>
<head>
<script type="text/javascript">
function foo(){
alert("test");
window.status="cool";
}
input.attachEvent( "onload" ,    foo());
input.addEventListener( "load" , foo(), false);
</script>
</head>
<body>
</body>
</html>

Ну и не писал бы я сюда, если б это работало...
Если создать что-то в теле документа, и запустить функцию через какое-либо событие - все нормалек (строка состояния только в мозилле не отображается, но на сколько я помню - эта функция по умолчанию там отключена, а программно можно менять ли нет - не в курсе).

Андрей Параничев 06.02.2009 21:58

BAnder,
В эти функции нужно передавать аргументом функцию-обработчик, а не результат её выполнения.
Поэтому, ваш код должен выглядеть так:
<html>
<head>
<script type="text/javascript">
function foo(){
alert("test");
window.status="cool";
}
// Почему input? Обработчик мы ставим на окно:
if (window.attachEvent)
    window.attachEvent( "onload" ,    foo);
else
    window.addEventListener( "load" , foo, false);
</script>
</head>
<body>
</body>
</html>

BAnder 07.02.2009 14:37

Народ, всем большущее спасибо. С проблемой разобрался. Код адаптировал под свои нужды. Всем респект.


Часовой пояс GMT +3, время: 08:09.