7 января 2012 г.

SPLIT в JavaScript а также в JScript и IE6-8

Оказывается в методе String.split(), реализованном в JavaScript (по сравнению с реализацией этого метода в JScript и в IE6-8) есть отличие, заключающееся в том, что если в качестве разделителя задать регулярное выражение и обрамить разделитель в скобки, то он добавится в качестве элемента в выходной массив:
Если separator является регулярным выражением со вложенными скобками, то каждый раз при совпадении separator все результаты захвата скобками, включаяundefined результаты, добавляются в выходной массив.

А для того, чтобы в JScript и Internet Explorer'ах разделители добавлялись в массив, можно переопределить метод String.prototype.split, который будет корректно работать везде (в соответствии со спецификацией ECMA-262 v3)

О том как это сделать можно прочитать тут -
http://blog.stevenlevithan.com/archives/cross-browser-split

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='';}
  });
 });
Кстати нативно поддерживается многими браузерами.

30 ноября 2011 г.

Превью пользовательских изображений на сайте.


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


27 ноября 2011 г.

25 ноября 2011 г.

Getting Autocomplete For CodeIgniter 2.0 with PHPStorm


Getting Autocomplete For CodeIgniter 2.0 with PHPStorm | Grafik Kaos
Статья о том, чтобы заставить PHPStorm использовать автодополнение кода для средств фреймворка CodeIgniter 2.x




16 ноября 2011 г.

HTML формы и опера

Обнаружил в Опере интересную особенность, при которой jquery serialize() не получала данных из формы:

- Между тегами<form> и </form>
не должно быть неполных или пересекающихся таблиц
- Между тегами <form> и </form>
не должно быть другой формы (что очень логично).


Для следующего, не очень валидного кода:
<form id="firstform">
    <input type="text" name="firstname" value="MyName" />
    <input type="text" name="lastname" value="LastName" />

    <form id="secondform">
        <input type="text" name="age" value="21">
    </form>

    <input type="text" name="gender" value="male">
</form>

результатом операции $('#firstform').serialize() будет:
firstname=MyName&lastname=LastName&age=21

Закрывающая форма #secondform будет являться завершающим тегом для #firstform и поле gender будет опущено.

Впрочем это особенность не только Оперы, а самого jquery и его механизма выполнения операции serialize()

15 ноября 2011 г.

Firebug - тонкая настройка

Долгое время я не мог понять, почему Firebug раскрывает обычные css свойства, например
"border: 1px solid black"
превращается в 29 вот таких строчек:

firebug


element.style {
    -moz-border-bottom-colors: none;
    -moz-border-image: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-bottom-color: black;
    border-bottom-style: solid;
    border-bottom-width: 1px;