Категории: HTML

Оформление внешних ссылок

Владимир | | CSS, HTML, JavaScript, Web дизайн, Web разработка.

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

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

Нам нужно:

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

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

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

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

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

Создаем плагин для jQuery

Владимир | | CSS, HTML, JavaScript, Web разработка.

Этот пост – вольный перевод очень полезной статьи Jeffrey Way Learn How to Create a jQuery Plugin.

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

Вы можете скачать исходники этого примера или посмотреть демонстрацию.

У вас может возникнуть мысль: «Что за суета вокруг jQuery? Нужно загрузить кучу плагинов чтобы эта библиотека на что-нибудь годилась». Первое, это не так. Второе, jQuery специально разрабатывалась для широкого применения. Сохраняя ядро библиотеки маленьким – 16кБ (прим. – речь идет о сжатом варианте) – пользователи могут добавить дополнительные плагины по собственному усмотрению. Сегодня, я покажу вам, как создать собственный плагин под названием «Center» с нуля. Приступим!

Наша задача

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

Переключение чекбоксов с помощью jQuery

Владимир | | HTML, JavaScript, Web разработка.

На днях мне нужно было написать небольшую JavaScript функцию (на jQuery), которая переключала бы группу чекбоксов. Т.е. все отмеченные чекбоксы должны были стать неотмеченными и наоборот.

Кстати, это довольно широкораспространенная задача.

Количество чекбоксов изменялось динамически и некоторые из них могли быть не активными (их трогать нельзя).

Вобщем, уложился я в шесть строк (включая объявление функции).
Читать дальше

Собственный сервис поиска с помощью Google Maps

Владимир | | HTML, JavaScript, Web разработка.

Современные web сервисы позволяют с минимальными усилиями существенно расширить функциональность сайта.

Сегодня речь пойдет об использовании карт от Google на собственном сайте.

Для начала определимся с задачей.

Допустим, нам нужно сделать поиск по картам. Т.е. посетитель вводит название города в поле формы, нажимает кнопку «Найти».

После этого наше приложение показывает соответствующую карту.

В общем, должно получиться что-то похожее на эту страницу.

Переходим к реализации.

Для использования карт Google на собственном сайте нужно получить специальный ключ (AJAX Search API Key).

Процедура предельно простая. Заходим на страницу регистрации, соглашаемся с лицензией, вводим адрес сайта в форму и жмем кнопку «Generate API Key».

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

Размещаем карту на странице.
Читать дальше

Создаем подсказки в стиле WP-Coda

Владимир | | CSS, HTML, JavaScript, Web дизайн, Web разработка.

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

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

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

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

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

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

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

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

jQuery + Chili = подсветка кода

Владимир | | HTML, JavaScript, Web разработка.

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

Называется эта библиотека Chili и представляет собой плагин к jQuery. Т.е. в данном случае речь идет о подсветке кода на стороне браузера.

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

Прежде всего, посмотрите на список поддерживаемых языков: C++, C#, CSS, Delphi, Java, JavaScript, LotusScript, MySQL, PHP и XHTML.

Конечно, если сравнивать с библиотеками вроде GeShi (которые выполняют подсветку на стороне сервера), то список выглядит совсем не впечатляюще. Но, с другой стороны, вы не используете ресурсы сервера для подсветки.

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

Как вставить блок с кодом в редактор WordPress

Владимир | | HTML, WordPress.

Эта проблема для меня имеет особую актуальность. Блоки кода я вставляю практически во все посты.

В принципе, вставить код не сложно. Обычно я размещаю его внутри тегов <pre> с атрибутом lang (это необходимо для работы плагина Dean's Code Highlighter, который занимается подсветкой).

Основная проблема заключается в том, что вы должны вручную заменить символы < и > на &lt; и &gt;. Иначе возникает неоднозначность.

Например, вы пишите привет. WordPress считает, что вы хотите выделить слово «привет» жирным шрифтом и отправляет страницу браузеру именно в таком виде. Но что если вы хотели показать пример html разметки?
Читать дальше

Создаем рейтинги с помощью jQuery

Владимир | | HTML, JavaScript, Web разработка.

Сегодня речь пойдет о довольно интересном плагине для jQuery, который помогает создавать рейтинги.

Называется он jQuery Star Rating Plugin.

Принцип работы очень простой.

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

Как это выглядит, смотрите на скриншоте

jquery_stars1

Уверен, что вы не раз встречали подобную систему на различных сайтах.

Теперь посмотрим, что нужно для работы плагина.
Читать дальше

Создаем скрипт для автоматической отправки опечаток

Владимир | | HTML, JavaScript, PHP, Web разработка.

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

Идея очень простая и элегантная. Если посетитель видит ошибку, то он выделяет её с помощью мышки и нажимает «Ctrl+Enter». После этого, владелец сайта получает письмо с выделенным текстом. Главное преимущество в том, что посетителю нужно сделать минимум действий. Никаких перезагрузок страниц и заполнения форм, нужна только поддержка JavaScript в браузере.

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

Преимущества такого решения.

1) Вы не зависите от стороннего сервиса.

2) Сообщения об опечатках можно будет просматривать через web интерфейс. Все-таки это удобнее чем копаться в почте 😉 .

3) Можно легко реализовать защиту от спама.
Читать дальше

Незаметная загрузка картинок

Владимир | | CSS, HTML, Web дизайн, Web разработка.

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

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

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

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