Web Мастерская
Контакт

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    =
...

JS: Метод массива forEach()

JavaScript Функция
Метод forEach() перебирает все элементы массива. В качестве параметра используется функция, которая будет работать с каждыми элементом массива.

Пример:
Выделить
const n = [1, 2, 3, 4, 5]

n.forEach(function(num) {
	alert(num);
});
...

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

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: Остановка текущего аудио плеера, при включении другого

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

Псевдокласс :hover в атрибуте style (CSS | HTML | JS)

CSS HTML JavaScript
Появилась задача изменить стиль элемента при наведении курсора и вернуть прежний стиль, когда курсор увели. Для решения этой задачи существует псевдокласс :hover, при помощи, которого можно решить задачу, но дело в том, что стиль элемента находится в атрибуте style элемента, например:
Выделить
<span style="color: #CCCCCC;">Текст</span>

В него же необходимо вставить :hover, но делать этого конечно нельзя. Необходимо искать другой вариант решения, а вариантом вполне может быть - использование атрибутов событий: onMouseOver и onMouseOut:
  • onMouseOver - Выполняется, при наведении курсора.
  • onMouseOut - Выполняется, при выходи курсора за пределы элемента.

Делаем так:
Выделить
<span style="color: #CCCCCC;" 
    onMouseOver="this.style.color = '#999999';"
    onMouseOut="this.style.color = '#CCCCCC';">
        Текст
</span>

Готово. Задача решена, теперь цвет текста меняется при наведении курсора и возвращается в прежний цвет, когда курсор убегает....

JS: От модального окна дёргается страница

JavaScript
Есть у меня код, что выводит модальное окно, чтобы подтвердить или отклонить действие:
Выделить
document.addEventListener('click', function(unit) {
	var detail = unit.target;

	if (param == 'destruction') {
		if (confirm(confirmProcessDeletion)) { // Модульное окно
			// Код
		};
	};

	// Другие задачи
});

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

Чтобы избавиться от дёргания страницы, внутрь условия param == 'destruction', я добавил: unit.preventDefault();:
Выделить
document.addEventListener('click', function(unit) {
	var detail = unit.target;

	if (param == 'destruction') {
		if (confirm(confirmProcessDeletion)) { // Модульное окно
			// Код
		};

		unit.preventDefault();
	};

	// Другие задачи
});

После чего дёргание исчезло....
Реклама