No public Twitter messages.


Этот блог устарел и, скорее всего, больше не будет обновляться. В ближайшем будущем он переедет сюда.
9 ноября 2012 // Веб-разработка

Динамическое изменение CSS-expression через JS

Привет.

Всем давно известно, что IE до 7 версии не поддердживал CSS-свойство position: fixed; и всем также давно известно, как осуществляется совместимость — через JS внутри CSS-expression: position: absolute; top: expression(document.getElementsByTagName("body")[0].scrollTop + "px");. Казалось бы, что сейчас такие дремучие версии IE уже никому не нужны, однако, как опять же всем давно известно, существует и некий Quirks Mode, который используют некоторые крупные сервисы (Amazon, например) и при создании браузерных плагинов, которые вставляют свой код в страницу, приходится учитывать. А поскольку взаимодействие с сайтом происходит через JS, то и применять CSS-свойства приходится динамически.

Итак, столкнулся я со следующей проблемой: IE не хочет корректно обрабатывать

  1. строку с CSS-expression отправленную в св-во так:
    obj.style.top = 'expression(document.getElementsByTagName("body")[0].scrollTop + "px")';
  2. так (хотя здесь проблема в ином, IE просто не применяет ничего аттрибуту style через setAttribute):
    obj.setAttribute('style', 'top: expression(document.getElementsByTagName("body")[0].scrollTop + "px")');
  3. так:
    obj.cssText = 'top: expression(document.getElementsByTagName("body")[0].scrollTop + "px");';
  4. и даже так:
    obj.className = 'pew';
    $("<style>.pew{top: expression(document.getElementsByTagName("body")[0].scrollTop + "px";}</style>").prependTo('body');

Но потом наткнулся на гайд по экспрешнам в MSDN и нашёл там решение:

Для работы с CSS-expression у IE в объекте style есть три метода (+1 для document):

  1. setExpression(property, "expression"); — присваивание экспрешна (условие пишется в кавычках);
  2. getExpression(property); — получение строки с экспрешном;
  3. removeExpression(property); — удаление экспрешна;
  4. document.recalc(true); — перерасчёт всех динамических CSS-значений текущего документа.

Таким образом спасла меня строка obj.setExpression('top', 'document.getElementsByTagName("body")[0].scrollTop + "px"');. Пользуйтесь.

теги: , , , , , ,

комментарии отключены.


8 августа 2011 // Веб-разработка

Функции для работы с Cookie на javascript

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

function getCookie( name ) {
var start = document.cookie.indexOf( name + "=" );
var len = start + name.length + 1;
if ( ( !start ) && ( name != document.cookie.substring( 0, name.length ) ) ) {
return null;
}
if ( start == -1 ) return null;
var end = document.cookie.indexOf( ';', len );
if ( end == -1 ) end = document.cookie.length;
return unescape( document.cookie.substring( len, end ) );
}

function setCookie( name, value, expires, path, domain, secure ) {
var today = new Date();
today.setTime( today.getTime() );
if ( expires ) {
expires = expires * 1000 * 60 * 60 * 24;
}
var expires_date = new Date( today.getTime() + (expires) );
document.cookie = name+'='+escape( value ) +
( ( expires ) ? ';expires='+expires_date.toGMTString() : '' ) + //expires.toGMTString()
( ( path ) ? ';path=' + path : '' ) +
( ( domain ) ? ';domain=' + domain : '' ) +
( ( secure ) ? ';secure' : '' );
}

function deleteCookie( name, path, domain ) {
if ( getCookie( name ) ) document.cookie = name + '=' +
( ( path ) ? ';path=' + path : '') +
( ( domain ) ? ';domain=' + domain : '' ) +
';expires=Thu, 01-Jan-1970 00:00:01 GMT';
}

теги: ,

1 комментарий.


1 августа 2011 // Веб-разработка

Клонирование объекта в javascript

Разрабатываю тут на работе шаблонизатор (эпопея, реально) на js и в одной из рекурсий столкнулся с проблемой — создаваемый объект не является совершенно новым, а лишь является ссылкой оригинального, что приводило к некоторым косякам.

var obj = { a: 1 };
var obj1 = obj;
obj1.a = 0; // при этом obj.a также становится равным 0.

Соответственно потребовалось нечто, что смогло бы создавать копию объекта без ссылки на оригинальный. После недолгого поиска было найдено решение — волшебная функция uneval (обратное от функции eval). Выглядит оно потрясающе элегантно:

function clone(o) {
return eval(uneval(o));
}

Радость была бы абсолютной не узнай я, что функция uneval не работает не только в IE, но и в Опере, и даже в WebKit. Печаль была безгранична. В замен этому решению было придумано собственное, не сильно сложнее:

function clone(o) {
var obj = {};
for(var i in o){
obj[i] = o[i];
}
return obj;
}

Очевидно — немного криво, поскольку не учитывается тип входящего объекта (вдруг это массив или строка?). Протестил и опечалился, в рекурсии оно почему-то опять портит воздух. Даже после всего этого я не стал унывать и спустя выходные решение нашлось внезапно в начале рабочего дня:

function clone(o) {
return eval("("+JSON.stringify(o)+")");
}

Честно говоря плохо понимаю, что это за глобальный объект JSON и откуда он взялся (вероятно какая-то дыра в моём убогом самообразовании), но его замечательный метод stringify выполняет примерно то же, что и print_r в php. При этом этот способ вполне кроссбраузерен — протестил в IE9, FF5, Opera 11 и Chrome 11 (более ранние версии проверять лень). Придётся убить заготовку поста про мой самописный скрипт print_r для js.

P.S. Коллега подсказал функцию которую он использовал сам (с учётом всякого), может пригодиться:

function clone(obj)
{
if(obj == null || typeof(obj) != 'object')
{
return obj;
}
var temp = {};
for(var key in obj)
{
temp[key] = clone(obj[key]);
}
return temp;
}

теги: , , , , ,

5 комментариев.



  • twitter
  • rss
  • хабр
  • жежека
  • ластфм