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

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

Загрузочная флешка - Windows XP, Windows 7, Ubuntu.

Приобрёл я себе флешку Corsair Voyager на 16Gb, а свою старую A-Data 16Gb решил сделать загрузочной, реанимационной и восстановительной.

CSS Хаки для IE и других браузеров.

Сюда буду заносить всякие CSS хаки для различных браузеров:
http://www.quirksmode.org/css/contents.html
http://www.webdevout.net/css-hacks
http://dimox.name/personal_css_hacks_for_opera_firefox_ie/

http://www.brunildo.org/test/csshacks3.html

http://habrahabr.ru/blogs/css/125396/
http://habrahabr.ru/blogs/css/62002/

http://centricle.com/ref/css/filters/

Getting Autocomplete For CodeIgniter 2.0 with PHPStorm

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

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()

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

Долгое время я не мог понять, почему Firebug раскрывает обычные css свойства, например

"border: 1px solid black"

превращается в 29 вот таких строчек:

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;

Изменение размеров jqGrid'ов при изменении размеров окна браузера

При создании jqGrid, таблица будет сохранять свой изначальный размер при изменении ширины окна браузера.

Чтобы сделать так, чтобы ширина таблицы динамически изменялась при ресайзе браузера, необходимо добавить следующее событие:

$(window).bind('resize', function() {
    if (grid = $('.ui-jqgrid-btable:visible')) {
        grid.each(function(index) {
            gridId = $(this).attr('id');
            gridParentWidth = $('#gbox_' + gridId).parent().width();
            $('#' + gridId).setGridWidth(gridParentWidth - 20);
        });
    }
}).trigger('resize');

В результате чего при событии resize, вызванным изменением размеров окна браузера, ширина таблицы будет зависеть от новой ширины родительского контейнера (и минус 20 пикселей :) ).

Code Igniter сжатие прозрачных png средствами фреймворка.

При использовании php библиотеки GD для сжатия изображений, библиотека работы с изображениями Image_lib, входящая в состав фреймворка Code-igniter при сжатии прозрачных PNG по-умолчанию делает прозрачный фон черным для GIF и PNG файлов, что не очень красиво.

Данное решение позволяет сохранять прозрачность при сжатии изображений:

В system/libraries/Image_lib.php, после строчки

$dst_img = $create($this->width, $this->height);

добавить следующий текст:

// keeping transparency
$transparent_index = imagecolortransparent($src_img);
if ($transparent_index >= 0) {
      imagepalettecopy($src_img, $dst_img);
      imagefill($dst_img, 0, 0, $transparent_index);
      imagecolortransparent($dst_img, $transparent_index);
      imagetruecolortopalette($dst_img, true, 256);
}
elseif ($this->image_type == 3) {
      imagealphablending($dst_img, false);
      $transparent_index = imagecolorallocatealpha($src_img, 0, 0, 0, 127);
      imagefill($dst_img, 0, 0, $transparent_index);
      imagesavealpha($dst_img, true);
}

Недостатком такого решения является то, что изменяется системная библиотека в system/ , а при "обновлении" проекта, изменения могут затеряться.