Категории: JavaScript

Google Maps: выделение областей на карте

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

google maps circle logo

О сервисах Google Maps и Яндекс.Карты слышали, наверное, практически все пользователи интернета. Но если для рядового пользователя их возможности ограничиваются стандартным интерфейсом, то для разработчиков всё гораздо интереснее.

Оба сервиса предоставляют API, который позволяет получить дополнительную информацию, изменить внешний вид и работу карт.

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

Прежде всего, сформулируем задачу.

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

Т.к. для обоих случаев API практически одинаков, рассмотрим вариант с окружностью.

Итак, принцип работы будет следующий.
Читать дальше

jQuery и плагины: решения для просмотра больших изображений

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

jquery img zoom

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

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

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

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

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

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

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

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

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

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

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

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

Конвертер валют

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

rates converter

В комментариях к прошлой статье «Создаём валютный информер с помощь PHP и JavaScript» читатель с ником php-user предложил хороший вариант усовершенствования скрипта.

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

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

Source

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

Определим план работ.
Читать дальше

Создаём валютный информер с помощь PHP и JavaScript

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

exchange rates

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

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

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

Source

Подключение информера

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

Особенности подключения JS скриптов в WordPress

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

wordpress scripts

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

Один из таких примеров – подключение JavaScript кода в WordPress.

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

Кстати, аналогичные возможности есть и в различных фреймворках, например, Yii.

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

Основные проблемы и причины их появления

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

Аутентификация с помощью социальных сервисов и OpenId (Loginza)

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

loginza

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

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

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

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

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

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

Загрузка файлов с помощью SWFUpload и PHP

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

swfupload

О загрузке файлов на сервер рассказывается, наверное, в каждой книге о веб разработке. Обычно при этом приводится пример формы с тегом input type=file и объясняется, как работать с массивом $_FILES на стороне сервера. Это классический вариант. Он отлично работает, но имеет несколько ограничений.

1) Чтобы загрузить несколько файлов, нужно создать несколько тегов input. При этом пользователь должен будет выбирать каждый файл отдельно, что довольно неудобно при большом количестве файлов.

2) Невозможно показать процент загрузки файла.

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

4) Загрузка не будет асинхронной, т.е. произойдет перезагрузка страницы.

На сегодняшний день существует два основных варианта решения этих проблем. Использование iframe или flash (по-идее, silverlight тоже можно использовать для этих целей).
Читать дальше

Ограничения фреймворков (на примере Yii)

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

yii php framework autocomplete

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

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

В этой статье я хочу показать пример такой ситуации, и, естественно, её решение.
Читать дальше

Плавающий виджет. Поддержка IE6.

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

floating panel logo

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

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

Но, благодаря читателям этого блога, выяснилось, что протестировал я работу плагина не очень хорошо. За это всем ещё раз огромное спасибо! Очень приятно, что кто-то пользуется моим кодом и помогает делать его лучше.

Но вернёмся к плагину. Проблема возникла в широко известном браузере под названием IE6, о котором уже давно хочется забыть 🙂 … но есть люди, которые им пользуются 🙁
Читать дальше

jQuery + плагины: сортировка и редактирование списка (часть вторая)

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

jquery sortable

В прошлой статье я начал рассказывать о создании редактируемого html списка с возможностью сортировки записей. Мы рассмотрели структуру БД, создали страницу со списком, подключили JS скрипты и разобрали добавление записей.

Осталось немного доделать 😉

Демо-версия находится здесь

Demo

Также вы можете скачать архив с этим примером

Source

Удаление существующих записей
Читать дальше