Работая с jQuery многие рано или поздно сталкиваются с одной особенностью: когда мы хотим показать с анимацией скрытый блок, его появление может быть дерганым. Происходит это не всегда, но довольно часто. К сожалению не все разработчики знают как с этим бороться, а те кто знают, зачастую ленятся. Явный пример дерганного появления блока, можно посмотреть прямо на главной странице jQuery, нажав на кнопку Run Code:

Совсем недавно во время работы над очередным проектом мне понадобился простенький редактор bb кодов.
Немного подумав и поискав по гуглу, я написал свой, наверное проще уже некуда… Редактор требует для работы подключенной библиотеки Jquery.
Публикую его здесь, может кому нибудь пригодится.

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

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

Управление временем является одним из самых важных навыков, которому фрилансер может учиться. С хорошей системой управления временем вы можете найти время, чтобы сделать все те вещи, которые важны для вас, и в профессиональном и в личном плане.

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

Данная статья содержит 16 советов, которые помогут вам лучше распорядиться своим временем и найти время для нужд личного характера. Также представлены несколько других ресурсов, которые улучшат ваши навыки управления временем.

Если Вы работали над оптимизацией загрузки страницы, Вы знаете, насколько дорогостоящая каждая загрузка ресурса. Чем больше число внешних ресурсов, к которым Вы обращаетесь, тем больше время требуется для загрузки страницы.
Как правило, веб-страницы обращаются ко многим внешним CSS и файлам JS и следовательно подвергаются многим загрузкам ресурса. Совет от гуру оптимизации в необходимости объединить все файлы CSS и все до одного файлы JS, чтобы уменьшить число ресурсов до двух. Это, без сомнения, поможет сократить время загрузки страницы.
Если Вы все же считаете что эти две загрузки не являются лучшим решениям, я с Вами соглашусь. В этой статье мы рассмотрим способ объединения CSS с JS и сведем количество загрузок к одной. Я обнаружил этот способ, отчаянно пытаясь оптимизировать страницы в Microsoft Office Live

jQuery Tools v1.0.1 — это инструмент/библиотека представляет собой файл весом в 5,8 кб включающий в себя наиболее важные компоненты для вебдванольных сайтов, а именно: табы, всплывающие подсказки, плавные переходы, прокрутки, всплывающие окна и т.д.

Не буду тянуть резину, лучше, как говориться, один раз увидеть, чем сто раз услышать!
Переходим по ссылке и смотрим более 50 (!) демок:

Несколько понравившихся мне демонстраций. Очень рекомендую!
Маскируем фоновое изображение;
AJAX-табы с поддержкой истории переходов;
Неколько всплывающих окошек на одной странице.

Наверное много кто знает что в jQuery есть набор стандартных событий, таких как Click или MouseDown и прочие, на которые можно повесить обработчики или возбудить с помошью функций click() mousedown() и прочих. Чуть поменьше людей знают, что те-же самые действия можно сделать с помощью функций bind() и trigger():

$(document).bind('click', function(){
  alert('It works!');
});

$(document).trigger('click');

* This source code was highlighted with Source Code Highlighter.

И наверное мало кто знает, что в функциях bind() и trigger() можно использовать свои собственные события. Зачем это нужно, я и хочу рассказать на примере.

По мотивам этого перевода.

На одном из текущих проектов мы хотели добавить эффект на иконки меню — приподнимание в момент наведения мышкой. Я поэкспериментировал, используя встроенный в jquery эффект animate, на иконках двух типов: с отражениями и с тенями.



Смотрим демо

В продолжение моего wordpress-творчества представляю новую тему — Constructor.

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

Так как хабрасообщество заинтересовалось вставлянием твиттера куда угодно, хочу предложить еще более гибкий и универсальный способ. Конечно, для форумов и last.fm :) он не подойдет, но зато для блогов и персональных страничек — самое оно.
Итак, tweet.seaofclouds.com — плагин для jQuery, который выводит любое количество любой учетной записи твиттера в любом виде.

Возможности:

* маленький размер, быстрая скорость загрузки
* совершенно не препятствует скорости загрузки страницы
* можно отобразить даже 100 твиттов, т.к. используется twitter search api
* аватарки есть, да
* можно даже выводить твитты с нескольких учетных записей
* автоматически подставляются ссылки типа @replies to users’ twitter page
* кликабельные URLы тоже автоматически
* кликабельные теги #hashtags
* полный контроль над визуальной составляющей с помощью css

Пример можно посмотреть на странице разработчиков или у меня в блоге.

Последнее время мне всё чаще задают вопрос как выбрать тот или иной элемент в DOM'е, и данный пост будет сплошь посвящен селекторам в jQuery, возможно большинство из них Вы видели в различных источниках, но собрать их воедино все же стоит…

Иногда, крайне редко нужно скрыть, либо показать часть тегов в том случае если javascript включён, либо выключен.
Конечно, есть <noscript> но он реализует только часть логики — он скрывает часть кода если javascript включён. Скрыть часть кода, если javascript выключен стандартной возможности нет.
Точнее есть возможность добавить некий код при помощи скрипта, но не совсем то.

Частенько мне приходится слышать вопросы на тему рисования иконок. Методик их рисования большое множество. Кто-то рисует ручкой на стикере, а потом сканит и шопит. Кто-то пользуется Пэйнтером и планшетом, кто-то обходится исключительно вектором, а кто-то исключительно Фотошопом… Я привык рисовать иконки мышкой в Фотошопе, а планшет при этом выполняет чисто декоративную функцию на моем рабочем столе. Итак, веселый зоопарк.

Пошаговая инструкция:

Наверное каждый верстальщик, хотя бы раз в жизни сталкивался с версткой двух- или трех-колоночного макета. Хотя, сам макет сверстать несложно, если конечно колонки не различаются цветом фона, как например на хабре. А вот с разноцветными придется помучаться, потому что они имеют свойство тянуться по содержимому, а содержимое у соседних колонок, как правило, разной высоты.

Мне известны два способа решения этой проблемы:

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

Оба способа имеют свои достоинства и недостатки, но сегодня я хочу рассказать выравнивании колонок с помощью плагина к JQuery — Flexify.

Если элементы списка отобразить как inline – между ними появляются ненужные отступы.
Далее о том, откуда они берутся, и как это исправить.

1. Броузер рендерит не тот код который вы пишете, а тот, который получится в результате валидации вашего.
2. В каком-то доисторическом стандарте (html 3.2 кажется) было сказано, что тег LI закрывать не обязательно.

IE чтоб ему было удобнее рендерить приводит и закрытые и не закрытые теги LI к одному варианту, конечно же к не закрытому. (А что вы от него ждёте?) После закрывающего тега LI идёт перевод строки, он идентичен пробелу. Этот пробел и добавляется к тексту внутри LI. В нормальных броузерах этот пробел становится между тегами.

Проверить можно тут.

Наверное, многие, при html-верстке, встречали «баг», когда, размещая в блоке подряд два изображения, между ними возникает промежуток, примерно в 3-5 пикселей. Этот эффект присутствует не только в горячо любимом IE6, но и в других браузерах. Большинство решали это с бубнами – подменой Doctype, убиранием лишних отступов в html-файле и так далее.

Начав искать решение проблемы в интернете, в том числе и на хабре, я понял, что вопросов по этому поводу много, но правильного ответа большинство так и не нашли. В итоге выяснилось, что это вовсе не баг. IMG – внутристрочный элемент, и поэтому к нему применяется свойство vertical-align. В браузерах это свойство задается по умолчанию (в большинстве baseline, если не ошибаюсь).

Достаточно к изображению применить vertical-align:bottom и отступа внизу не будет. В других случаях будет неоднозначность, и браузеры будут вести себя на свое усмотрение.

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

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

Добрый вечер. Я очень люблю музыку. Раньше я пользовался Винапом и был счастлив. Но с развитием интернета, скоростей передачи данных и различных аудио-хостингов стационарная музыка на жестких дисках начала уступать место музыке в веб-формате.
Последнее время я слушаю музыку исключительно из поиска Вконтакте. Найду все песни, например Король и Шут (очень я любил этот ансамбль в детстве) и слушаю целый день. Одна беда — поиск находит все песни всех пользователей и в списке могут стоять 5 одинаковых песен подряд, а некоторые песни меня просто достали, короче постоянно приходится отвлекаться на то, чтобы перепрыгнуть на следующую композицию.

Суть концепта: плеер грабит плейлисты на аудиохостингах. Например, указав адрес vkontakte.ru/audio.php?xxxx, все композиции попадут в плейлист плеера, которые можно удалить, поменять местами и прослушать, не заходя на сайт.


1. Свернутый портативный режим

IE='\v'=='v'

Это решение является победителем в соревновании на выявление самого короткого способа определения IE.