xandeadx.ru Блог музицирующего веб-девелопера

JavascriptВывести карту из конструктора Яндекс.Карт в jQuery UI Dialog

Опубликовано в

Пример вывода карты, созданной в конструкторе Яндекс.Карт в jQuery UI Dialog:

$('<div id="map"></div>').dialog({
  open: function() {
    var mapScript = document.createElement('script');
    mapScript.src = 'https://api-maps.yandex.ru/services/constructor/1.0/js/?sid=...&lang=ru_RU&sourceType=constructor&scroll=true';
    this.appendChild(mapScript);
  },
  close: function() {
    $(this).remove();
  },
  title: 'Карта',
  width: 500,
  height: 400,
  modal: true
});

JavascriptУзнать с помощью API Яндекс.Карт входит ли адрес в пределы МКАДа

Опубликовано в
// Координаты МКАД. Данные лежат здесь - http://pastebin.com/raw.php?i=DKgMrxqF
var mkadCoordinates = ...;
 
// Проверяемый адрес
var address = 'Москва, Кремль';
 
// Создаём полигон в границах МКАД
var mkadPolygon = new ymaps.Polygon(mkadCoordinates, {}, {visible: false});
map.geoObjects.add(mkadPolygon);
 
// Геокодируем проверяемый адрес
ymaps.geocode(address).then(function (result) {
  var addressCoordinates = result.geoObjects.get(0).geometry.getCoordinates();
 
  // Проверяем входят ли координаты адреса в область МКАДа

Javascriptenquire.js — работа с медиа-выражениями в javascript

Опубликовано в

enquire.js — это небольшая (2.2kb) javascript библиотека позволяющая детектить медиа-выражения. Библиотека не зависит от jQuery и других либ. Работает в браузерах с поддержкой matchMedia.

Пример использования — при размере экрана браузера меньше 980px нужно переместить блок из шапки в сайдбар:

enquire.register('screen and (max-width: 980px)', {
  // Вызывается, когда медиа-выражение начинает удовлетворять правилу
  match: function() {

JavascriptВидео курс по основам JavaScript на русском

Опубликовано в

Крайне удачный курс по Javascript от Hexlet:

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

  1. Введение. О Курсе. Числа.
  2. Строки. Объекты. Прототипы.
  3. Функции. Замыкания.

JavascriptScrollToFixed — jQuery плагин для фиксации блоков при пропадании их из зоны видимости

Опубликовано в

Популярный кейс в последнее время — фиксация меню при скролинге (демо).

jQuery плагин ScrollToFixed позволяет добиться такого поведения. Весит в сжатом виде ~6kb, будет работать с jQuery 1.4.4 (актуально для Drupal 7), не требует дополнительной разметки, позволяет указать размер верхнего отступа и другие опции отображения.

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

<script src="jquery.js"></script>
<script src="jquery-scrolltofixed-min.js"></script>

JavascriptПроложить маршрут на Яндекс.Картах с помощью API

Опубликовано в

Пример отображения на карте маршрута от Белорусского вокзала до Лефортово:

ymaps.route(['Москва, Белорусский вокзал', 'Москва, Лефортово'], {mapStateAutoApply:true}).then(
  function(route) {
    map.geoObjects.add(route);
    alert('Длина маршрута = ' + route.getHumanLength());
  },
  function(error) {
    alert('Невозможно построить маршрут');
  }
);

JavascriptАвтоматическое масштабирование и центрирование гугло-карты для показа всех маркеров

Опубликовано в

Дано — гугло-карта с каким-то количеством маркеров.

Задача — автоматически смасштабировать и отцентрировать карту таким образом, чтобы было видно все маркеры.

Решение — использовать класс LatLngBounds, позволяющий определять область на карте:

JavascriptОчередь событий в jQuery

Опубликовано в

Дано — страница с неизвестным количеством кнопок. На каждую кнопку навешен обработчик onclick, который асинхронно выполняет какую-то функцию:

<input type="button" value="Button 1" />
<input type="button" value="Button 2" />
<input type="button" value="Button 3" />
 
<script>
$(function() {
    $('input').click(function() {
        var $button = $(this);
        $button.attr('disabled', 'disabled');
        setTimeout(function() {
            $button.removeAttr('disabled');
        }, 2000);
    });
});
</script>

Задача — поставить выполнение обработчиков onclick в очередь, т.е. чтобы каждый новый начинал работу только после завершения выполнения предыдущего.

Решение на jQuery.queue():

JavascriptАсинхронный вариант гугло кнопки +1

Опубликовано в

В русской версии мастера генерации кнопки +1, почему то нет опции "asynchronous code", о которой так радостно трубил гугл (пруф). Поэтому правим ручками:

вместо

<script src="https://apis.google.com/js/plusone.js"></script>
<g:plusone></g:plusone>

пишем

<script>
(function() {
  var po = document.createElement('script');
  po.type = 'text/javascript';
  po.async = true;
  po.src = 'https://apis.google.com/js/plusone.js';

JavascriptВключаем поддержку HTML5 атрибута placeholder для устаревших браузеров

Опубликовано в

Плагин jQuery Placeholder эмулирует работу атрибута placeholder в не-HTML5 браузерах.

В отличии от большинства похожих скриптов, плагин не требует лишней разметки и инициализации для каждого поля в отдельности. Для включения достаточно в момент загрузки DOM вызвать функцию $.Placeholder.init();.