onResize() для DIV-a
Доброго времени суток. У меня на сайте дизайн построен по принципу блокнота (faiwer.ru), в нижней правой части может получится небольшой разрыв или наплыв, что не есть хорошо. Написал для решения этой проблемы скрипт, который залатывает дыру отдельным DIV-ом. Повешал выполнение этой функции при Ready() и onResize(). Однако, иногда, блок (который аля блокнот) изменяет свои размеры не изменяя размеры формы, ввиду чего надо заного вызвать мою функцию по залатыванию. Но я не знаю как отследить это событие.
Либо дописывать во все функции, которые могут растянуть DIV, свою функцию, что малореально (да и вообще аморально), либо повешать таймер. Я не уверен, но мне показалось, что мой сайт крашится в IE7 именно из-за таймера, похоже что там происходит переполнение буфера. Что посоветуете сделать? Как решить проблему? Вот код функции
function fix_page(){
var ext_H = 48; // лишняя высота
var one_item = 46; // высота одного полного звена
var bad_section = 23; // нормальная часть - резерв на всякий пожарный
var d = document.getElementById("left_column");
var c = document.getElementById("cover");
if (!d || !c) return false;
var dy = (d.clientHeight - (ext_H)) % one_item;
if (dy < bad_section)
c.style.bottom=25+dy+"px"
else c.style.bottom=24+"px";
setTimeout("fix_page()", 1000);
}
|
Прошу прощения, я не понял что за задача:
Решить задачу с версткой (чтобы всё было красиво и правильно) или Сделать так, чтобы ваш скрипт в ие7 не крашился? |
Прошу прощения, я не понял что за задача: Решить задачу с версткой (чтобы всё было красиво и правильно) или Сделать так, чтобы ваш скрипт в ие7 не крашился? Задача - вызывать fix_page() всякий раз, когда определённый DIV изменяет свои размеры |
<html>
<head>
<style type="text/css">
div{
background:#ccc;
max-width:700px;
}
</style>
</head>
<body>
<div id='test'>
test test test test test test test test test test test
test test test test test test test test test test test
test test test test test test test test test test test
</div>
<script type="text/javascript">
var div = document.getElementById('test'),
handler = (function(){
//чтобы сильно не грузить браузер обработчик срабатывает с задержкой 500мс после ресайза окна
var timer,
delay = 500;
return function(){
if(timer){
clearTimeout(timer);
}
timer = setTimeout(function() {
if(div.offsetWidth != div.widthBefor){
fix_page(); //ваша функция
}
div.widthBefor = div.offsetWidth;
}, delay);
};
})();
div.widthBefor = div.offsetWidth; //запоминает исходную ширину блока
window.onresize = handler; //срабатывает при ресайзе окна браузера
</script>
</body>
</html>
|
Может я несколько недопонял ваш код, но судя по всему он делает тоже самое что и мой:
1. назначает window.onResize 2. вешает таймер 3. по таймеру запускает функцию Верно? А этот участок я не понял:
if (timer){
clearTimeout(timer);
}
У меня почти тоже самое, но как то попримитивнее, таймер я встроил в саму функцию:
$(document).ready(function(){
$(window).resize(fix_page);
fix_page();
});
function fix_page(){
// тут код функции, примитивный расчёт
setTimeout("fix_page()", 1000); // рекурсия
}
Вроде работает, но это как то "костыльно", что-ли... Возник ещё 1 вопрос. setTimeout "выходит" из функции или переполняет стек до вылета браузера?) Ах да. кажется ваш код срабатывает только при onResize окна... :) у меня сложность заключается как раз в том, что я не могу отследить onResize блока. Блок хоть и большой, но не всегда при его растягивании или стягивании срабатывает onResize() окна. |
Цитата:
|
А почему нельзя поставить функцию на body.onmousedown или mouseup? Ведь если я правильно понял смысл то содержимое не появляется просто так или я ошибаюсь.
|
| Часовой пояс GMT +3, время: 17:02. |