Что вы не можете перенести из .HTC файлов в обычный JS
 

Привет всем!

Собственно сабж. В ИЕ много разных моментов решается через HTC файлы, но порой HTC это не всегда удобно, но если по вашему мнению функционал реально осуществить лишь только через HTC, и если у вас есть что-то что вы желаете иметь в обычных JS файлах, я могу вам это смело переиначить, причем функционал от этого совершенно не измениться. Скорость работы ниже не будет. То-есть вы получите в результате то чего было в HTC но уже ввиде нормального, привычного .js файла.

Если есть идеи, пишите, решим. Ибо ничего нерешаемого не бывает.

devote, для верстальщиков проще написать behavior(bla bla), чем присоединить скрипт в условном комментарии. А может быть, они не знают, что это одно и то же.

видимо, хотя верстальщики скрипты так же приклеивают, когда всякие там UI библы юзают.. не думаю что проблема будет вписать один раз .js файл и не мучать мозг

Как-то делал летающие деревья по экрану отражающиеся в воде.

Была задача вписать прямоугольное изображение с острыми углами в прямоугольник с закругленными углами, отразить его вертикально, сверху наложить полупрозрачный затухающий градиент и заставить это всё двигаться по экрану в количестве 5-9 штук и изменяться в размерах. Исходное изображение изменять было нельзя. Сроки ограничены, во всех браузерах 2 недели потолок.

Решал с помощью PIE.htc и фильтров, удалось решить только в статике в IE7, IE8, анимация расходилась и глючила по полной программе. В IE7 были очень большие траблы и пришлось отказаться от анимации совсем. IE8 частично, без отражений.

К чему это я. Статика и динамика это разные вещи. Мне бы хотелось иметь универсальный скрипт, но я уже понял, что таких не бывает.

devote,
Хочу отражение в динамике, как описано выше и чтобы летало :)

Скока? :D

Не так то сложно. Всё упирается в желание и время.

В моем случае, только в интерес к теме :).

вот именно, но у него 2 недели потолок)

Я знаю, болтать легко.

Мне ужо не надо. Я про универсальность. Многим просто не нужно того, что ты предлагаешь.

никто не спорит

:D после курения манов микрософт уже ничего не кажется невозможным в IE. завтра утром для зарядки мозгов попробую. можно же сюда написать?)

О да, я их прокурил так что уж ничего и не видно сквозь никотин налипший на их писанину :D

а кто против? )

devote, тебе открылись тайные знания? Был у меня один такой случай, что без подключения htc не обойтись, но сейчас уже не вспомню.

Ну, вот моя попытка. Всё свелось к аналогии с box-shadow: клонировали элемент, и добавили копии эффектов. Эффекты такие: поворот (на 180 градусов), ревёрсинг (отражение справа налево), и размытие. Последнее достигается сложновато в опере и файрфоксе.

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

Начну с классического вида элемента, без отражения.

<style>
* {margin:0;padding:0}

.mirrorize {
    font-family: sans-serif;
    font-size: 18px;
    font-weight: bold;
    border: 2px red solid;
    padding: 5px;
    background-color: #F58C8C;
    position: absolute;
    top: 0;
}
</style>
<div class="mirrorize">
    Mirrorize me.
</div>

А теперь начну мешать сюда грязный код. Пример для браузеров, поддерживающих CSS Filters (у меня только хром):

<style>
* {margin:0;padding:0}

.mirrorize {
    font-family: sans-serif;
    font-size: 18px;
    font-weight: bold;
    border: 2px red solid;
    padding: 5px;
    background-color: #F58C8C;
    position: absolute;
    top: 0;
}
.reflection {
    position: absolute;
    width: 100%;

    left: 0;
    padding: 0;
    margin: 0;

    top: 105%; /* outer высота + отступ */

    -webkit-transform: scaleY(-1);
    -moz-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    transform: scaleY(-1);

    -webkit-filter: blur(2px);
    -moz-filter: blur(2px);
    -ms-filter: blur(2px);
    -o-filter: blur(2px);
    filter: blur(2px);
}
</style>
<div class="mirrorize">
    Mirrorize me.
    <div class="reflection mirrorize">Mirrorize me.</div>
</div>

Теперь решение для IE:

<style>
* {margin:0;padding:0}

.mirrorize {
    font-family: sans-serif;
    font-size: 18px;
    font-weight: bold;
    border: 2px red solid;
    padding: 5px;
    background-color: #F58C8C;
    position: absolute;
    top: 0;
}
.reflection {
    position: absolute;
    width: 100%;

    left: 0;
    padding: 0;
    margin: 0;

    top: 105%;

    /*IE 5.5 - IE 7*/
    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1) progid:DXImageTransform.Microsoft.Blur(pixelRadius=2);
    
    /*IE8 вроде как.*/
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1) progid:DXImageTransform.Microsoft.Blur(pixelRadius=2)";
}
</style>
<div class="mirrorize">
    Mirrorize me.
    <div class="reflection mirrorize">Mirrorize me.</div>
</div>

Ну а теперь решение для браузеров, поддерживающих CSS Transformations, но не поддерживающих CSS Filters - т.е. размытие. На ум мне пришло SVG.

<style>
* {margin:0;padding:0}

.mirrorize {
    font-family: sans-serif;
    font-size: 18px;
    font-weight: bold;
    border: 2px red solid;
    padding: 5px;
    background-color: #F58C8C;
    position: absolute;
    top: 0;
}
.reflection {
    position: absolute;
    width: 100%;

    left: 0;
    padding: 0;
    margin: 0;

    top: 105%;

    -webkit-transform: scaleY(-1);
    -moz-transform: scaleY(-1);
    -ms-transform: scaleY(-1);
    -o-transform: scaleY(-1);
    transform: scaleY(-1);

    filter: url(#reflection_blur);
}
</style>

<svg>
    <defs>
        <filter id="reflection_blur">
            <feGaussianBlur stdDeviation="2" />
        </filter>
    </defs>
</svg>

<div class="mirrorize">
    Mirrorize me.
    <div class="reflection mirrorize">Mirrorize me.</div>
</div>

melky,
Всё нормально за исключением того, что это не картинка и ты потерял закругленные углы и градиент. Ну и кроссбраузерность обязательна. И я напомню, что картинка берется изначально с острыми углами.

закруглённые углы? там отражение является точной копией отражаемого элемента, с добавлением ещё одного класса... как мог стиль потеряться? Недавно появившееся свойство element должно помочь.

картинка... да. её придётся wrap'ать, а дальше то же самое :
FIREFOX ONLY; При клике откроется пример на jsbin.

Тут уже намного сложнее.

Ну вот-с решение на SVG Mask (FIREFOX ONLY). Нажать - откроется пример.


PS Надеюсь, Вы не против того, что я использовал ваш аватар для теста :)

Исходник такой:

То, что ты показываешь совсем другое решение. Выше видно, что должно получиться.

VML же?

Угу. Как-то так :

Было :


Стало (клик-пример):


... для оперы ещё придётся ставить пару свойств для округления картинки, а исчезающий градиент в голове не появляется.

Угу, но тема про IE.

Это всё должно работать в IE7, IE8. Я уж молчу про то, что оно должно менять размеры и летать по экрану и не разваливаться на лету. Ну а так, да, че сложного?!

Ась?

Я не пробовал, но судя по документации это можно сделать в IE через VML. Рисуем прямоугольник нужных размеров со скругленными углами (roundrect
), а внутрь помещаем элемент fill с атрибутом src и type="tile". Так нарисуем верхнее изображение.
Нижнее изображение можно сделать фильтрами (если получится, должно), хотя на счет градиента не уверен. Смотря на каком фоне это всё должно летать.

я нижнее сделал тоже через roundrect, и повернул его с помощью BasicImage (aka FlipH) - уголки округляются самым простым образом так, через roundrect.

Как сделать градиент из "элемента" в "прозрачность", я знаю только в случае градиента с цветами. А тут - хз. Но должен быть способ.

Ну вот, работает.
Да никак походу.
Gozar, а можно же заюзать другую картинку внизу для осла? По-любому можно.

Ага типо того, пока о них не хочу писать, хочу что-то сделать для начала. что бы в пример можно было привести.

Ух ты, ух ты, ух ты, а что мы сделаем, босс?
© South Park

devote, хочу перенести htc в js файл. В инете чет инфы не нашел.
Песочница: http://learn.javascript.ru/play/rc5dBb
Тема: Прозрачный полифил атрибута placeholder
Мож че еще подскажешь )

danik.js,
для начала позволь задать вопрос... Накой черт тебе это надо? Поддержка ИЕ7? Уж давно пора сказать ИЕ7 бай.

мало IE7, можно и на IE8 забить

да чего уж там, и IE9 туда же

devote, для IE8 нужно.

HTC нужен был всегда для ИЕ7, так как в нем нету defineProperty, а в ИЕ8 он есть, зачем для ИЕ8 юзать HTC? Или я что-то упустил?

Мне не defineProperty нужен, а событие вставки узла в DOM:
http://blogs.developpeur.org/fremyco...xplorer-5.aspx

Дедули... даже не понимаю о чем вы говорите :D НТС ШМНТС

:lol:

ТЫ вон удивляешься, я когда дома был, матери на рабочем пк поставил ие9, так как только в 2014 году компания решила перейти с 8й на 9ю, а в начале года я ставил ие8, так как в начале года они перешли на 8, а в конце на 9. Понятно что это довольно узкий сектор но все же есть те кому это нужно. Конечно там еще те дибилы, говорят типо ставьте вин 9, но эти кретины даже не знают что на xp он не станет без танцев с бубном...

devote, ну так что? У тебя есть идеи?
Хочу избавиться от htc-файла. Мне нужно событие-аналог DOMNodeInserted в IE8. С htc-файлом все отлично работает. Но я хочу его запихать в скрипт как-нибудь. Неужели это невозможно?
Пробовал через data:uri - облом. Через mhtml - тоже облом. Пробовал через тег <object data="data:{uri}"> - после встраивания не работает. Вдобавок страшилку выдает чета там про activeX.

Пробовал <public:component id="cmp"> встраивать в html - не катит.

Мне бы мож подошел behavior: expression() - но оно не работает в IE8.

Кстати, посмотрел доки по HTC и понял: да ведь HTML5 Custom Components - это копирка с MS HTC :)
Все новое - хорошо забытое старое.