Сегодня мы рассмотрим небольшой пример оформления скроллбара для браузеров на движке WebKit (Chrome, Safari).

Сразу хочу сказать, что я не сторонник изменения внешнего вида скролла, всё-таки это стандартный элемент управления и большинство пользователей привыкли к его виду. Злоупотребление возможностью его изменения может усложнить работу с сайтом.

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

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

Теперь рассмотрим, каким образом можно изменить внешний вид скролла

Движок WebKit поддерживает несколько CSS псевдоклассов, которые определяют оформление различных областей скроллбара. Взгляните на следующий рисунок.

Как видите, все псевдоклассы имеют префикс -webkit-.
Кроме перечисленных на картинке, есть ещё два псевдокласса:
::-webkit-scrollbar-corner – отвечает за оформление квадрата в месте соприкосновения вертикального и горизонтального скролла;
::-webkit-resizer – используется для скроллбаров текстовой области, размеры которой можно изменять.

Также, вместе с этими классами можно использовать различные псевдоэлементы.

Обычные :enabled, :disabled, :hover и :active и специальные:

:horizontal – применяется для частей скроллбара, которые расположены горизонтально;

:vertical – применяется для частей скроллбара, которые расположены вертикально;

:decrement – применяется к участкам полосы прокрутки и кнопкам при перемещении окна просмотра вверх или влево;

:increment – применяется к участкам полосы прокрутки и кнопкам при перемещении окна просмотра вниз или вправо;

:start – применяется к кнопкам и участкам полосы прокрутки. Показывает находится ли объект выше (левее) ползунка;

:end – применяется к кнопкам и участкам полосы прокрутки. Показывает находится ли объект ниже (правее) ползунка;

:double-button – применяется к кнопкам и участкам полосы прокрутки. Используется для того, чтобы определить, является ли кнопка частью двойной кнопки, расположенной на одном из концов полосы прокрутки. Для полосы прокрутки этот псевдокласс показывает граничит ли она с двойной кнопкой;

:single-button – применяется к кнопкам и участкам полосы прокрутки. Используется для того, чтобы определить, является ли кнопка одинарной. Для полосы прокрутки этот псевдокласс показывает граничит ли она с одинарной кнопкой;

:no-button – применяется к участкам полосы прокрутки и показывает, касается ли она края скроллбара (например, если нет кнопок на краях скроллбара);

:corner-present – применяется к участкам полосы прокрутки и показывает, присутствует ли угловая область скроллбара (квадрат на стыке горизонтального и вертикального скроллбаров);

:window-inactive – применяется ко всем элементам скроллбара и показывает является ли окно к которому относится данный скроллбар активным.

Переходим к нашему примеру

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

Займёмся оформлением.

Для начала, зададим общую ширину скроллбара:

::-webkit-scrollbar{
    width:12px;
}

Теперь займёмся оформлением полосы прокрутки (светлосерый фон, серая граница, делаем границу чуть толще с левой стороны):

::-webkit-scrollbar-thumb{
    border-width:1px 1px 1px 2px;
    border-color: #777;
    background-color: #aaa;
}

При наведении курсора (:hover) на полосу прокрутки делаем её более тёмной:

::-webkit-scrollbar-thumb:hover{
    border-width: 1px 1px 1px 2px;
    border-color: #555;
    background-color: #777;
}

Ползунок в неактивном состоянии будет выглядеть как сплошной прямоугольник серого цвета (без границы)

::-webkit-scrollbar-track{
    border-width:0;
}

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

::-webkit-scrollbar-track:hover{
    border-left: solid 1px #aaa;
    background-color: #eee;
}

Как видите, используя обычные CSS правила можно изменить скроллбар до неузнаваемости

Успехов!

Приветствую всех!

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

Думаю, с этой проблемой в какой-то момент сталкиваются все веб мастера.

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

Классическое решение этой задачи – сделать каждую миниатюру ссылкой на полноразмерное изображение. Т.е. использовать разметку вида.

<a href="1.jpg"><img src="1_thumb.jpg" /></a>

где 1_thumb.jpg – уменьшенное изображение 1.jpg.

Главный недостаток такого подхода – посетитель покидает страницу, а затем должен на неё вернуться с помощью кнопки «Назад».

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

Для этого примера я решил остановиться на плагинах к библиотеке jQuery. Т.к. на данный момент она одна из самых популярных и, кроме того, аналоги можно найти для всех распространённых JS библиотек.

Хочу сразу отметить, что плагинов для работы с изображениями – сотни, и многие дублируют друг друга.

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

Чтобы было нагляднее, все описанные здесь примеры я разместил на демонстрационной страничке

Вариант 1. Предпросмотр при наведении мышки на изображение.

Есть несколько разновидностей таких плагинов, которые различаются в основном визуальными эффектами. В простейшем случае, для реализации подойдет любой плагин создания подсказок (tooltips). Например, Image Preview.

Использовать его не сложно. Размещаете на странице миниатюры со ссылками на полноразмерные изображения, подключаете jQuery и плагин, добавляете несколько CSS стилей и всё, можно пользоваться.

Рассмотрим пример.

Разметка страницы

<a href="images/1.jpg" class="preview"><img src="images/1t.jpg" alt="image 1" /></a>
<a href="images/2.jpg" class="preview"><img src="images/2t.jpg" alt="image 2" /></a>
<a href="images/3.jpg" class="preview"><img src="images/3t.jpg" alt="image 3" /></a>

Здесь ссылкам добавлен класс preview, чтобы плагин мог выбрать только те изображения, которые нужно увеличить.

Подключение JS файлов:

<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="tooltip.js"></script>

И CSS стили:

a img {
    border: none;
}

#preview {
    background: none repeat scroll 0 0 #333333;
    border: 1px solid #CCCCCC;
    color: #FFFFFF;
    display: none;
    padding: 5px;
    position: absolute;
}

Их вы можете поменять. Главное – сохраните абсолютное позиционирование для блока предпросмотра (position: absolute). Иначе полноразмерная картинка будет вставлена внутрь страницы и испортит дизайн.

Теперь о достоинствах и недостатках.

Взгляните на демонстрационную страничку (первый ряд изображений).

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

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

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

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

Вариант 2. Увеличение картинки на весь экран.

Реализовать можно с помощью плагинов для создания галерей. Пример для этой статьи я сделал с помощью плагина Fancy Zoom.

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

Подключение и настройка плагина достаточно простые.

Разметка страницы должна позволять выбрать нужные изображения с помощью jQuery селекторов. Например, так:

<div id="fancy">
    <a href="images/1.jpg"><img src="images/1t.jpg" alt="image 1" /></a>
    <a href="images/2.jpg"><img src="images/2t.jpg" alt="image 2" /></a>
    <a href="images/3.jpg"><img src="images/3t.jpg" alt="image 3" /></a>
</div>

После этого, нужно подключить JS скрипты и передать плагину ссылки на полноразмерные изображения.

<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jquery.shadow.js"></script>
<script type="text/javascript" src="jquery.ifixpng.js"></script>
<script type="text/javascript" src="jquery.fancyzoom.min.js"></script>
<script type="text/javascript">
	$(function() {
		$('#fancy a').fancyzoom();
	});
</script>

Плагины shadow и ifixpng используются для создания тени вокруг полноразмерного изображения и исправления проблем IE при работе с png изображениями, соответственно.

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

Теперь о достоинствах и недостатках.

Кликните по любому изображению во втором ряду на демонстрационной страничке. Картинка плавно увеличится и в правом верхнем углу появится кнопка «Закрыть».

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

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

Но читать текст на странице уже не получится. Т.е. посетитель может смотреть либо на картинку, либо – на содержимое страницы.

Вариант 3. Увеличение картинки в отдельном блоке.

Для демонстрации этого решения я выбрал плагин jqZoom.

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

Разметка страницы для использования этого плагина не отличается от предыдущих вариантов.

<a href="images/2.jpg" class="jqzoom" title="image 2">
	<img src="images/2t.jpg" alt="image 2" />
</a>

Для использования плагина нужно подлкючить библиотеку jQuery, сам плагин, найти нужные изображения и вызвать для них метод jqzoom().

<script type="text/javascript" src="jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="jqzoom.pack.1.0.1.js"></script>
<script type="text/javascript">
	$(function() {
		$(".jqzoom").jqzoom();
	});
</script>

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

Теперь подумаем, что даёт использование такого плагина.

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

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

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

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

Обратите внимание. Все три решения используют стандартную разметку (картинка внутри ссылки). Такой подход гарантирует, что при отключённом JavaScript посетитель сможет просмотреть полноразмерное изображение.

В заключение, хочу отметить, что в этой статье рассмотрены далеко не все варианты решения задачи. Я выбрал те, которые считаю наиболее универсальными (подходят для большинства сайтов) и простые в использовании.

Если вам приходилось решать подобные задачи, и вы хотите о нём рассказать, пишите, буду рад обсудить

Интересно почитать

Как привлечь клиентов в кафе и убедить их заказать больше чем обычно?

Вы, конечно, знаете, что новые версии WordPress поддерживают древовидные комментарии.

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

В идеале разработчик темы WordPress должен использовать только параметры функции wp_list_comments (выводит список комментариев) и CSS стили.

Но идеальных вещей не существует в природе и WordPress – не исключение

В общем, стандартное оформление комментариев содержит несколько очень неприятных недостатков.

Например.

После имени комментатора выводится слово says:, которое нельзя изменить с помощью параметров wp_list_comments. Хотя, текст ссылки Reply можно изменить с помощью этой функции

wp_list_comments(array('reply_text'=>'Ответить'));

Вывод даты имеет фиксированный формат, что-то вроде сентября 7, 2009 at 9:29 am

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

Проблема заключается в том, что эти настройки прописаны в файле wp-includes/comment-templates.php. Т.е. если мы внесем в него изменения, они будут перезаписаны после очередного обновления движка, которые, кстати, появляются довольно часто.

Кстати, строка 1226 в файле wp-includes/comment-templates.php выглядит так:

<?php printf(__('<cite class="fn">%s</cite> <span class="says">says:</span>'), get_comment_author_link()) ?>

Видите, мы может изменить оформление слова says: (с помощью CSS класса says), но не можем изменить сам текст.

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

1) В файле comments.php вашей темы в параметре callback функции wp_list_comments указываем имя функции, которую нужно использовать для вывода комментариев.

wp_list_comments('type=comment&callback=mytheme_comment');

В данном случае это mytheme_comment.

2) Создаем саму функцию. Она должна находиться в файл functions.php вашей темы.

Заново писать всю функцию целиком нет никакого смысла (разве что вы хотите сделать что-то неповторимое ). Лучше использовать готовый шаблон

Он полностью совпадает со стандартным выводом комментариев в WP.
Теперь можно немного его подправить.

Примечание. Почитать о форматировании дат можно здесь.

У меня получилось примерно следующее.

Строка с форматами даты и времени.

<div class="comment-meta commentmetadata"><a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ) ?>"><?php printf(__('%1$s в %2$s'), get_comment_date('j F Y'),  get_comment_time('G:i')) ?></a><?php edit_comment_link(__('(Edit)'),'  ','') ?></div>

Слово says: я просто удалил.

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

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

В общем, тщательно тестируйте все ваши нововведения.

Удачи!

Интересно почитать

Разработка сайтов в Минске. Студия веб-дизайна в Минске.

Думаю, все кто когда-нибудь занимался версткой сайтов, знает о том насколько хорошо IE6 поддерживает разные полезные возможности

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

И на сегодняшний день игнорировать людей, которые используют устаревшую версию Internet Explorer нельзя.

К тому же для того чтобы обеспечить поддержку IE6 не обязательно отказываться от новых возможностей.

Сегодня я расскажу о двух проблемах, которые можно решить практически без усилий с вашей стороны. Это поддержка :hover селекторов и прозрачных png изображений.

Поддержка :hover селекторов

Вообще-то в IE6 есть поддержка этих селекторов, но только для тега a, т.е. ссылки. В тоже время в современных браузерах их можно использовать для любых элементов страницы.

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

Решить проблему можно с помощью небольшого скрипта под названием Whatever:hover.

От вас требуется добавить только одно CSS правило

body {
	behavior: url("csshover3.htc");
}

Естественно нужно указать правильное размещение скрипта.

Скрипт сам найдет нужные элементы на странице и, если курсор мыши окажется над ними, применит соответствующие CSS правила.

Поддержка альфа-канала в PNG файлах.

Примечание. В альфа-канале хранятся данные о прозрачности рисунка.

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

При этом для картинки установлено правило

background-attachment: fixed;

Т.е. при прокрутке страницы фон остается неподвижным, а логотип должен перемещаться.

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

Чтобы проиллюстрировать проблему я сделал 2 скриншота.

Угадайте, какой из них сделан в IE6?

IE закрасил прозрачные пиксели серым цветом. Кстати, использование gif изображений не поможет, т.к. по краю букв идут частично прозрачные пиксели.

Решается эта проблема с помощью скрипта IE PNG Fix.

Вам нужно подключить его для тех элементов на странице, которые содержат прозрачные png изображения. Например, так.

img {
    behavior: url("iepngfix.htc");
}

После этого, изображения будут выглядеть правильно.

Небольшое заключение для пользователей IE6.

То, что web разработчик может как-то обойти обойти ограничения браузера не означает, что вам не нужно его апгрейдить

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

Так что не удивляйтесь, если после загрузки пары страничек у вас начнет «тормозить» компьютер

Удачного обновления!

Сегодня речь пойдет о работе со ссылками на web странице, а если точнее – об их оформлении для просмотра и печати. У вас может возникнуть вполне закономерный вопрос: «О чем тут вообще речь? Ведь с помощью CSS можно оформить ссылки как угодно». В принципе, это действительно так, и большинство примеров в этой статье используют именно CSS, но если добавить немного JavaScript кода, то результат будет намного интереснее

Начнем с постановки задачи.

Нам нужно:

1) Выделить (визуально) все внешние ссылки на странице (внутренние должны остаться без изменений).

2) Сделать так, чтобы они открывались в новом окне браузера (опять же, внутренние ссылки должны работать как обычно).

3) При печати после текста внешней ссылки должен выводиться ее адрес. Тут существует несколько решений, но об этом чуть позже.

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

Первый этап. Изменяем оформление внешних ссылок.

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

Таким образом, нам нужно:

1) Создать CSS стили.

2) После загрузки страницы найти все внешние ссылки.

3) Установить для них соответствующие стили.

Стили разместим в файле styles.css.

.ext {
	background-image: url('extlink14x14.gif');
	background-position: right;
	background-repeat: no-repeat;
	padding: 0 20px 0 0;
}

Как видите, мы установили стили для класса ext. С их помощью мы создали отступ справа от ссылки (20 px) и добавили файл с картинкой.

Теперь ищем все внешние ссылки и устанавливаем для них наш новый класс. Сразу же добавляем атрибут target='_blank' (ссылки будут открываться в новом окне).

$(function() {
	$('a[href^=http://]').addClass('ext').attr('target', '_blank');
});

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

Примечание. Мы считаем, что все внешние ссылки начинаются с http://.

Оформление ссылок для печати.

Тут все немного сложнее. Главная проблема в том, что, распечатав страницу, посетитель теряет часть информации, а именно – адреса ссылок.

Я нашел два варианта решения этой проблемы.

Первый – использовать специальные CSS стили для «печатной» версии страницы. Подробно этот метод описан в статье «15 минут на подготовку к печати».

Для его реализации нужно создать еще один файл со стилями (printstyles.css):

.ext {
	background-image: none;
	padding: 0 0 0 0;
}

a[href^="http"]:after {
    content:" (" attr(href) ") "; font-size: 90%;
}

И указать браузеру, использовать их при печати страницы (с помощью атрибута media):

<link rel="stylesheet" href="styles.css" type="text/css" media="screen" />
<link rel="stylesheet" href="printstyles.css" type="text/css" media="print" />

Теперь при печати страницы у нас вместо картинки после ссылки будет показан её адрес.

Все отлично, но есть два недостатка: ссылки мешают читать текст, и в IE этот метод не работает.

Второй вариант решения – поместить все ссылки с адресами в конце страницы. Этот метод подробно описан в статье «Improving Link Display for Print» (кстати, есть перевод на русский).

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

Алгоритм будет таким:

1) найти все внешние ссылки;

2) создать блок в конце страницы (в нем будет размещен список со ссылками);

3) скопировать найденные ссылки в этот блок, при этом после каждой ссылки в скобках добавить её адрес;

4) сделать так, чтобы блок со списком ссылок отображался только при печати страницы.

Первые три операции мы выполняем с помощью JavaScript функции:

function createReferences() {
	$('


').appendTo('body');
	$('a[href^=http://]').clone()
		.each(function() {
				$(' (' + this.href + ')').appendTo(this);
			})
		.appendTo('#references')
		.wrap('


');
}

Функция appendTo добавляет новый блок на страницу (в данном случае это нумерованный список). С помощью clone() мы копируем ссылки. После каждой ссылки вставляем новый тег span, в котором размещаем адрес ссылки.

Добавляем ссылки в список (строка 7) и при этом не забываем заключить её в теги li (с помощью функции wrap, строка 8).

В результате мы получим упорядоченный список со всеми внешними ссылками.

Остается только сделать его невидимым для «экранной» версии страницы. Эта задача легко решается с помощью CSS стилей.

В файл styles.css добавляем:

#references {
	display: none;
}

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

Как видите, ничего сверхсложного. Кстати, обратите внимание, страница будет нормально отображаться, даже если у посетителя отключен JavaScript. Блок со ссылками, естественно, создать не получится, страница будет просто распечатана как обычно.

Скачать пример

Если хотите поэкспериментировать качайте архив с примером.

Я буду рад выслушать любые ваши пожелания, замечания и советы

До встречи!

Думаю, все кто интересуется web дизайном видели тему для WordPress WP-Coda.

Меня прежде всего заинтересовал эффект со всплывающим блоком (появляется над первым пунктом в горизонтальном меню).

Эффект очень красивый и мне захотелось сделать всплывающие подсказки в таком же стиле.

Как оказалось – ничего сверх сложного .

Прежде всего, рассмотрим принцип работы эффекта.

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

Если переместить мышку на другой элемент страницы – блок плавно исчезает.

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

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

В результате получилось два JavaScript класса. Плюс для их работы нужна библиотека jQuery.

Посмотреть демоверсию можно здесь. Я использовал такие подсказки для всех элементов горизонтального меню.

Первый класс (Popup) – создает подсказки и содержит методы для управления ими.

Второй (PopupContainer) – представляет собой контейнер для хранения экземпляров первого класса, и содержит только один метод addPopup. В качестве параметров он получает id элемента, которому принадлежит подсказка и id блока с самой подсказкой.

Теперь разберем порядок работы эффекта.

Как вы понимаете, переход подсказки из одного состояния в другое (видима/невидима) происходит при возникновении определенного события. В данном случае это mouseenter и mouseleave.

На следующей диаграмме я показал порядок работы эффекта при возникновении события mouseenter.

Прежде всего, обратите внимание на переменные visible и showBegin. В них мы сохраняем текущее состояние подсказки.

Если visible == true, то подсказка в данный момент показана.

showBegin == true означает, что в данный момент идет анимация.

Используя эти переменные, мы можем определить, когда нужно игнорировать событие mouseenter.

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

Я решил сделать следующим образом. Анимация продолжается в любом случае, но если посетитель убирает мышку с элемента, то сразу же после ее завершения запускается обратный эффект. Т.е. в результате блок с подсказкой будет скрыт.

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

Таким образом, если посетитель уберет мышку с элемента после того как анимация завершилась, то метод hide спрячет подсказку. Если же анимация не завершилась, то метод hide просто установит значение переменной nextAction = 'hide'.

Перед завершением работы метод show проверит состояние nextAction и вызовет метод hide. Т.е. подсказка исчезнет.

Диаграмму работы при возникновении события mouseleave я не приводил, т.к. принцип работы такой же.

Теперь взгляните на исходный код класса Popup

function Popup(target, popup) {
	var showBegin = false;
	var visible = false;
	var nextAction = 'none';

	var target = target;
	var popup = popup;

	var curObj = this;

	this.show = function() {
		if (!visible && !showBegin) {
			//сбрасываем предыдущее значение nextAction
			nextAction = 'show';
			showBegin = true;
			//рассчитываем координаты всплывающей подсказки
			var pWidth = popup.innerWidth();
			var tHieght = target.innerHeight();
			var tWidth = target.innerWidth();
			var tOffset = target.offset();
			var popupLeft = tWidth/2 + tOffset.left - pWidth/2;
			var popupTop = tHieght/2 + tOffset.top;

			//показываем подсказку
			popup.removeClass("hide");
			popup.css("top", popupTop);
			popup.css("left", popupLeft);
			popup.css("opacity", 0);
			//запускаем анимацию (изменение прозрачности и положения)
			popup.animate({
				opacity: 1,
				top: '+=' + 10 + 'px'
			}, 1000, 'swing', function() {
				//выполняется после завершения анимации
				visible = true;
				showBegin = false;
				if (nextAction == 'hide') {
					curObj.hide();
				}
			});
		}
		else {
			//если подсказка уже показана или начата анимация
			//сохраняем следующую операцию
			nextAction = 'show';
			return;
		}
	}

	this.hide = function() {
		if (!showBegin && visible) {
			//сбрасываем предыдущее значение nextAction
			nextAction = 'hide';
			showBegin = true;
			//убираем подсказку (изменяем прозрачность и смещаем)
			popup.animate({
				opacity: 0,
				top: '-=' + 10 + 'px'
			}, 1000, 'swing', function() {
				//выполняется после завершения анимации
				visible = false;
				showBegin = false;
				popup.addClass("hide");
				if (nextAction == 'show') {
					curObj.show();
				}
			});
		}
		else {
			//если подсказка невидимая или идет анимация
			//сохраняем следующую операцию и выходим
			nextAction = 'hide';
			return;
		}
	}

	this.setEventHandlers = function() {
		target.bind('mouseenter', this.show)
			.bind('mouseleave', this.hide);
	}
}

С помощью метода setEventHandlers мы устанавливаем обработчики событий. При возникновении mouseenter будет вызван метод show, а при возникновении mouseleave – hide.

Принцип работы метода show мы уже рассмотрели. Единственное, на что я хочу обратить ваше внимание – это способ размещения подсказки.

Нам нужно, поместить подсказку точно под элементом, к которому она относится.

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

Затем делаем подсказку видимой (убираем класс hide) и запускаем анимацию (функция animate). В данном случае мы плавно изменяем прозрачность, и смещаем подсказку вниз на 10 пикселов.

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

Теперь рассмотрим класс контейнера

function PopupContainer() {
	var popups = [];

	this.addPopup = function(target, popup) {
		var newPopup = new Popup(target, popup);
		newPopup.setEventHandlers();
		popups.push(newPopup);
	}
}

Как видите, он предельно прост. Единственный метод addPopup создает новый объект класса Popup и сразу же вызывает его метод setEventHandlers. Т.е. подсказка сразу же готова к работе.

Использование подсказки

1) Подключаем необходимые библиотеки и стили. Например:

<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery.dimensions.js" type="text/javascript"></script>
<script src="js/popups.js" type="text/javascript"></script>
<script src="js/common.js" type="text/javascript"></script>
<link href="css/styles.css" charset="UTF-8" rel="stylesheet" type="text/css" />

2) Создаем элемент, для которого будет вызвана подсказка.

<p><a id="targetblock" href="#">Наведите указатель мыши на этот текст чтобы увидеть подсказку</a></p>

3) Создаем подсказку

<div id="mypopup" class="hide popuptip">
	<div class="tiptext">
	Это всплывающая подсказка в стиле <strong>Coda</strong><br />Она появляется при наведении указателя мыши на ссылку.
	</div>
	<div id="tipfooter"></div>
</div>

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

Во-первых, она должна быть абсолютно позиционирована.

Во-вторых, нужно иметь возможность ее спрятать. Обычно для этого используется правило display: none.

4) Оформление подсказки. Тут у вас полная свобода . Я использовал следующие правила.

.popuptip {
	position: absolute;
	z-index: 3000;
	width: 160px;
}

.hide {
	display: none;
}

.popuptip .tiptext {
	background-image: url('../images/tooltip_back_transp.png');
	padding: 20px 20px 5px 20px;
	font-size: 0.8em;
}

#tipfooter {
	background-image: url('../images/tooltip_back_transp.png');
	height: 20px;
	background-position: bottom left;
}

Обязательными являются только первые два (popuptip и hide).

Примечание. В качестве фона я использовал рисунок tooltip_back_transp.png и технику CSS спрайтов. Здесь на ней я останавливаться не буду, вы легко сможете найти подробные статьи на эту тему.

5) Создаем подсказку и «привязываем» ее к какому-нибудь элементу на странице.

$(document).ready(function() {
	var pContainer = new PopupContainer();
	pContainer.addPopup($("#targetblock"), $("#mypopup"));
});

Скачать

Если эффект вас заинтересовал – качайте архив с примером. В нем находятся все необходимые библиотеки и скрипты.

Все вопросы и замечания буду рад почитать в комментариях

В этой заметке я хочу рассказать об одном нюансе, который обязательно нужно помнить при создании web интерфейса или дизайна сайта.

Часто для того, чтобы подчеркнуть, что страница реагирует на действия посетителя, используют дополнительные изображения (например, gif анимацию).

Самый распространенный пример – индикаторы загрузки. Кстати, существует бесплатный сервис, который создает такие загрузчики.

Алгоритм работы в большинстве случаев следующий:

1) посетитель нажимает на кнопку;

2) выполняется JavaScript функция, которая:

  2.1) отправляет запрос серверу;

  2.2) показывает загрузчик;

3) после получения ответа сервера, функция:

  3.1) показывает результаты выполнения запроса;

  3.2) убирает загрузчик.

И вот тут возникает проблема. Время загрузки изображения может быть соизмеримо со временем выполнения запроса. Т.е. посетитель нажмет на кнопку, а реакция на это нажатие появится через несколько секунд (в зависимости от скорости интернет канала).

Правда при повторном нажатии на кнопку задержек не будет, т.к. картинка с анимацией будет взята из кэша браузера.

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

Самое просто решение – загружать все необходимые изображения сразу при загрузке страницы.

Для этого в конец страницы нужно вставить блок с рисунком и сделать его скрытым. Например, так:

<div class="hide"><img src="images/my_animation.gif"</div>

CSS правило, которое скрывает блок с классом hide:

.hide {
	display: none;
}

Как видите, ничего сложного.

Если возникли вопросы или замечания – пишите. Постараюсь ответить

Удачи!

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

В первую очередь определим минимальные требования к таким библиотекам:

1) подсветка кода без лишних действий с вашей стороны, т.е. в идеале нужно указать только язык, подсветку для которого нужно включить, и выделить сам блок с кодом (обычно с помощью тегов <pre>);

2) нумерация строк кода (очень удобно ссылаться на эти номера в описании, да и посетителю будет легче ориентироваться).

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

1) подсветка синтаксиса выполняется на стороне клиента, т.е. браузером;

2) подсветка выполняется серверным скриптом.

В первом случае браузер получает страницу, в которой блоки кода не имеют подсветки и находятся внутри тегов <pre><code>…</code></pre> (теги могут быть другими) и JavaScript функцию.

При загрузке страницы будет выполнена js функция, которая проанализирует содержимое этих блоков, "раскрасит" код, пронумерует строки и т.д.

Во втором варианте блоки кода анализируются на стороне сервера, и тут же выполняется подсветка. Например, если исходная страница содержит:
<pre lang="php"> if ($tagcloud === FALSE) {</pre>

то браузер получит что-то вроде:

<div class="ch_code_container" style="font-family: monospace;white-space: nowrap;height:-1px;">
<ol>
<li style="font-family: 'Courier New', Courier, monospace; color: black; font-weight: normal; font-style: normal;">
<div style="font-family: 'Courier New', Courier, monospace; font-weight: normal;"><span style="color: #b1b100;">if</span> <span style="color: #66cc66;">(</span><span style="color: #0000ff;">$tagcloud</span> === <span style="color: #000000; font-weight: bold;">FALSE</span><span style="color: #66cc66;">)</span> <span style="color: #66cc66;">{</span></div>
</li>
</ol>
</div>

Примечание. Этот блок я специально не форматировал.

Как видите, здесь каждый элемент находится внутри тегов <div> или <span>, для которых установлены соответствующие стили.

Теперь о преимуществах и недостатках.

Первый вариант (подсветка на стороне браузера с помощью JavaScript).
Преимущества.
1) Меньше нагрузка на сервер (хотя, если страницы кэшируются, особенной разницы не будет).
2) Если вставки кода большие, то может быть выигрыш в размере страницы (т.е. размер JavaScript будет меньше размера дополнительной разметки со стилями во втором варианте).

Недостатки.
1) Нужна поддержка JavaScript на стороне клиента. Если страница просматривается в браузере, то это не проблема, а вот в RSS ридере подсветку не увидите.
2) Размер страницы увеличивается за счет js-файла и грузить его ради пары строк как-то не рационально (т.е. выигрыш в размере можно получить только при достаточно больших блоках кода).

Второй вариант (подсветка на стороне сервера).
Преимущества.
1) Такую подсветку правильно отображают не только браузеры, но и RSS ридеры и eMail клиенты (актуально, если вы рассылаете ленту по почте).

Недостатки.
1) Объем страницы увеличивается и довольно сильно.
2) Увеличивается время формирования страницы.

Теперь переходим к библиотекам.

Для подсветки на стороне браузера можно использовать:

1) highlight.js

2) Code Press

3) Mike Samuel’s JavaScript Code Prettifier

4) SyntaxHighlighter – существует плагин для WordPress, основанных на этой библиотеке

Следующие три библиотеки позволяют не только подсветить код, но и создать текстовый редактор внутри textarea.

5) Edit area

6) CodeMirror

7) Helene

Подсветка на стороне сервера:

1) GeSHi (наверное, самая распространенная) на ее основе создан ряд плагинов для различних CMS

2) GNU Enscript и плагин для WordPress на ее основе – Syntax Highlighting with Enscript.

3) Highlight – плагин для WordPress.

Теперь приведу список плагинов WordPress, которые работают на основе GeSHi

4) iG:Syntax Hiliter

5) CodeColorer

6) Highlight Source Pro

7) Code Snippet 2.0

8 ) Dean’s Code Highlighter – этот плагин я использую в своем блоге.

9) WP-Syntax

Пару слов о количестве поддерживаемых языков. Если вам нужна подсветка широко распространенных языков (вроде C++, Java, PHP, HTML), то, скорее всего, вам подойдет любая из упомянутых здесь библиотек. Если же вы хотите подсветить что-нибудь экзотическое, то и в этом случае есть из чего выбрать. Например, GeSHi поддерживает более 70 языков (о некоторых я даже не слышал ).

Как видите, есть из чего выбрать!

Удачи!