Форум

HoenDHime · #11 (**permalink**) 24.02.2013, 22:36

как пример уже реализованого могу привести http://new.myspace.com/

danik.js · #12 (**permalink**) 24.02.2013, 23:02

Хех. Даже и не ожидал - там используется тотже самый прием

Deff · #13 (**permalink**) 25.02.2013, 01:33

<!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>

Deff · #14 (**permalink**) 25.02.2013, 06:13

Контроль изменения высоты любого из 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>

danik.js · #15 (**permalink**) 25.02.2013, 06:22

HoenDHime, не обращайте внимание, у Deff'а iframe головного мозга. К сожалению он никак не излечится от этой болезни...
Deff, что мешает делать проверку изменения размеров при динамическом добавлении контента?

Deff · #16 (**permalink**) 25.02.2013, 06:30

danik.js,
Модульность

Твой сменщик не будет рыть скрипты в поисках, а где тут анализ на высоту,
Либо как обычно делают при таком раскладе - забивают на всё предыдущие скрипты, и смотрят по таймеру

danik.js · #17 (**permalink**) 25.02.2013, 06:36

Deff, а ты что-нибудь о событийном программировании слышал? Некий модуль подгружает контент, по окончании триггерит событие (как минимум window.resize). Слушатель события делает нужные дела.

Deff · #18 (**permalink**) 25.02.2013, 06:44

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

Deff · #19 (**permalink**) 25.02.2013, 06:48

Потом у меня в последнее время такое чувство, что ты ревнуешь, я делаю то, что меня заинтересовало( и даже более для себя), сначало заинтересовала горизонтальная блочность, а тест на превышения высоты айфремом, это для теста задачку продумал

danik.js · #20 (**permalink**) 25.02.2013, 07:09

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

Форум

Справочник

Discord чат

Курсы javascript