Рассмотрим небольшую практическую задачу: как показать пользователю флаг его страны, когда он заходит на ваш сайт?
Для решения этой задачи понадобятся два сервиса: Flag Sprites и freegeoip.net, рассмотренный в предыдущей статье.

1. Готовим флаги

С помощью сервиса Flag Sprites получаем архив, содержащий изображение со всеми флагами мира, и CSS-файл, определяющий координаты каждого флага. В примере рассматриваются большие флаги 32x32.
Распаковываем архив в папку проекта, например flags и подключаем полученный CSS к html странице.

Читать далее...

Не секрет, что диапазоны IP адресов распределены между странами мира, то есть зная IP можно достаточно точно определить, в какой стране находится пользователь. Иногда даже можно определить его город и координаты (но вот на точность этих данных полагаться уже не стоит).

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

Читать далее...

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

Виджет состоит из javascript файла с самими функциями (про особенности в разработке можно прочесть у автора), json файла со списком стран и кодов и спрайта с флагами.

Читать далее...

JavaScript - достаточно гибкий язык, в котором многие конструкции, которые, будучи написанными на других языках, выдавали бы ошибку, отлично работают. К примеру - объявление переменных. Часто возникает вопрос "Зачем в JavaScript  для переменных нужен var, если код и без него отлично работает во всех браузерах?". На самом деле ответ заключается в предназначении этого самого var. Ключевое слово var необходимо, чтобы объявить переменную  в текущей области видимости, то есть чтобы ограничить видимость переменной.

Читать далее...

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

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

Читать далее...

В предыдущей статье мы рассмотрели, как сделать дизайн страницы WordPress в форме "карточек" с помощью JQuery Masonry. Если у вас блоки-карточки одинаковой ширины, то layout визуально будет размещаться в виде колонок.

При этом, ввиду особенностей атрибута стиля float:left, все колонки будут прижаты к левому краю окна, а контейнер будет иметь ширину 100%.

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

Masonry - это JQuery-плагин позволяющий быстро и просто организовать динамический layout блоков разного размера практически без потери места, а если подобрать соответствующие размеры блокам — то без пустых мест вовсе.
Под динамическим layout`ом имеется ввиду, что блоки будут располагаться в контейнере в зависимости от его размеров, максимально рационально заполняя его пространство, тем самым экономя место на странице.
Читать далее...

DataTables - это плагин для Javascript-библиотеки JQuery. Это гибкий инструмент, добавляющий расширенные возможности управления таблицами в html. Основные возможности плагина:

• постраничная разбивка с задаваемым количеством записей
• фильтрация "на лету"
• сортировка по нескольким столбцам с определением типа данных
• автоматическая обработка ширины столбцов
• отображение данных практически из любого источника данных (DOM, JavaScript массива, Ajax файла и обработки на стороне сервера (PHP, C #, Perl, Ruby, AIR, Gears и т.д.))
• локализируемость
• поддержка JQuery UI ThemeRoller
• дополнительные модули, Editor, TableTools, FixedColumns и т.д.

Читать далее...