Web Мастерская
Контакт
  • Dolphin
    Dolphin
    Администратор

Web Мастерская»Блог

Сообщество Web Мастеров. Тут собрано всё, чтобы написать свой первый сайт, запустить его в Интернет и поддерживать его в течении всей его работы.
Поиск блогов...

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

CSS HTML JavaScript Библиотека JS
Для одной своей идеи, использовал карусель фотографий, взятую из интернета и переписанную под себя. Выложу, как было у меня. Карусель использует библиотеку 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) пишите свой....
Реклама