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

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

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

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

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

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

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

  • В контакте есть такая фича: прокручиваешь новости до конца страницы, после этого автоматически подгружаются другие новости. Это весьма удобно, не нужно организовывать сложную систему пагинации. Просто крутишь страницу. Сделать такое на 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++));
    	}
    });

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Обновилась одна из лучших отечественных 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 с умным поиском. На выходе получим нечто такое

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

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

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

    Приступим. 

  • jQuery Browser  В jQuery плагин $.browser устарел, и его удалили. Разработчикам советуют использовать для этих целей специальные инструменты типа Modernizr. Беда в том, что браузеров становится очень и очень много. Следить за всеми ними уже не так важно, новые версии jQuery не поддерживают ie6-7, что правильно. 

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

  • При написании одного парсера передо мной встала задача предоставить пользователю возможность самому выбирать ту часть страницы которую он хотел бы спрарсить. Сделать я это решил на базе WYSWYG редактора JWYSWYG, он очень легкий, кросбраузерный, написан на моем любимом JQuery и легко поддается модификации. Кроме того я встроил в него функцию автоперевода выделенного текста при помощи Google Tranlate Ajax API. От слов к делу. Оказалось что задача не настолько тривиальна как кажется с первого взгляда. Получить со страницы надо было именно кусок выделенного HTML а не тот текст, который собственно попадет в буфер обмена если нажать кнопку копирования.

    UPD. Судя по поисковым запросам, много людей ищут не теорию, а готовое решение на jQuery. Дабы не смущать Вас лишней информацией можете сразу пройти на страницу с готовым плагином на JQuery и пример его использования

  • Более удобный DateTimePicker разработка автора xdan.ru

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

    Вот так виджет Datepicker выглядит из под коробки в стандартном jQuery UI

    Стандартный Dateicker из jQuery UI

     Все лаконично и просто. Но есть один большой минус. В нем нет редактирования времени. Собственно потому виджет и называется DatePicker, аналогичный виджет со временем должен был бы называться DateTimePicker) К сожалению такого виджета в библиотеке нет. Для простоты Datepicker,TimePicker и dateTimePicker обычно обобщают в одно понятие DatePicker.

    К слову в html5 появились новые элементы ввода, в том числе Date и DateTime Picker'ы. Но мало того, что поддерживаются они не во всех браузерах, так еще и эта самая поддержка оставляет желать лучшего. Приведу пример, как выглядит html5 datepicker в разных браузерах

  • Как щавергить все ajax запросы к серверуКак завершить все ajax запросы на jquery. Вы я верен знаете, что все события в JavaScript происходят последовательно. То, что называется асинхронным ajax запросом, на самом деле ем что иное, как цепь последовательных событий. И так случается, то если запросы происходят к одному серверу, что пока не завершится один запрос, другой будет висеть в воздухе. В связи с этим возникла необходимость, обрубать все текущие ajax запросы, при инициализации нового. Как это сделать? 

  • В далеком 2006-м, Джон Резиг, создавая очередную JavaScript библиотеку jQuery, возможно и не предполагал, что она станет настолько популярна. Одной из ее "килл-фич" была система плагинов. Трюк, который прокатил с Мозилой и прокатывает с Хромом: делаем средний продукт, но с отличным API для создания расширений для него.

    Идея не нова, до этого в 2005-м, мир узнал Prototype Сэма Стефенсона. Параллельно с jQuery развивался Mootools  Валерио Проетти. К слову второй зародился, как плагин для первого.

    Да сам JavaScript со своим своеобразным ООП реализует наследование, по идеологии плагинов, а не родителей. Пишем класс, создаем его экземпляр, подключаем к prototype полю другого объекта, и вот оно - наследование. Второй объект использует все плюшки первого.

    Качественным отличием jQuery на этом фоне стало удобство. Сравните код создания расширения для Prototype, Mootools и jQuery (код для первых двух взят из Википедии).

    Prototype

    var FirstClass = Class.create( {
        initialize: function () {
            this.data = "Hello World";
        }
    });

     Mootools

    var Animal = new Class({
        initialize: function(name) {
            this.name = name;
        }
    });
     
    var Cat = new Class({
        Extends: Animal,
        talk: function() {
            return 'Meow!';
        }
    });

    Vanila JavaScript

    var a = function(){
    	this.hi = function( name ) {
    		alert('Hello World and '+name)
    	}
    }
    var b = function(){};
    b.prototype = new a;
    (new b).hi('Valeriy');

    И jQuery

    $.fn.hi = function( ){
     alert( this[0].tagName )
    }
    $('body').hi();// BODY

    Удобство наглядное и бесспорное. Первые два фреймворка заставляют окунуться в дебри ООП и требуют от программиста определенной квалификации. jQuery же "порог вхождения" понизила до уровня школьного Бейсика.

    Результат не заставил себя ждать. Плагины плодились тысячами. Их уровень варьировался от плохих до очень плохих. Все это дело оседало на plugins.jquery.com

    Залить туда плагин мог любой желающий. Никаких модераторов. Демократия. Стоит ли говорить, через ни так много времени сайт превратился в свалку. Мой первый плагин тоже там побывал. 

    У ребят из команды jQuery руки растут оттуда, откуда надо. Они эту лавочку прикрыли. Включили режим "Только чтение" и приступили к созданию нового ресурса.

    13 Декабря 2011 на свет появился новый сайт. С иной системой публикации. Плагины не заливаются непосредственно на ресурс. Делать на самом plugins.jquery.com вообще ничего не надо ( Вот это поворот=) ). Вместо этого дело сводится к колдовству с git репозиторием и его хостингом.