Категории: JavaScript

Facebook: как посчитать количество лайков

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

facebook like share

Некоторое время назад, если не ошибаюсь, в феврале 2012 года, разработчики Facebook решили заменить кнопку Share button на Like button. В документации появилась информация о том, что «Share button» не рекомендуется для использования (depricated). И 7 ноября 2012 года переход был завершен. Естественно, разработчики опубликовали подробную инструкцию по переходу на новый виджет.

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

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

jQuery: плагин для создания адаптивного меню

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

jquery adaptive menu

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

Хочу поделиться небольшим плагинчиком для библиотеки jQuery. И, естественно, услышать ваше мнение о нём 😉

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

Скачать плагин можно на GitHub.
Читать дальше

jQuery: обработка параметров URL

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

jquery parsequery

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

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

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

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

<a class="delete" href="https://www.simplecoding.org/script.php?action=delete_object&object_id=1">Удалить</a>

Как видите, ссылка содержит два параметра (action и object_id), значения которых PHP скрипт сможет получить из массива $_GET.

Теперь, мы хотим выполнить удаление объекта с помощью AJAX запроса. Изменять ради него ссылку нет никакой необходимости. Просто назначаем обработчик для события click.
Читать дальше

HTML5: загрузка файлов с помощью Drag & Drop

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

html5 drag&drop upload

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

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

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

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

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

Как показать на Google Maps объекты, находящиеся в заданной области

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

google maps

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

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

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

Будем считать, что заданная область представляет собой окружность, т.е. мы знаем координаты её центра и радиус. А координаты объектов находятся в KML файле (это XML формат, разработанный для описания объектов на Google maps).
Читать дальше

JavaScript XSS: получение данных от facebook и вконтакте

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

facebook vkontakte

О виджетах популярных социальных сетей знают практически все web мастера. Использовать их достаточно просто. В большинстве случаев нужно вставить блок с JavaScript кодом в шаблон страницы.

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

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

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

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

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

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

JavaScript виджет: бесконечная загрузка твитов

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

load on scroll

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

Рассмотрим небольшой практический пример.

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

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

Но на практике возникает несколько интересных моментов.
Читать дальше

Galleria — плагин для создания галерей с картинками

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

galleria

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

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

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

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

jQuery Grid Plugin – FAQ на основе комментариев

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

jqgrid faq

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

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

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

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

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

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

Кстати, если кому-то интересно, в этом блоге опубликовано 7 статей о jqGrid и более 650 комментариев к ним.

Прежде всего, привожу список статей.
Читать дальше

JavaScript и jQuery: перемещение блоков

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

jquery blocks movement

В этот раз я покажу пример небольшого скрипта, позволяющего перемещать HTML блоки на странице.

Когда возникает подобная задача, первое что приходит в голову (по крайней мере мне 😉 ) – использовать готовые плагины. Например, jQuery Sortable. Что ни говори, решение довольно удобное, от пользователя требуется только перетащить объект с помощью мышки.

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

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

Именно такой вариант мы рассмотрим в этой статье.

Посмотреть результат можно на демонстрационной страничке
Читать дальше