Библиотека JS » Web Мастерская

Блог

Web Мастерская

Карусель фотографий

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

jQuery:

var carouselID = 1, change = 8000;

function carouselStart() {
	if ($('div[data-carousel="carousel"]').length < 1) {
		return false;
	};

	$('div[data-carousel="carousel"]').each(function() {
		$(this).removeAttr('data-carousel').attr('id', 'carousel_' + carouselID);
		carousel('#carousel_' + carouselID);
		carouselID++;
	});
};

$(() => {
	carouselStart();
	window.setInterval(carouselStart, 3000);
});

function carousel(carouselID) {
	var $slr, $sls, interval, $selectors, $btns, currentIndex, nextIndex;
	var cycle = index => {
		var $currentSlide, $nextSlide, $currentSelector, $nextSelector;
		nextIndex        = index !== undefined ? index : nextIndex;
		$currentSlide    =

...

Жалоба

Остановка текущего воспроизведения, при включении другого проигрывателя

JavaScript Библиотека JS

Стояла задача: Поставить на паузу аудио проигрыватель, что играет в данный момент, при включении другого проигрывателя. Решение было найдено в интернете, выглядит чистый JS так:

// Остановка текущего аудио плеера, при включении другого
window.addEventListener('play', function(unit) {
    if (window.playing && window.playing != unit.target) {
        window.playing.pause();
    };

    window.playing = unit.target;
}, true); // End: Остановка текущего аудио плеера, при включении другого

jQuery выглядит так:

// Остановка текущего аудио плеера, при включении другого
$('audio').on('play', function() {
	$('audio').not(this).each(function(index, audio) {
		audio.pause();
	});
}); // End: Остановка текущего аудио плеера, при включении другого

Опробовал. При динамическом добавлении проигрывателя, работает тоже....

Жалоба

Как правильно писать функцию в обработчике события?

JavaScript Библиотека JS

Для примера пишем функцию: display, так:

function display(param) {
	/* Code Function */
};

Или так:

var display = function(param) {
	/* Code Function */
};

Теперь пробуем вызывать функцию, при клике на ссылку (class="beginning"):
Первый вариант на jQuery:

$(document).on('click', 'a.beginning', () => {
	display('cover');
});

Первый вариант на чистом JS:

var beginning = document.querySelector('a.beginning');				
beginning.addEventListener('click',  function() {
	display('cover');
});

Или, второй вариант на jQuery:

$(document).on('click', 'a.beginning', display('cover'));

Второй вариант на чистом JS:

var beginning = document.querySelector('a.beginning');				
beginning.addEventListener('click', display('cover'));

Какой из вариантов, по Вашему, будет работать, а какой нет? Работать будет первый вариант, как на jQuery, так и на чистом JS. Именно первый вариант является правильным....

Жалоба

jQuery: Как заменить класс у элемента

Библиотека JS

Для замены класса будем использовать две функции:

removeClass: Удаляет класс или классы, что были указанны.
addClass: Добавляет указанный класс элементу.

Допустим элемент div#taskInfo имеет класс displayNone, который нам необходимо заменить на displayInlineBlock:

<div id="taskInfo" class="displayNone"></div>

Делаем так:

$('#taskInfo').removeClass('displayNone').addClass('displayInlineBlock');

Предварительно стоит проверить наличие класса, что необходимо заменить:

if ($('#taskInfo').hasClass('displayNone')) {
	$('#taskInfo').removeClass('displayNone').addClass('displayInlineBlock');
};

...

Жалоба

jQuery: Как проверить блок на пустоту

Библиотека JS

Появилась необходимость проверить блок на пустоту, то есть есть ли в нём какие либо теги или нет. Ниже, как это можно сделать.

Допустим есть у нас такой блок (Без тегов внутри него):

<div id="blockID"></div>

Его та нам и надо проверить. Для этого используем следующее условие:

if ($('#blockID').html().trim() == '') {
	// Блок пустой | Действие при пустом блоке
}

ID или другой атрибут блока (blockID) пишите свой....

Жалоба