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

В очередной раз открыв код коллег и ужаснувшись, я решил написать эту статью. Надеюсь для кого-нибудь это будет полезным, заодно и мне будет проще новичкам объяснять что у них в коде не так, просто кинув ссылку на эту статью.
Безусловно количество таких вещей очень и очень велико, поэтому в статье ограничусь лишь некоторыми.

Ввиду недавнего обсуждения скорости работы jQuery.live и благоразумности писать свое собственное делегирование обработчиков событий, решил по полочкам разобрать работу jQuery.live. Т.е. целью данного топика поставлена задача выявления всех особенностей при использовании live-биндера и анализ кода. Без сравнительных характеристик, без приведения оптимальных методов делегирования.

Принцип работы live основан на делегировании обработчиков событий.

Делегирование — паттерн, в основе которого лежат 2 принципа javascript: всплытие событий (event bubbling stage) и возможность определения элемента, отследившего событие.

Тот факт, что делегирование отслеживает исключительно стадию всплытия события, объясняет невозможность обвешивания live-биндеров на события blur, focus, mouseenter, mouseleave, change и submit: все эти события не имеют стадий захвата и всплытия.

При разработаке одного проекта возникла проблема позиционирования дива посередине страницы независимо от ширины дива и от того, есть ли скролл на странице.
Если страница влезается на экран — можна делать через сss (position:absolute; left i top), но и тут надо учитывать в каждом варианте ширину дива.
Если же на странице появляется скроллинг — тогда есть некоторые проблемы.
Так как последним временем (и в том проекте тоже) пользуюсь Javascript-фреймворком jQuery — решил оформить в виде плагина.
Так появился плагин positioning.

Плагин имеет 2 методы:
positioning(leftOffset, topOffset, scroll) — позиционирует элемент на странице

leftOffset — сдвиг по горизонтале
topOffset — сдвиг по вертикали
scroll — параметр, который задает позиционирование относительно «абсолютной» верхней левой точки браузера, или позицинирование относительно верхней левой точки уже проскролленной страницы.

Вызов centering() — позиционирует элемент точно по центру страницы.

Плагін тестировал в FF 3.0, IE6.0+, Safari 3.1, Opera 9.6
Пример можно посмотреть здесь
yablog.org.ua/jquery/index.html
Внизу страницы есть 3 кнопки — кликая на них можно посмотреть плагин в действии

Несколько ранее я написал здесь статью о плагине positioning. Недавно возникла необходимость использовать некоторые другие функции.
Представляю вам улучшенную версию этого плагина:
— можно задавать сдвиг не только в пикселях, но и в процентах;
— в методе centering можно задавать центрирование только по горизонтали, только по вертикали, или одновременно и по горизонтали, и вертикали.

В плагине есть 2 метода
positioning(leftOffset, topOffset, scroll) — позиционирует элемент на странице

leftOffset — сдвиг по горизонтале
topOffset — сдвиг по вертикали
scroll — параметр, который задает позиционирование относительно «абсолютной» верхней левой точки браузера, или позицинирование относительно верхней левой точки уже проскролленной страницы.

centering(horisontalAlign, verticalAlign) — позиционирует элемент по центру страницы.

Пример можно посмотреть здесь
Внизу страницы есть 3 кнопки — кликая на них можно посмотреть плагин в действии

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

Перевод этой статьи

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

Недавно SamDark писал о правильных модальных окнах и представил сообществу плагин The Modal. Полностью согласен с его виденьем модальных окон, но в представленном плагине не хватало функционала. У меня уже давно из проекта в проект кочевали наработки по этой же теме, вот решил тоже оформить их в виде плагина.

Доброго времени суток, уважаемое Хабросообщество! Не пытаясь скрыть легкое волнение, публикую свой первый пост, темой которого стал мой скромный jQuery-велосипед для быстрого и безболезненного сбора данных, введенных пользователем на странице (сразу небольшая оговорка для тех, кто закричит — «ату его! Зачем еще один подобный плагин?», отвечу: во-первых — а быть может именно это кто-то из хаброчитателей и искал, во-вторых — для саморазвития, в-третьх: для собственного удобства и безболезненного использования в своих програмных продуктах).

Итак, помимо, собственно моего небольшого плагина, нам понадобится сам jQuery последней версии, а так же небольшой плагин к нему, реализующий преобразование объектов\массивов в json-строку, для того, чтобы полученные данные можно было быстренько передавать на сервер.
updated

updated 2 — добавлена мультизагрузка!

Все, кто пользуется веб-интерфейсом gmail, наверняка замечали, как гугл заботится о нас и не даёт закрыть страницу, если мы начали составлять письмо и не сохранили его в черновики. И понадобилось мне для своего проекта сделать нечто похожее.

Сперва сделал это используя window.onbeforeunload, но злая опера не поддерживает это событие.
Призадумался, попутно нашёл плагин для jquery под названием FormNavigate.

У многих из нас есть блоги, интернет-магазины, новостные сайты etc… Понятное дело стараемся опубликовывать оригинальный контент, но что же происходит после появления контента в интернетах, его конечно же просматривают и если он интересный, пользователи иногда обмениваются ссылкой на страничку с контентом. Новые переходы на нужную страницу и нам очень хорошо, а что если наш отличный текст просто взяли скопировали и скинули в аську\скайпик\почту — наш текст ушел, а перехода нету :(.



Запретить копирование, это очень неправильно, весело и смешно ©, но мы ведь можем при копировании добавить в буфер обмена ссылку на наш сайтик. Рассмотрим как же нам это лучше сделать:

Стояла задача динамического визуального отображения реакции на действия пользователя со стороны системы.
Другими словами: изменилось какое-то состояние объекта — вывести сообщения об удачном завершении сохранения изменения в базе/системе.
Написание плагина не заставило себя ждать...
 

Почти месяц назад вышла вторая версия прекрасного и замечательного jQuery Notification plugin для вывода самых разнообразных уведомлений на сайте, странно что Хабр вообще обошёл его стороной, исправлю ситуацию.

Прочитав этот топик и запись в блоге, на которой он основан, я подумал в очередной раз о том, как же любят «специалисты по веб-дизайну» (это камень в сторону автора записи в блоге, но не только — всем известны и другие любители этого) выдавать давно известные тезисы за откровение и яро их пропагандировать. Не слишком заботясь о логике того, как эти тезисы переносятся на веб-дизайн и дизайн вообще, и что они изначально значат.

Давайте разберемся, в чем тут реальная проблема.

Перевод статьи The MediaWiki parser, uncovered.

Актуальность перевода статьи 2009 года в том, что, во-первых, костяк парсера с тех пор существенно не поменялся, и во-вторых, с ним приходится ежедневно сталкиваться тем, кто пишет расширения для Mediawiki, на котором крутятся их корпоративные сайты.

Парсер Mediawiki — фундаментальная часть кода движка Mediawiki. Без него вы бы не смогли вставлять в свои статьи Википедии различные метки: секции, ссылки или картинки. Вы даже не смогли бы увидеть или быстро изменить разметку других статей. Вики-разметка достаточно гибка, чтобы дать возможность одинаково легко писать статьи как новичкам, так и HTML-экспертам. Из-за этого код парсера несколько сложноват, и с годами проходил через множество попыток его улучшить. Тем не менее, даже сегодня он все еще достаточно быстро работает для Википедии, одного из самых больших веб-сайтов в мире. Давайте взглянем на внутренности этого ценного (но чуть-чуть заумного) куска кода.

Польза, которую человек приносит обществу, с одной стороны, крайне субъективна, с другой — по ней оценивается зарплата, вклад в историю, авторитет и многие другие «аспекты» жизни человека. Причём, конечность времени жизни заставляет нас за то же время делать больше или делать то же за меньшее время. Переходя от философии к практике, я хочу представить несколько идей, которые я попробовал, и которые помогли мне повысить свою продуктивность.

Данные идеи я применял как веб-разработчик, но некоторые из них будут полезны и в других областях — дизайне, работе с данными и т.д.

Здравствуйте, Уважаемое Хабрасообщество.

Тема фильтрации RSS потоков с помощью Yahoo!Pipes уже освещалась (Например вот), но хотелось бы показать более простой и доступный для простых смертных способ.

Итак, буквально неделю назад все посты на Хабре имели вид habrahabr.ru/blogs/Название_блога/Номер_поста. По наличию в теле ссылки названия блога можно было легко очистить ленту от неинтересных записей просто отфильтровывая ненужные блоги по ссылке


Сейчас же, после весеннего обновления, ссылки на посты теперь имеют вид habrahabr.ru/post/Номер_поста/. Пост теперь может быть не в одном хабе а сразу в 3-х. Что ж, это очень интересный подход, однако наша задача научится фильтровать неинтересные хабы.

Вот смотрю как товарищ grokru выложил свое творчество и прямо вдохновляюсь. И поскольку мне было скучно, я решил тоже вспомнить былое и наштампить иконок. Заняло все это порядка 18-20 минут.



Попробовал себя в народном творчестве так сказать. Может совместно создадим habrapack?

Архив с .PSD и .PNG

Привет уважаемое хабрасообщество, этот пост служит продолжением еще недавно активно обсуждаемой темы о социальных иконках [1] [2]. Мысль, которая пришла ко мне в голову после прочтения этих статей, привела к появлению нового вектора развития этой темы. Кстати о векторе, например бывает так, что дизайн разрабатываемого сайта или приложения имеет свою специфику и интегрировать стандартные иконки социальных сервисов без адаптации не представляется возможным. В таком случае мы берем в руки гугл и принимаемся за поиск нужных логотипов, для того чтобы создать подходящий набор иконок. Ах да я немного отвлекся, продолжим о векторе, чтобы не проделывать такие скучные действия, я собрал воедино несколько популярных иконок в векторе и теперь каждый желающий может сэкономить немного времени воспользовавшись им.

Американский веб-разработчик Мэтт Даймонд (Matt Diamond) написал библиотеку JavaScript под названием FuckItJS. Если вставить в код метод FuckIt, то он заставит исполняться самый плохой скрипт, «нравится это компилятору или нет».

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

Несколько дней назад я предложил позадавать на Хабре интересующие вопросы по Canvas. Под Хабракатом — ответы на 27 вопросов.