Блог FX’а

Да, да, я знаю, что в наш век все уже давно перешли на использование utf-8 при построении веб-сайтов, но остались еще и такие, которые пользуються “допотопными”, “отстойными”, и вообще “не-тру” кодировками типа CP1251 (также известной как Windows-1251), KOI8-R и прочих.

Ни для кого ни секрет, что кодировкой получаемых через Ajax данных по-умолчанию принимается UTF-8. Не все знают, что это умолчание можно изменить, указав кодировку явно через заголовок “Content-Type: text/html; charset=cp1251″. Сегодня вот столкнулся с интересным багом, на который убил довольно много времени.

Сервер отдает некоторый текст по запросу (ajax) в кодировке CP1251, предварительно установив соответствующий заголовок - “Content-Type: text/html; charset=cp1251″. На клиенте использовалась библиотека jQuery:

$('#books').load('books.php', {action: 'list'});

Всё работало замечательно… До тех пор, пока я не открыл страничку в IE7. Как ни странно, но ничего не загрузилось. После длительных раздумий, установки alert-ов куда нужно, и куда нет код был заменен следующим кодом:

$.ajax({
  method: 'get',
  url: 'books.php',
  success: function(data) {
    $('#books').html(data);
  },
  error: function(xhr, textStatus, errorThrown) {
    alert(textStatus);
  },
  data: {action: 'list'}
});

В FF всё продолжало работать, а вот IE начал выдавать странную надпись “parsererror”. Гугление никаких результатов не дало - ни одного похожего случая… После, примерно, 10 минут попыток “запустить” страничку в IE, что-то меня дернуло посмотреть на серверный код. Глаза сразу упали на строку установки Content-Type-а. Недолго думая, я поставил charset=utf-8, и, о чудо, IE загрузил всё как положено (правда в неправильной кодировке, но всё же - уже плюс). Догадавшись в чем может быть дело, я установил кодировку в “windows-1251″, после чего всё заработало на ура.

Собственно, мораль сей басни такова - юзайте, люди, юникод, и будет вам счастье.

written by FX Poster \\ tags: Ajax, CP1251, jQuery

После релиза jQuery 1.2.6 долгое время раздел Release Notes пустовал. Сегодня вот заметил, что его наконец заполнили.

Из улучшений:

• Глобальное ускорение
  • работа с событиями ускорена более чем в два раза
  • селекторы ускорены на 13%
  • .offset() ускорен на 21%
  • работа с CSS (.css()) ускорена на четверть
• Кое-что улучшено, кое-что добавлено, вроде в API ничего не изменено

written by FX Poster \\ tags: JavaScript, jQuery

Как сообщает нам наш официальный источник - вышел первый релиз-кандидат jQuery UI - набора виджетов и визуальных эффектов для известного в узких кругах JS-фреймворка jQuery.

Как утверждает источник, RC1 довольно стабилен, а точнее - это самая стабильная версия из тех, которые вообще выпускались. :) Так что - спешите обновляться.

Ах да, чуть не забыл - в некоторых местах поменялось API (в draggable и resizable модулях так точно поменялось), так что будьте всё же осторожны и предусмотрительны.

written by FX Poster \\ tags: JavaScript, jQuery, jQuery UI

Авось, кто-то еще не догадался… :)

Самый простой способ использования своих скриптов совместно с Google AJAX Libraries API:

google.load("jquery", "1");

google.setOnLoadCallback(function() {
  $('<script type="text/javascript" src="_url_вашего_скрипта_"></script>').appendTo('head');
  $('<script type="text/javascript" src="_url_вашего_другого_скрипта_"></script>').appendTo('head');
  // ...
});

Аналогичным образом подключаются, например, плагины для jQuery.

written by FX Poster \\ tags: Ajax, Google, JavaScript, jQuery

Давно ничего не писал - как-то не о чем… Праздники, работа, учеба… Единственное, что реально интересно из этого списка - это работа, но… к сожалению, как раз она и “способствует” отсутствию статей в этом блоге - её много и на блог времени просто не остается… А написать, к счастью, есть о чем. :)

Сегодня речь пойдет о так называемых dialog widget’ах (периодически, слышу, что их также называют js-popup’ами). Недавно понадобилось реализовать такой функционал в моём “рабочем” проекте и стал вопрос об использовании существующих решений.

В проекте я использую jQuery и, соответственно, выбирал системку, которая базировалась бы на нем. Всё началось с Thickbox’а, который я довольно долгое время и использовал, но… Кое-что мне в нем не нравилось изначально:

• Минимум настроек
• Отличие от большинства плагинов jQuery
• Отсутствие развития (последняя версия вышла в августе 2007-го года и зависела еще от jQuery 1.1x, хотя и с 1.2 тоже работала нормально)

… в итоге эти недостатки привели ко вполне логичному концу - я не мог реализовать 2 разных “диалога” на одной странице не “вторгаясь” в сам код Thickbox’а, причем застрял на мелочи - удиалогов должны были различаться бэкграунды - у одного он должен был быть полностью залит определенным цветом, а второй должен был быть полупрозрачным. Причем в первом случае сделать фон непрозрачным мне пришлось через CSS, хотя гораздо логичнее было бы предоставить эту возможность самой функции создания диалога.

В общем, после недолгих поисков на свет был извлечен молодой, но очень быстро развивающийся
проект “окошек” на jQuery, о котором я сегодня и хочу рассказать - это nyroModal. Проекту еще нет и месяца, но основная функциональность там уже реализована (а как по мне - так больше и не нужно), и что самое главное - им очень удобно пользоваться.

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

Самый простой способ, при котором даже не нужно лезть в JavaScript - это присвоение ссылкам класса nyroModal:

<a href="demo.html" class="nyroModal">Ajax</a>

Эта ссылка откроет вам файл demo.html в “окошке”.

<a href="demo.html#demo" class="nyroModal">Ajax</a>

Эта - сделает почти то же самое, только в окошке будет только инфа из блока с id == “demo” из файла demo.html.

<a href="#demo" class="nyroModal">No Ajax!</a>

А здесь у нас в окно попадет содержимое блока с id == “demo” из текущей страницы.

Если же нужны какие-то дополнительные параметры (значения или callback-функции), то здесь уже без “ручного” JavaScript’а не обойтись:

<a href="#demo" id="no-ajax">No Ajax!</a>
<script type="text/javascript">
$('#no-ajax').nyroModal({
  bgColor: '#FFFFFF',
  showBackground: function(elts, settings, callback) {
    // elts.bg.css({opacity:0}).fadeTo(500, 0.75, callback);
    callback();
  },
  hideBackground: function(elts, settings, callback) {
    // elts.bg.fadeOut(300, callback);
    callback();
  }
})
</script>

Таким образом мы заменим цвет фона на белый + уберем прозрачность и анимацию при появлении/исчезновении фона.

На этом, наверное, будем прощаться. Если остались вопросы - обращайтесь. :)

written by FX Poster \\ tags: JavaScript, jQuery, nyroModal, Thickbox

IE6 очень плохо работает с изображениями в PNG-формате, которые имеют альфа-канал (проще говоря, прозрачность) - он просто не учитывается. Решить проблему довольно просто, самый удобный вариант - воспользоваться “библиотекой” jQuery.ifixpng, которая сделает всё за вас. Единственный недостаток (хотя, кому как) - зависимость от jQuery. Тем, кто пользуется другими библиотеками, в частности, PrototypeJS (а именно она по умолчанию используется в таких фреймворках как RubyOnRails и Symfony), воспользоваться этой “библиотекой” не получится. Именно для них я и попытался переписать эту библиотеку.

Prototype.Browser.Version = (navigator.userAgent.toLowerCase().match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [])[1];
Prototype.FixPNG = { Pixel: 'images/pixel.gif' };

Element.addMethods({
  fixpng: (Prototype.Browser.IE && Prototype.Browser.Version < 7) ? function(element) {
    function fixPosition(element) { if(element.style.position != 'absolute') element.style.position == 'relative'; }
    function filter(src) { return "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true,sizingMethod=crop,src='" + src + "')"; }
    var elementName = element.nodeName.toLowerCase();
    if(elementName == 'img' || elementName == 'input') {
      if(element.src && element.src.match(/.*\.png([?].*)?$/i)) {
        element.setStyle({
          filter: filter(element.src),
          width: element.getWidth(),
          height: element.getHeight()
        });
        element.src = Prototype.FixPNG.Pixel;
        fixPosition(element);
      }
    } else {
      var image = element.currentStyle.backgroundImage;
      if (image.match(/^url\(["']?(.*\.png([?].*)?)["']?\)$/i)) {
        element.setStyle({
          filter: filter(RegExp.$1),
          backgroundImage: "none"
        });
        element.children().each(fixPosition);
      }
    }
  } : function(element) {}
});

Зависимости:

• Библиотека PrototypeJS
• В директории images должен лежать “пустой” файл pixel.gif (его можно взять здесь, или, если вас не устраивает такое расположение файла - просто измените переменную Prototype.FixPNG.Pixel)

Пример использования:

Event.observe(window, 'load', function() {
  $$('.test, #test').each(function(element){ element.fixpng() });
}, false);

PS. Также советую почитать раздел Known Limitations на странице jQuery.ifixpng.

written by FX Poster \\ tags: JavaScript, jQuery, PrototypeJS