28 декабря 2011 г.

Бешенный скролл jCarousel Lite.

Есть такая очень удобная js библиотека 
jCarousel Lite, которая позволяет очень просто делать анимации и карусели. И вот после очередного обновления сервера карусель начала бешено двигаться то вперёд, то назад.

А дело заключалось в том, что случайно в шапке сайта два раза подгружался скрипт инициализации и в том числе инициализации карусели. И таким образом заместо одной карусели появляется две - и обе листают практически одинаково и незаметно что их две. Но стоит переключиться на другую вкладку в браузере или свернуть - как карусель бешено крутится.
Отпишусь создателю библиотеки об этом issue.

14 декабря 2011 г.

Ширина макета с фиксированным контентом

Если макет веб-страницы фиксирован и должен корректно вписываться по ширине в окно браузера при разрешении 1024x768, то максимальная ширина для wrapper'а (или обёртки контента) должна быть 996px или меньше. При указании ширины больше этого числа (1000px например) в некоторых недобраузерах появляется горизонтальный скролл.

Пример макета - http://dl.dropbox.com/u/1218489/web/markup_996.html

5 декабря 2011 г.

Javascript — полезняшки и хелперы

1. jQuery фильтр :random для получения случайного элемента из набора: (взять отсюда)

jQuery.jQueryRandom = 0;
jQuery.extend(jQuery.expr[":"],
{
    random: function(a, i, m, r) {
        if (i == 0) {
            jQuery.jQueryRandom = Math.floor(Math.random() * r.length);
        };
        return i == jQuery.jQueryRandom;
    }
});

2. Работа с датами на javascript. Класс Date можно расширить замечательным свойством .format(...), которое позволит получать дату в нужном формате.

var now = new Date();

now.format("mm.dd.yyyy");
// Возвращает, например, "06.09.2010"

// Можно использовать как отдельную функцию
dateFormat(now, "dddd, mmmm dS, yyyy, h:MM:ss TT");
// Saturday, June 9th, 2007, 5:46:21 PM

// Или можно использовать некоторые заранее определённые
// маски, или определить свою маску.
now.format("isoDateTime");
// 2007-06-09T17:46:21

// Функция без аргументов возвращает текущую дату с дефолтной маской
dateFormat();
// Sat Jun 09 2007 17:46:22
Скачать и посмотреть примеры использования можно тут

3. Правильный typeof - возвращает тип JS объекта

Object.prototype.toType = function() {
  return Object.prototype.toString.call(this).slice(8, -1).toLowerCase();
}

Пример использования: http://jsfiddle.net/nerevar/sfq4L/
.....

4. Placeholder - подсказка в текстовом поле, которая пропадает при переходе в это поле, реализуется следующим скриптом:

 $('input[placeholder], textarea[placeholder]').each(function(){
  var $input = $(this);
  var value = $input.attr('placeholder');
  $input.removeAttr('placeholder').val(value);
  $input.bind({
   blur: function() {if (this.value=='') this.value=value;},
   focus: function() {if (this.value==value) this.value='';}
  });
 });
Кстати нативно поддерживается многими браузерами.