jQuery: проверка плагина на существование

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

if (jQuery().pluginName) {
	// ваш код
}

Добавление к изображению zoom-эффекта при наведении с помощью CSS и jQuery

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

jQuery: метод hasClass

Метод .hasClass() в jQuery возвращает true, если у блока есть искомый класс и false в противном случае.

Плавный скроллинг к блоку на jQuery

Реализация довольно проста. При клике по ссылке в навигации блокируем стандартное действие браузера, берем атрибут href, ищем блок с этим ID и вычисляем высоту от начала страницы. Добавляем плавную анимацию. Ниже пример HTML и jQuery кода.

Плавный скроллинг к блоку на jQuery

jQuery: текущий год на сайте

На многих сайтах в футере компании размещают надпись вида: Company Ⓒ 2010 - 2019. Естественно, текущий год обновляется не сразу или вовсе не обновляется.
Для решения этой проблемы можно использовить jQuery.

jQuery: функция detach

Функция .detach() удаляет все выбранные элементы из DOM (указанный элемент и всех его потомков). В отличие от .remove() jQuery не удаляет информацию о элементе и поэтому он может быть восстановлен.

Перезагрузка страницы при помощи JavaScript

Есть несколько способов, чтобы обновить текущую страницу при помощи JS:

<input type="button" value="Перезагрузить страницу" onClick="window.location.reload()">
<input type="button" value="Перезагрузить страницу" onClick="history.go(0)">
<input type="button" value="Перезагрузить страницу" onClick="window.location.href=window.location.href">

 

JavaScript: отметить все checkbox

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

JavaScript: отметить все checkbox

JavaScript: массив в случайном порядке

Простое решение рандомного массива в JavaScript.

var array = [1,2,3,4,5];
array.sort(function() { return 0.5 - Math.random() });

API Google Maps: перетаскивание маркета

Для перетаскивания маркера необходимо добавить атрибут draggable:true.

Пример кода google-карты с перетаскиваемым маркером:

<script>
var placemark = new google.maps.LatLng(45.038558,38.972702);
var marker;
var map;

function initialize() {
	var mapOptions = {
		zoom: 11,
		center: placemark
	};

	map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

	marker = new google.maps.Marker({
		map:map,
		draggable:true, //перетаскивание маркера
		animation: google.maps.Animation.DROP, //анимация маркера
		position: placemark
	});

	google.maps.event.addListener(marker, 'drag', function(event) {
		var lat = marker.getPosition().lat();
		var lng = marker.getPosition().lng();
		console.log(lat + ',' + lng); //выводим в консоль браузера новые координаты
	});
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

Google Maps возвращает координаты NaN,NaN

В большинстве случаев API Google.Maps возвращает NaN,NaN, т.к. вы передаете строку.

Необходимо разделить ее на пару значений.

var coordinate = $k('#input_hidden_coordinate').val().split(',');
var latlng = new google.maps.LatLng(coordinate[0],coordinate[1]);
console.log(latlng);

jQuery: загрузка скрипта

Функция jQuery.getScript загружает и исполняет js-файл, используя метод GET.

Пример кода:

$.getScript("http://url.ru/script.js", function() {
  // здесь ваш код
});