• Arctext.js - Искривления текста с CSS3 и JQuery

    При помощи CSS3 Вы можете вращать вокруг своей оси отдельные буквы, однако довольно сложно будет выстроить каждую букву по некой криволинейной траектории. Arctext.js является JQuery плагином, который делает именно это. Основанный на Lettering.js, он вычисляет угол вращения каждой буквы и распределяет буквы одинаково по всей мнимой дуге заданного радиуса.

    Arctext.js - искривления текста с CSS3 и JQuery

  • audio player на сайте

    Как добавить mp3 плеер на свой сайт? Чтобы был, как можно проще, но при этом максимально кастомизировался. Умел проигрывать всякие audio форматы (mp3,wma и т.д.).

    Очень просто! Представляю  Вам замечательный аудио и видео проигрыватель jplayer

    Проигрывать на сайт

    На сайте разработчика есть множество демо. Если кратко, то плеер умеет практически все. Проигрывать музыку и видео, поддерживает плейлисты, кастомные скины, свои элементы управления. Работает сие чудо на flash, но если браузер "в порядке" и умеет воспроизводить нужный формат из под коробки, то используется только браузер (html5). К примеру Опера не умеет проигрывать mp3, а вебкиты умеют. Полное описание поддерживаемых браузером фич есть в их руководстве

  • fancybox с яндекс картой

    Не нашел в сети решение данной проблемы поэтому решил разобраться сам. Если в для API v1.x есть достойное решение с использованием метода redraw, то в API версии 2.0 такого метода нет.

  • javascript определить что скролинг элемента закончен

    В контакте есть такая фича: прокручиваешь новости до конца страницы, после этого автоматически подгружаются другие новости. Это весьма удобно, не нужно организовывать сложную систему пагинации. Просто крутишь страницу. Сделать такое на jquery не составит труда. Для этого используем событие scroll. Создадим элемент.

    <div id="mynews" style="height:100px;overflow-y:scroll;"></div>

    к нему прицепляем обработчик события

    var page = 1;
    $('#mynews').scroll(function() {
    	if( $(this).height() + $(this).scrollTop() >= this.scrollHeight ) {
    		$('#mynews').append($.get('news.php?page='+page++));
    	}
    });

    а вот и демонстрация работы:

    В челябинске упал астероид

    Невероятно но факт в челябинске упал астероид

    Лада выпустила электрокар

    Невероятно но факт Лада выпустила электрокар

    Харламов встречается с Асмус

    Невероятно но факт Харламов встречается с Асмус

    Зеленое ведро зеленее черного ведра

    Невероятно но факт в Зеленое ведро зеленее черного ведра

    Эффект плацебо победил рак

    Невероятно но факт Эффект плацебо победил рак. С животным все в порядке.

  • JQLite альтернатива jQuery для мобильных устройств

    jquery liteУ Web-программистов сложилась добрая традиция - в любую даже самую простейшую страницу по дефолту  подключать jquery. Я ничего не имею против этой библиотеки. Она шикарна. Она лучшая в своем роде, и продвинула и продвигает современный web далеко вперед. Повсеместный переход сайтов на ajax также связываю с этой библиотекой.

    Однако тут есть одно НО. В простейших проектах: небольшая анимация, баннеры, или любую другую логику, где не требуется работа с DOM или ajax, надобность в лишних 90кб скриптов отпадает. Особенно критично это для мобильных устройств. И дело не столько в лишних килобайтах, а в том, что такие скрипты напрасно грузят и без того занятый процессор.

    Сперва я хотел написать все на vanila.js, но кросплатфоменность в среде мобильных приложений та еще головная боль, поэтому решено было выбрать легковесный аналог jquery - jQLite.

  • jquery parent parents и closest или как получить предка по его номеру

    Доброго дня. Небольшая заметка о том, как можно получить родителя элемента по его порядковому номеру в дереве родителей.

    В jquery есть несколько способов получения родителей элементов :parent, parents, closest

    parent- возвращает прямого родителя, это один элемент, как параметр может получать селектор. Тогда метод возвращает родителя только если родительский селектор совпадает с тем, что подается в качестве параметра.

  • jQuery плагин получить значения поля по умолчанию

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

    Пометить поле, как измененное можно и другими способами. Можно при загрузке страницы запомнить в массив значения всех полей, а при отправке сравнивать с текущими. Этот способ самый надежный, но и при этом самый прожорливый и им редко когда пользуются. 

    Второй способ, это повесить на поле ввода обработчики событий change, keyup, mouseup, в которых добавлять к полю некий атрибут, который будет говорить о его изменении. В коде это будет выглядеть как-то так

  • onDomReady без jQuery

    Выдернул из jQuery реализацию обработчика события onDomReady. Для тех, кто не в курсе поясню, что это событие возникает, после того как весь html код страницы будет загружен браузером, но в отличие от  window.load, срабатывает раньше того, как будут загружены все стили, скрипты, картинки и т.д. Т.е. если в своем JS вам надо провести какие-то манипуляции с DOM на странице до ее показа, то вам нужен именно этот метод. Вы, конечно, можете подключать jQuery целиком, и тогда в вашем распоряжении будет этот метод. К примеру при подключенном jQuery установить событие можно так

  • Вышла новая версия CMS Danneo v.0.5.4

    Обновилась одна из лучших отечественных CMS Danneo. Система выложена на официальном сайте 23 марта 2011, так что пишу статью с большим опозданием, но так как толковых описаний изменений в новой версии не нашел, то сделаю это сам.

    Danneo обновила не мажорную цифру, и даже не минорную. Система обновилась до версии 0.5.4.  Последняя вышедшая версия была 0.5.3 

    Процесс установки не претерпел никаких изменений. Все по старому, в самом конце по прежнему надо вручную удалить папку setup. Однако, приятные сюрпризы начинаются сразу после установки. Первое, что мне бросилось в глаза это две предустановленных шкурки Soft и Clear. Скинов Original и Begin остались в старой версии, но для тех кто не любит старину разработчики обещали портировать на новую версию и их. 

    Что нового в Danneo 0.5.4? Изменений в системе достаточно. Среди них

    1. SEO-инструменты для продвижения сайтов:

    • Проверка пузомерок сайта (домена), таких как - PR, ТИЦ и alexa Rank.
    • Проверка позиции в выдаче в популярных поисковиках (яндекс, google, yahoo) по ключевым словам
    • Проверка обратных ссылок.
    • Полностью настраиваемая карта сайта - Google Site-Map.
    • Настраиваемые социальные закладки.
    • Внутренняя перелинковка страниц по ключевым словам, для улучшения внутреннего ссылочного ранжирования сайта.

    2. Свои meta-заголовки для отдельных страниц, и категорий (Очень ожидаемое нововведение для seo-шников)

    3. Добавлена возможность использования в ЧПУ, дефисов и знаков подчеркивания при разделении слов "-" (slovo-slovo-slovo).

    4. Возможность добавления неограниченного количества тегов, к новостям.

    5. Добавление неограниченного количества изображений к страницам.

    6. Создание групп пользователей, ассоциируются с группами форума, при интеграции.

    7. Выпадающее меню, настраиваемое в панели управления (надо сказать, что не очень удобна реализация в админ-панели).

    8. «Хлебные крошки», теперь можно выносить в шапку сайта. Это значит, что теперь место непосредственного вывода надо использовать $siteglobal['insert']['breadcrumb']

    9. Модная нынче тенденция: для управления системой и создания эффектов, используется библиотека jQuery. Это в свою очередь значит, что мы можем использовать любые анимационные плагины этой библиотеки и не только их. Благодаря этой библиотеке интерфейс административной части заметно оживился. В встроенном файл браузере повсеместно используется AJAX.

    10. Для повышения читабельности и соответствии стандартам оформления, переписан весь код PHP. Первое, что замечаешь это PhpDoc комментарии в файлах модулей. А еще в административной части все print заменены на более быстрые echo.

    11. 2 скина Soft и Clear заменили стандартные Original и Begin.

    12. Устранены ошибки связанные с включенным режимом экранирования кавычек. Теперь редактирование Настроек не вызывает массу негативных эмоций.

    13. Каждый блок имеет свои настройки.Так же долгожданное нововведение. Отсюда новое правило написания блоков. 

    Расскажу подробнее о некоторых пунктах

  • Делаем красивый combobox с умным поиском на jQuery

    Сегодня сделаем функциональный combobox с умным поиском. На выходе получим нечто такое

    Умный combobox делаем на jquery

    Одной из главных фич, будет то, что поиск будет вестись не исключением, а сортировкой. При этом, сортировать будем по умному, а не простым сравнением. 

    Обычно, при создании подобных плагинов, делают проверку на совпадение подстрок и тогда возвращают результат. У нас будет плагин, который на слово kazam, вернет в первой строчке KAZAN. 

    Приступим.