textNode

Все, связанное с web-строительством.

Модератор: [mweb team]

textNode

Сообщение Muerto Чт июл 16, 2009 14:20

Народ, есть такая фигняция. Нужно осуществлять эмуляцию table-cell для ИЕ (для одного блока, без вложенности).
Написал я такой бехайвир:
Код: Выделить всё
<public:component>
<public:attach event="oncontentready" onevent="propertyChanged()" />
<script>
function propertyChanged() {
(childNodes[0].nodeValue.length<15)?style.paddingTop="26px":style.paddingTop="16px";
(childNodes[0].nodeValue.length<15)?style.height="50px":style.height="60px";
}
</script>
</public:component>

Но это исключительно для частного случая. Хотелось бы написать универсальный. Но тут встает вопрос - как вычесли высоту текстовой ноды в блоке, чтобы вычеслить паддинг отверху. Вариант с вычеслением от размера строки не предлагать - Т.е. там надо взять кол-во символов, фонт-сайз (а вдруг в процентах или ЕМах???) + лайн-хейт + всякие &......; которые не считаются одним символом. Ну, в общем, это не путь.
Создать налету в бехайвире спан для ноды и вычеслить его оффсетхейт не получается. Я теряю надежду в себя, народ, поможите!
Nadie hablara de nosotras cuando hayamos muerto.
www.muerto.ru
Аватара пользователя
Muerto
Растаман
 
Сообщения: 3596
Зарегистрирован: Пн окт 11, 2004 20:09
Откуда: Москва

Re: textNode

Сообщение Muerto Чт июл 16, 2009 15:57

Гы! Есть тупая идея заменять на лету блок на таблицу (outerHTML). Однако универсальность страдает, поскольку всякие там КлассНэймы и АйДи перенести я могу, но стайл в теге - это полностью проверять все стили! Не говоря о том, что в стилевом листе может быть прямое прописывание тега table или первичного тега...
В итоге...
Привожу полностью код:
Код: Выделить всё
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>

<body>
<div style="background:url(http://adm.rt.tv/s/img/partner_bcgr.gif) 0 0 no-repeat; float:left; width:280px; height:76px;">
<a href="" style="display:table-cell; vertical-align:middle; background:url(http://adm.rt.tv/s/img/google.gif) 1px center no-repeat; width:143px; height:76px; padding:0 10px 0 127px; color:#54b135; font-size:16px; font-weight:bold; font-family:Arial; line-height:21px; //display:block;behavior: url('tablecell-1.htc');">Supercompany looks like Google</a>
</div>
<div style="background:url(http://adm.rt.tv/s/img/partner_bcgr.gif) 0 0 no-repeat; float:left; width:280px; height:76px;">
<a href="" style="display:table-cell; vertical-align:middle; background:url(http://adm.rt.tv/s/img/pravda.gif) 1px center no-repeat; width:143px; height:76px; padding:0 10px 0 127px; color:#54b135; font-size:16px; font-weight:bold; font-family:Arial; line-height:21px; //display:block;behavior: url('tablecell.htc');">Supercompany</a>
</div>
<div style="background:url(http://adm.rt.tv/s/img/partner_bcgr.gif) 0 0 no-repeat; float:left; width:280px; height:76px;">
<a href="" style="display:table-cell; vertical-align:middle; background:url(http://adm.rt.tv/s/img/yandex.gif) 1px center no-repeat; width:143px; height:76px; padding:0 10px 0 127px; color:#54b135; font-size:16px; font-weight:bold; font-family:Arial; line-height:21px; //display:block;behavior: url('tablecell.htc');">Supercompany looks like Google</a>
</div>
<div style="background:url(http://adm.rt.tv/s/img/partner_bcgr.gif) 0 0 no-repeat; float:left; width:280px; height:76px;">
<a href="" style="display:table-cell; vertical-align:middle; background:url(http://adm.rt.tv/s/img/moscowtopnews.gif) 1px center no-repeat; width:143px; height:76px; padding:0 10px 0 127px; color:#54b135; font-size:16px; font-weight:bold; font-family:Arial; line-height:21px; //display:block;behavior: url('tablecell.htc');">Supercompany</a>
</div>
<div style="background:url(http://adm.rt.tv/s/img/partner_bcgr.gif) 0 0 no-repeat; float:left; width:280px; height:76px;">
<a href="" style="display:table-cell; vertical-align:middle; background:url(http://adm.rt.tv/s/img/russiansentry.gif) 1px center no-repeat; width:143px; height:76px; padding:0 10px 0 127px; color:#54b135; font-size:16px; font-weight:bold; font-family:Arial; line-height:21px; //display:block;behavior: url('tablecell.htc');">Supercompany looks like Google</a>
</div>
<div style="background:url(http://adm.rt.tv/s/img/partner_bcgr.gif) 0 0 no-repeat; float:left; width:280px; height:76px;">
<a href="" style="display:table-cell; vertical-align:middle; background:url(http://adm.rt.tv/s/img/russiaprofile.gif) 1px center no-repeat; width:143px; height:76px; padding:0 10px 0 127px; color:#54b135; font-size:16px; font-weight:bold; font-family:Arial; line-height:21px; //display:block;behavior: url('tablecell.htc');">Supercompany</a>
</div>
</body>
</html>

Код tablecel.htc:
Код: Выделить всё
<public:component>
<public:attach event="oncontentready" onevent="propertyChanged()" />
<script>
function propertyChanged() {
(childNodes[0].nodeValue.length<15)?style.paddingTop="26px":style.paddingTop="16px";
(childNodes[0].nodeValue.length<15)?style.height="50px":style.height="60px";
}
</script>
</public:component>

Код tablecell-1.htc
Код: Выделить всё
<public:component>
<public:attach event="oncontentready" onevent="propertyChanged()" />
<script>
function propertyChanged() {
   outerHTML = "<table class='"+className+"' id='"+id+"'><tr><td valign='middle' style='border:red 1px solid'>"+childNodes[0].nodeValue+"</td></tr></table>";
}
</script>
</public:component>
Nadie hablara de nosotras cuando hayamos muerto.
www.muerto.ru
Аватара пользователя
Muerto
Растаман
 
Сообщения: 3596
Зарегистрирован: Пн окт 11, 2004 20:09
Откуда: Москва

Re: textNode

Сообщение Berezkin Чт июл 16, 2009 21:07

А зачем вообще нужен весь этот изврат? Эмуляция ячейки из дива...
Windows как презерватив - никому не нравится, но все пользуются.
Аватара пользователя
Berezkin
Заядлый `курильщик`
 
Сообщения: 612
Зарегистрирован: Вт дек 19, 2006 13:39
Откуда: Москоу

Re: textNode

Сообщение Jedi Чт июл 16, 2009 22:44

Я чёт не понял. это на каком языке? Что за htc такой?
Аватара пользователя
Jedi
Хронический Астматик
 
Сообщения: 1853
Зарегистрирован: Вс сен 08, 2002 1:01
Откуда: Russia

Re: textNode

Сообщение Padonak Пт июл 17, 2009 0:03

Jedi писал(а):Я чёт не понял. это на каком языке? Что за htc такой?



вот что я нашел (тут):

File extension HTC description:
For Microsoft Internet Explorer 5 and later, HTML Components (HTCs) provide a mechanism to implement components in script as Dynamic HTML (DHTML) behaviors. An HTC is an HTML file that contains script and a set of HTC-specific elements that define the component. The component is saved with an .htc extension. This section lists these HTC-specific elements and the members they support.
Mime: text/x-component


Муерта увлекся каким-то скриптовым Некрономиконом походу...

я тоже нихрена не понял чо он хочет да и вобще если уж Муерта не может сделать то я и не полезу т.к. это противоречит здравому смыслу
Uncaught TypeError: Изображение

Изображение
Аватара пользователя
Padonak
Табачный магнат
 
Сообщения: 3856
Зарегистрирован: Вт дек 13, 2005 4:23
Откуда: Ростов-на-Дону

Re: textNode

Сообщение Muerto Пт июл 17, 2009 11:38

Терпение, народ, терпение! Думаю сегодня я представлю полностью извращенную версию кода. Немецкое порно курит в сторонке!
Nadie hablara de nosotras cuando hayamos muerto.
www.muerto.ru
Аватара пользователя
Muerto
Растаман
 
Сообщения: 3596
Зарегистрирован: Пн окт 11, 2004 20:09
Откуда: Москва

Re: textNode

Сообщение Muerto Пт июл 17, 2009 16:13

Вот, полагаю, последний вариант htc:
Код: Выделить всё
<public:component>
<public:attach event="oncontentready" onevent="propertyChanged()" />
<script>
function propertyChanged() {
var islink;
   var re = /(style=(["'])[^\2]*(behavior:[^;]+;?)[^\2]*\2)/i
      if(outerHTML.match(re)) isstyle=RegExp.$1.toLowerCase().replace(RegExp.$3.toLowerCase(), "");

   var re1 = /href\s*=\s*["']?([^'"\s>]+)/i
   if(outerHTML.match(re1)) {
      islink = " onClick=\"document.location='"+RegExp.$1+"'\"";
      className=className + " pointer";
      }
      
   outerHTML = test = "<table class='"+className+"' id='"+id+"'><tr><td valign='middle' " + isstyle + islink + ">" + childNodes[0].nodeValue+"</td></tr></table>";
}
</script>
</public:component>

Только бехавиор надо прописовать стилем прямо в тег. Из стилевого листа он зацикливает преобразование. %(
Если в стилевом листе стиль прописан через тег - не сработают стили...
На его написание ушло шесть бутылок пива. Ежели кто, по недоразумению будет использовать - пиво высылать!
Nadie hablara de nosotras cuando hayamos muerto.
www.muerto.ru
Аватара пользователя
Muerto
Растаман
 
Сообщения: 3596
Зарегистрирован: Пн окт 11, 2004 20:09
Откуда: Москва

Re: textNode

Сообщение Berezkin Пт июл 17, 2009 16:18

Теперь не плохо было бы написать, что он делает и зачем все это нужно! Так я и не понял зачем делать из дива таблицу.
Windows как презерватив - никому не нравится, но все пользуются.
Аватара пользователя
Berezkin
Заядлый `курильщик`
 
Сообщения: 612
Зарегистрирован: Вт дек 19, 2006 13:39
Откуда: Москоу

Re: textNode

Сообщение Muerto Пт июл 17, 2009 16:59

Berezkin писал(а):Теперь не плохо было бы написать, что он делает и зачем все это нужно! Так я и не понял зачем делать из дива таблицу.

Ну не только из дива. Из любого блочного елемента. Просто это эмулятор "display:table-cell" для ИЕ. Выравнивание текста по вертикали в частности.
Nadie hablara de nosotras cuando hayamos muerto.
www.muerto.ru
Аватара пользователя
Muerto
Растаман
 
Сообщения: 3596
Зарегистрирован: Пн окт 11, 2004 20:09
Откуда: Москва

Re: textNode

Сообщение Muerto Вт июл 21, 2009 18:54

Есть неприятный момент. Сцуко ИЕ шибко не любит обратные ссылки - жадно берет и href со стилями. Но так как для таблицы это не важно (всё равно не влияет), то пока изменять код не буду.
Nadie hablara de nosotras cuando hayamos muerto.
www.muerto.ru
Аватара пользователя
Muerto
Растаман
 
Сообщения: 3596
Зарегистрирован: Пн окт 11, 2004 20:09
Откуда: Москва

Re: textNode

Сообщение Muerto Пт июл 24, 2009 19:09

В общем, то что я делал - полная муйня, нормально нигде не работает и тему закрываю.
Nadie hablara de nosotras cuando hayamos muerto.
www.muerto.ru
Аватара пользователя
Muerto
Растаман
 
Сообщения: 3596
Зарегистрирован: Пн окт 11, 2004 20:09
Откуда: Москва


Вернуться в Web-мастеринг

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 2

cron