как пример уже реализованого могу привести http://new.myspace.com/
|
Хех. Даже и не ожидал - там используется тотже самый прием :)
|
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<title>Document</title>
<style>
html, body, div{height: 100%;margin:0;padding:0;}
.wrp span{
vertical-align: top;
display: inline-block;
white-space:pre-wrap;
word-wrap: break-word;
width:200px;
height: 200px;
border: 1px solid red;
}
.wrp{
border: 1px solid blue;
white-space:nowrap;
padding:12px 0;
height: auto;
margin-top:0;
}
</style>
<div class=wrp>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span>
вввввввввввввввввввввввввввввввввввввввввв
вввввввввввввввввввввввввввввввввввввввввв
вввввввввввввввввввввввввввввввввввввввввв
вввввввввввввввввввввввввввввввввввввввввв
вввввввввввввввввввввввввввввввввввввввввв
вввввввввввввввввввввввввввввввввввввввввв
вввввввввввввввввввввввввввввввввввввввввв
вввввввввввввввввввввввввввввввввввввввввв
вввввввввввввввввввввввввввввввввввввввввв
</span>
</div>
|
Контроль изменения высоты любого из span, как критерий добавки колонок в div.wrp, либо еще каких-нибудь действий
(Закидываем в один из span контент больше максимально-допустимой высоты
<!DOCTYPE>
<html>
<head>
</head>
<body>
<style>
html, body, div{height: 100%;margin:0;padding:0;}
.wrp span{
margin: 0;
vertical-align: top;
display: inline-block;
white-space:pre-wrap;
word-wrap: break-word;
min-height: 200px;
max-height: 202px;
max-width:200px;
border: 1px solid red;
}
.wrp{
position:absolute;
border: 1px solid blue;
white-space:nowrap;
padding:0;
height: auto;
}
</style>
<div class=wrp><iframe name="frame" width="88" height="100%" style="margin:0;position:absolute;border:green solid 1px;/*z-index:-1*/"></iframe>
<span>вввввввввввввввввввввввввввввввввввввввввв
вввввввввввввввввввввввввввввввввввввввввв
вввввввввввввввввввввввввввввввввввввввввв
вввввввввввввввввввввввввввввввввввввввввв
ввввввввввввввввввввввввв</span>
<span>вввввввввввввввввввввввввввввввввввввввввв
вввввввввввввввввввввввввввввввввввввввввв
вввввввввввввввввввввввввввввввввввввввввв
вввввввввввввввввввввввввввввввввввввввввв
ввввввввввввввввввввввввв</span>
<span id=third></span>
<span id=fourth></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<script type="text" id="scr00">
ввввввввввввввввввввввввв ввввввввввввввввв
вввввввввввввввввввввввввввввввввввввввввв
вввввввввввввввввввввввввввввввввввввввввв
вввввввввввввввввввввввввввввввввввввввввв
ввввввввввввввввввввввввв
вввввввввввввввввввввввввввввввввввввввввв
ввввввввввввввввввввввввв
</script>
<script type="text/javascript">
setTimeout(function(){ // Отработка задержки фрейма (для FF и ИЕ)
var timerResize='first';
frame.onresize = function(){ // frame, - Имя фрейма (name=frame) - cм начало Кода;
if(timerResize!=='first')clearTimeout(timerResize);
timerResize=setTimeout( function(){ // Задержка для очистки чрезмерных срабатываний;
alert('Высота div class=wrp изменена.'); // Тело обработки события «onresize»;
},20) // Параметр 20(ms) , - зависит от нужной скорости реагирования на повторные события;
// актуально при плавных изменениях размера элемента,
// либо почти одновременное изменением размера несколькими разными процессами.
}
},200);
setTimeout(function(){ //Докидываем контент в третий span
document.getElementById("third").innerHTML='вввввввввввввввввввввввввввввввввввввввввв\
вввввввввввввввввввввввввввввввввввввввввв\
вввввввввввввввввввввввввввввввввввввввввв\
вввввввввввввввввввввввввввввввввввввввввв\
ввввввввввввввввввввввввв\
ввввввввввввввввввввввввв';
},3000);
setTimeout(function(){ //Докидываем контент в четвёртый span
document.getElementById("fourth").innerHTML=document.getElementById("scr00").innerHTML;
},7000);
</script>
</body>
</html>
|
HoenDHime, не обращайте внимание, у Deff'а iframe головного мозга. К сожалению он никак не излечится от этой болезни...
Deff, что мешает делать проверку изменения размеров при динамическом добавлении контента? |
danik.js,
Модульность Твой сменщик не будет рыть скрипты в поисках, а где тут анализ на высоту, Либо как обычно делают при таком раскладе - забивают на всё предыдущие скрипты, и смотрят по таймеру |
Deff, а ты что-нибудь о событийном программировании слышал? Некий модуль подгружает контент, по окончании триггерит событие (как минимум window.resize). Слушатель события делает нужные дела.
|
danik.js,
Не учи отца, я делал загрузку новостных блоков из нескольких источников, с в одну секцию авторазбиением на колонки, потом решили добавить новые,- добавлял другой парень В итоге масса проверок, - замена на один фрейм - сократила скрипты раза в три |
Потом у меня в последнее время такое чувство, что ты ревнуешь, я делаю то, что меня заинтересовало( и даже более для себя), сначало заинтересовала горизонтальная блочность, а тест на превышения высоты айфремом, это для теста задачку продумал
|
Делай че хочешь, но не учи кривым решениям других. Айфрейм - это костыль. В 99% случаев где ты пытаешься его использовать, он там не нужен. Или все тупые - а ты умный? И чего ж твои трюки с фреймом не оценили хабраюзеры?
|
| Часовой пояс GMT +3, время: 07:46. |