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

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

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

Как проверить видимый или невидимый элемент

JavaScript Библиотека JS
Проверить, виден ли элемент на странице, можно несколькими способами. Видимость элемента определяется не только наличием свойства display: none, но и другими факторами, такими как высота и ширина равные нулю, видимость родителей и многое другое.

Варианты проверки видимости элемента:

Проверка с помощью jQuery


В jQuery есть специальный метод .is(':visible'), который проверяет видимость элемента: 
if ($('#myElement').is(':visible')) {
    console.log('Элемент виден');
} else {
    console.log('Элемент скрыт');
}

Проверка с помощью чистого JavaScript


Можно воспользоваться чистым JavaScript, проверив несколько свойств элемента: 
function isVisible(element) {
    const style = window.getComputedStyle(element);
    return !(style.display === 'none' ||
             style.visibility === 'hidden' ||
             parseFloat(style.opacity) <= 0 ||
             element.offsetWidth === 0 ||
             element.offsetHeight === 0);
}

const el = document.querySelector('#myElement');
if
...

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

Библиотека JS
Проверить, существует ли определенный элемент на странице с помощью jQuery, можно несколькими способами. Наиболее популярны два подхода:

Проверка с помощью .length


Самый распространенный метод — проверить длину выбранного элемента с помощью свойства .length. Если длина больше 0, значит элемент существует. 
if ($('#myBlock').length > 0) {
    alert('Блок существует!');
} else {
    alert('Блок не найден!');
}

Пример:Допустим, у нас есть блок с id myBlock. Если он присутствует на странице, то сообщение будет "Блок существует!". Иначе — "Блок не найден!".

Проверка с помощью оператора is()


Другой способ — использовать метод is(), который возвращает true, если выбранный элемент существует, и false в противном случае. 
if ($('#myBlock').is('*')) {
    alert('Блок существует!');
} else {
    alert('Блок не найден!');
}

Примечание: Метод is('*') проверяет, есть ли хотя бы один элемент в DOM, соответствующий данному селектору.

Прямая проверка наличия элементов


Иногда бывает полезно...

Перевод rows в пиксели на JS и jQuery

JavaScript Библиотека JS
Представим, что есть такой textarea: 
<textarea name="val[text]" rows="12" cols="50" id="text"></textarea>

И необходимо при помощи чистого JavaScript или jQuery получить значение rows="12" и перевести его в пиксели. Как это сделать в этой статье.

Для того чтобы получить значение атрибута rows и конвертировать его в пиксели на jQuery, нужно выполнить несколько шагов:
  1. Получить значение атрибута rows с помощью jQuery.
  2. Преобразовать это значение в пиксели, умножив на среднюю высоту строки.

Пример кода: 
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Пример преобразования rows в пиксели</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <textarea name="val[text]" rows="12" cols="50" id="text"></textarea>

    <script>
        // Получаем значение атрибута rows
        var rowsCount = parseInt($('#text').attr('rows'));

        // Средняя высота строки обычно принимается равной 20 пикселям
        var
...

Как в JS / jQuery сделать неизменную переменную?

JavaScript Библиотека JS
В стандартной JavaScript и jQuery нет понятия «константной» переменной, как в языках программирования, таких как Java или C++. Однако есть несколько способов, которые помогут достичь аналогичного эффекта:

Способ 1: Использовать ключевое слово const


Синтаксис ES6 (ECMAScript 2015) ввёл ключевое слово const, которое позволяет объявлять переменные, которые не могут быть повторно определены: 
const MY_CONSTANT = 'This is a constant';
console.log(MY_CONSTANT); // This is a constant

MY_CONSTANT = 'New Value'; // Будет ошибка: Assignment to constant variable.

Способ 2: Использовать IIFE (Immediately Invoked Function Expression)


Если нужно объявить постоянную переменную в локальном контексте, можно использовать немедленно вызываемую анонимную функцию: 
(function () {
    var CONSTANT_VALUE = 'Some Constant Value';
    console.log(CONSTANT_VALUE); // Some Constant Value
})();

// Попытка доступа извне невозможна:
console.log(CONSTANT_VALUE); // ReferenceError: CONSTANT_VALUE is not defined

С

...

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

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    =
...
Реклама