• Нужно что бы в форме проверялись только поля первого таба?

    @fixeri
    lookingfor2
    if (n == 1 && !validateForm()) return false;

    замените на

    if (n == 1 && currentTab === 0 && !validateForm()) return false;
    Ответ написан
    Комментировать
  • Как сделать проверку в select?

    @fixeri
    <!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    </head>
    <body>
    	<select id="field-one"> </select>
    
    	<select id="field-two"> </select>
    	
    	
    	<script type="text/javascript">
    		"use strict";		
    
    		let select1 = [
    			{
    				id: 0, 
    				text: '1 комната'
    			}, {
    				id: 1,
    				text: '2 комнаты'
    			}, {
    				id: 2,
    				text: '3 комнаты'
    			}, {
    				id: 3,
    				text: '10 комнат'
    			}
    		];
    
    		let select2 = [
    			{
    				id: 0,
    				is: [0, 1, 2],
    				text: '1 гость'
    			}, {
    				id: 1,
    				is: [1, 2],
    				text: '2 гостя'
    			}, {
    				id: 2,
    				is: [2],
    				text: '3 гостя'
    			}, {
    				id: 3,
    				is: [3],
    				text: 'Нет гостей'
    			}
    		];
    
    		let fieldOne = document.getElementById("field-one");
    		let fieldTwo = document.getElementById("field-two");
    
    		createOptions(fieldOne, select1);
    		eventChange.call(fieldOne, fieldTwo);
    
    		fieldOne.addEventListener("change", eventChange.bind(fieldOne, fieldTwo));
    
    		function eventChange(field) {
    			field.textContent = "";
    			let filtered = select2.filter(o => o.is.includes(+this.value));
    			createOptions(field, filtered);
    		}
    
    		
    		function createOptions(field, arrO) {
    			for (let o of arrO) {
    				let option = document.createElement("option");
    				option.textContent = o.text;
    				option.setAttribute("value", o.id);
    				field.append(option);
    			}
    		}
    	</script>
    </body>
    </html>
    Ответ написан
    Комментировать
  • Можно ли сделать код проще на jQuery?

    @fixeri
    <div class="myclass">я текст</div>
    <div class="arrowopen">я стрелка</div>
    <div class="myclass">я текст</div>
    <div class="arrowopen">я стрелка</div>
    <div class="myclass">я текст</div>
    <div class="arrowopen">я стрелка</div>
    <div class="myclass">я текст</div>
    <div class="arrowopen">я стрелка</div>


    $('.arrowopen').click(function () {
      $(this).prev().toggle();
    });
    Ответ написан
    1 комментарий
  • Как добавить цикл события с обновлением коррдинаты из другой функции?

    @fixeri
    <!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<style type="text/css">
    		body {
    		  width:100%;
    		  height:600px;
    		  background-color:#f1f1f1;
    		}
    		.box {
    		  width:400px;
    		  height:400px;
    		  background-color:coral;
    		}
    		.mini {
    		  width:100px;
    		  height:100px;
    		  background-color:green;
    		}
    	</style>
    </head>
    <body>
    	<div class="box">
    	    <div class="mini">
    	    
    	    </div>
    	</div>
    
    	<script type="text/javascript">
    		"use strict";
    
    		let fn = null;
    		let coordsY, coordsX;
    		window.addEventListener("mousemove", (e) => {
    			coordsX = e.clientX;
    			coordsY = e.clientY;
    		});
    
    		document.querySelector(".box").addEventListener("mousedown", function(e) {
    			let el = e.target;
    		    console.log(e.clientY);
    		    
    		    fn = setInterval(function() {
    				elPos(e);
    			}, 1000);
    		    
    		    window.addEventListener("mouseup", () => {
    		    	clearInterval(fn);
    		    });
    		});
    
    		function elPos(e) {
    			console.log(e.target);
    			console.log(coordsX);
    			console.log(coordsY);
    		}
    	</script>
    </body>
    </html>
    Ответ написан
    Комментировать
  • Как менять картинку только по ховеру?

    @fixeri
    У JQuery есть метод hover:
    $(".filter__item").hover(function () {
    	// Первая функция при наведении.
    	let dataImage = $(this).children(".filter__image").attr('data-image');
    	let image = $(this).find(".filter__image img");
    	image.attr("data-src", image.attr("src"));
    	image.attr("src", dataImage);
    }, function() {
    	// Вторая функция при отводе.
    	let image = $(this).find(".filter__image img");
    	image.attr("src", image.attr("data-src"));
    });
    Ответ написан
    1 комментарий
  • Fullscreen on\off?

    @fixeri
    Есть же $(document).toggleFullScreen();
    Ответ написан
  • Асинхронный try, catch в JS?

    @fixeri
    setTimeout(() => {
    		  	try {
    				throw new Error("Whoops!");
    		  	} catch (err) {
    			  console.log('Ошибка' + err);
    			}
    		  }, 1000);
    Ответ написан
    Комментировать
  • Открытие popup при нажатии на любую кнпоку?

    @fixeri
    В чем проблема?
    <!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<style type="text/css">
    		.block {
    			/*display: none;*/
    		}
    	</style>
    </head>
    <body>
    	<div class="block">
    		<button class="exit">EXIT</button>
    		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.</p>
    	</div>
    
    	<script type="text/javascript">
    		"use strict";
    
    		document.querySelector(".exit").addEventListener("click", (e) => {
    			e.target.parentElement.style.display = "none";
    		});
    
    		const openPopupForm = (event) =>{
    			const target = event.target;
    			const keyPress = event.key;
    			event.preventDefault();
    			if (keyPress === "Enter") {
    				document.querySelector(".block").style.display = 'block';
    			}
    	  	};
    
    		document.addEventListener("keydown", openPopupForm);
    	</script>
    </body>
    </html>
    Ответ написан
  • Как сделать, чтобы при нажатии на кнопку ещё, выпадал полный список?

    @fixeri
    <!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<style type="text/css">
    		ul {
    		  list-style: none;
    		}
    		.work-title-category-container {
    		  width: 100%;
    		  flex-wrap: wrap;
    		  display: flex;
    		}
    		.work-title-category-item {
    		  height: auto;
    		  width: 270px;
    		  margin: 20px 8px;
    		}
    		.work-title-category-item li {
    		  padding-left: 8px;
    		  line-height: 30px;
    		  font-size: 17px;
    		  letter-spacing: 0.4px;
    		}
    		.work-title-category-item ul li:last-child {
    		  color: #FF2D63;
    		  cursor: pointer;
    		  font-weight: 600;
    		}
    		.work-title-category-item li a:hover {
    		  color: #FF2D63;
    		}
    
    		.other_li {
    			display: none;
    		}
    	</style>
    </head>
    <body>
    	<div class="work-title-category-container">
    	  <div class="work-title-category-item"> 
    	    <h2>Тексты</h2>
    	    <ul>
    	      <li><a href="#" title="">Сценарии</a></li>
    	      <li><a href="#" title="">Резюме</a></li>
    	      <li><a href="#" title="">Статьи</a></li>
    	      <li><a href="#" title="">Редактирование</a></li>
    	      <li><a href="#" title="">Контент менеджер</a></li>
    	      <li><a href="#" title="">Стихи, сказки, эссе</a></li>
    	      <li><a href="#" title="">Помощь, мануал</a></li>
    	      <span class="other_li">
    	      	<li><a href="#" title="">Создание субтитров</a></li>
             	<li><a href="#" title="">Бизнес-тексты</a></li>
    	      </span>
    	      <li class="local-cat">Ещё..</li>
    	    </ul>
    	  </div>
    	  <div class="work-title-category-item">
    	    <h2>Разработка сайтов</h2>
    	    <ul>
    	      <li><a href="#" title="">Сайты «под ключ»</a></li>
    	      <li><a href="#" title="">Вёрстка</a></li>
    	      <li><a href="#" title="">Доработка сайта</a></li>
    	      <li><a href="#" title="">Адаптивный дизайн</a></li>
    	      <li><a href="#" title="">Домены и хостинги</a></li>
    	      <li><a href="#" title="">Сис. админ. (CMS)</a></li>
    	      <li><a href="#" title="">Тестирование (QA)</a></li>
    	      <span class="other_li">
      			<li><a href="#" title="">Контент-менеджер</a></li>
    		     <li><a href="#" title="">Интернет-магазины</a></li>
    		     <li><a href="#" title="">Флеш-сайт</a></li>
    		     <li><a href="#" title="">PDA сайты</a></li>
    		     <li><a href="#" title="">Копия сайта</a></li>
    		     <li><a href="#" title="">Проектирование</a></li>
    	      </span>
    	      <li class="local-cat">Ещё..</li>
    	    </ul>
    	  </div>
    	</div>
    
    	<script type="text/javascript">
    		"use strict";
    
    		let prev = null;
    		document.body.addEventListener("click", (e) => {
    			let el = e.target;
    			if (!el.classList.contains("local-cat")) return false;
    			let other = el.parentElement.querySelector(".other_li");
    			if (prev === other) {
    				other.style.display = "none";
    				prev = null;
    				return false;
    			}
    			
    			if (prev) prev.style.display = "none";
    			other.style.display = "block";
    			prev = el.parentElement.querySelector(".other_li");
    
    		});
    	</script>
    </body>
    </html>
    Ответ написан
    Комментировать
  • Как передать значение с таблицы в форму обратного звонка?

    @fixeri
    <!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<style type="text/css">
    		.modal {
    			display: none;
    			position: absolute;
    			top: 100px;
    			left: 100px;
    			background-color: lightyellow;
    		}
    	</style>
    </head>
    <body>
    	<div class="modal">
    		name: <input type="text" name="name"><br>
    		email: <input type="text" name="email"><br>
    	</div>
    
    	<table>
    		<tr>
    			<td class="name">Vladimir</td>
    			<td class="email">3x3er@gmail.com</td>
    			<td><a class="cart">Заказать</a></td>
    		</tr>
    		<tr>
    			<td class="name">Petor</td>
    			<td class="email">32x3er@gmail.com</td>
    			<td><a class="cart">Заказать</a></td>
    		</tr>
    		<tr>
    			<td class="name">Kldun</td>
    			<td class="email">11r3er@gmail.com</td>
    			<td><a class="cart">Заказать</a></td>
    		</tr>
    		
    	</table>
    
    	<script type="text/javascript">
    		"use strict";
    
    		let modal = document.querySelector(".modal");
    
    		let table = document.querySelector("table");
    		table.addEventListener("click", (e) => {
    			let item = e.target;
    			if(!item.classList.contains("cart")) return false;
    			let tr = item.parentElement.parentElement;
    			let name = tr.querySelector(".name");
    			let email = tr.querySelector(".email");
    
    			modal.querySelector("input[name='name']").value = name.textContent;
    			modal.querySelector("input[name='email']").value = email.textContent;
    
    			modal.style.display = "block";
    		});
    	</script>
    </body>
    </html>
    Ответ написан
  • Как установить option в selected?

    @fixeri
    <!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<!-- <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script> -->
    </head>
    <body>
    	<select id="select">
    		<option value="view.php?store=1">some1</option>
    		<option value="view.php?store=2">some2</option>
    		<option value="view.php?store=3">some3</option>
    		<option value="view.php?store=4">some4</option>
    	</select>
    	<script type="text/javascript">
    		"use strict";
    
    		let select = document.getElementById("select");
    		
    		if (localStorage.getItem("indexSelected")) {
    			select.options[localStorage.getItem("indexSelected")].selected = true;
    		}
    
    		select.addEventListener("change", function() {
    			localStorage.setItem("indexSelected", this.selectedIndex);
    			window.location.href = this.options[this.selectedIndex].value;
    		});
    	</script>
    </body>
    </html>


    Второй вариант.

    <!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<!-- <script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script> -->
    </head>
    <body>
    	<select id="select">
    		<option value="view.php?store=1">some1</option>
    		<option value="view.php?store=2">some2</option>
    		<option value="view.php?store=3">some3</option>
    		<option value="view.php?store=4">some4</option>
    	</select>
    	<script type="text/javascript">
    		"use strict";
    
    		let select = document.getElementById("select");
    
    		let selectedOption = window.location.href.match(/store=\d+/);
    		let fineded = [...select.querySelectorAll("option")].find((it) => it.value.includes(selectedOption));
    		if (fineded) fineded.selected = true;
    
    		select.addEventListener("change", function() {
    			window.location.href = this.options[this.selectedIndex].value;
    		});
    	</script>
    </body>
    </html>
    Ответ написан
  • Как сделать что бы каждая следующая полоска была больше предыдущей?

    @fixeri
    <!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<style type="text/css">
    		.block {
    			width: 190px;
    			height: 40px;
    			background-color: red;
    			border: 1px solid black;
    		}
    	</style>
    </head>
    <body>
    	<div class="block"></div>
    	<div class="block"></div>
    	<div class="block"></div>
    	<div class="block"></div>
    	<div class="block"></div>
    	<div class="block"></div>
    
    	<script type="text/javascript">
    		"use strict";
    		
    		let blocks = Array.from(document.querySelectorAll(".block"));
    		let widthBlock = getComputedStyle(blocks[0]).width.slice(0, -2);
    		for (let i = 0; i < blocks.length; i++) blocks[i].style.width = +widthBlock + 20 * i + "px";
    	</script>
    </body>
    </html>
    Ответ написан
    1 комментарий
  • Как показать / скрыть независимые блоки с анимацией?

    @fixeri
    <!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<style type="text/css">
    		@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
    
    		body {
    			margin:0;
    			padding:0;
    			font-family: "Montserrat", sans-serif;
    			font-size: 25px;
    		}
    		#backjs {
    		    position: fixed;
    		    height: 100%;
    		    width: 100%;
    			display:flex;
    			flex-direction:column;
    		}
    
    		.inner__block {
    			display: none;
    			background-image: linear-gradient(rgba(17,17,17,0.69),rgba(17,17,17,0.69));
    		    width: 40%;
    		    height: 450px;
    		    margin-left: 50px;
    		    margin-right: 50px;
    		    border-radius: 20px;
    		}
    
    		.inner__block:first-child { display: block; }
    
    		.inner {
    			display: flex;
    			justify-content:center;
    			width:100%;
    
    			margin-bottom:auto;
    		}
    		.heading {
    			margin-top:auto;
    			display:flex;
    			justify-content:center;
    			padding-bottom:15px;
    		}
    	</style>
    	<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.js"></script>
    </head>
    <body>
    	<section id="backjs">
    	<div class="heading"><H1>Heading</H1></div>
    	<div class="inner">
    		<div class="inner__block">1</div>
    		<div class="inner__block">2</div>
    		<div class="inner__block">3</div>
    		<div class="inner__block">4</div>
    		<div class="inner__block">5</div>
    		<div class="inner__block">6</div>
    		<div class="inner__block">7</div>
    		<div class="inner__block">8</div>
    		<div class="inner__block">9</div>
    		<div class="inner__block">10</div>
    	</div>
    	</section>
    
    	<script type="text/javascript">
    		"use strict";
    
    		const selectorNameBl = ".inner__block";
    		const drTime = 1000;
    
    		$(selectorNameBl).on("click", function() {
    			let that = $(this);
    			let next = $(this).next();
    
    			that.fadeOut(drTime, function () {
    				if (next.length !== 0) next.fadeIn(drTime);
    				else $(`${selectorNameBl}:first-child`).fadeIn(drTime);
    			});
    		});
    
    	</script>
    </body>
    </html>
    Ответ написан
    1 комментарий
  • Как разбить длинный текст на несколько сообщений?

    @fixeri
    let str = `Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium.
    `;
    const countSymb = 1000;
    let text = [];
    for (let i = 0; ; i++) { // Делим текст в массив
    	let copy = str.substring(countSymb * i, countSymb * (i + 1));
    	if (!copy) break;
    	text.push(copy);
    }
    console.log(text);
    Ответ написан
    Комментировать
  • Как сделать чтобы слайдер работал правильно?

    @fixeri
    1) Почему стиль transition-duration работает только со второго нажатия по кнопке влево/вправо? Пробовал и в JS пихать, результат тот же. - потому что в стилях не установили значение left: 0;

    <!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<style type="text/css">
    		
    		#wrap
    		{
    		  width: 150px;
    		}
    		#categories
    		{
    			justify-content: center;
    			align-items: center;
    			display: flex;
    			box-shadow: 0px 5px 13px -6px rgba(0,0,0,0.75);
    			background-color: #fff;
    			height: 190px;
    		}
    		#categories .wrap
    		{
    			margin: 0;
    			display: flex;
    			overflow: hidden;
    			justify-content: space-between;
    		}
    
    		.leftArrow,.rightArrow
    		{
    			height: 88px;
    			display: block;
    			padding: 51px 0;
    			cursor: pointer;
    		}
    		.arrow
    		{
    			min-width: 32px;
    			max-width: 100%;
    			color: red;
    		}
    		.leftArrow:hover
    		{
    			position: relative;
    			right: 10px;
    		}
    		.rightArrow:hover
    		{
    			position: relative;
    			right: -10px;
    		}
    		.toLeft
    		{
    			right: 345px;	
    			transition-duration: .25s;
    			transition: right 1s ease-out 0.5s;
    		}
    		.categoryItem
    		{
    			width: 345px;
    			position: relative;
    			padding: 5px;
    			display: flex;
    			align-items: center;
    			border-right: 1px solid #e7e7e7;
    			transition: left 0.5s;
    		  	left: 0;
    		}
    
    		.categoryItem img
    		{
    			width: 170px;
    			height: auto;
    			margin-left: 24px;
    		}
    		.productInfo
    		{
    			font-family: 'Bebas Neue', cursive;
    			margin-left: 5px;
    		}
    		.productInfo .title
    		{
    			font-size: 27px;
    			text-transform: uppercase;
    			width: 110px;
    			line-height: 0.9;
    			color: #afafaf;
    			margin-bottom: 20px;
    		}
    		.goToShop button
    		{
    			background-color: #3cc395;
    			border: none;
    			font-size: 19px;
    			font-weight: bold;
    			font-family: 'Bebas Neue', cursive;
    			color: #fff;
    			padding: 9px 16px;
    			border-radius: 3px;
    			box-shadow: 0px 3px 0px 0px rgba(0,0,0,0.75);
    		}
    		.goToShop button:hover
    		{
    			box-shadow: none;
    			position: relative;
    			top: 3px;
    		}
    	</style>
    </head>
    <body>
    	<div id="categories">
    		<div class="arrow" id="left"><img src="https://png.pngtree.com/png-clipart/20190920/original/pngtree-left-and-right-arrow-icons-png-image_4636456.jpg" alt="" class="leftArrow"></div>
    		<div class="wrap">
    			<div class="categoryItem">
    				<img src="https://stockx.imgix.net/Nike-Air-Force-1-Low-Day-of-the-Dead-2019.png?fit=fill&bg=FFFFFF&w=700&h=500&auto=format,compress&q=90&dpr=2&trim=color&updated_at=1568774633" alt="">
    				<div class="productInfo">
    					<div class="title">branded shoes</div>
    					<div class="goToShop">
    						<button>SHOP</button>
    					</div>
    				</div>
    			</div>
    			<div class="categoryItem">
    				<img src="https://stockx.imgix.net/Nike-Air-Force-1-Low-Day-of-the-Dead-2019.png?fit=fill&bg=FFFFFF&w=700&h=500&auto=format,compress&q=90&dpr=2&trim=color&updated_at=1568774633" alt="">
    				<div class="productInfo">
    					<div class="title">branded shoes</div>
    					<div class="goToShop">
    						<button>SHOP</button>
    					</div>
    				</div>
    			</div>
    			<div class="categoryItem">
    				<img src="https://stockx.imgix.net/Nike-Air-Force-1-Low-Day-of-the-Dead-2019.png?fit=fill&bg=FFFFFF&w=700&h=500&auto=format,compress&q=90&dpr=2&trim=color&updated_at=1568774633" alt="">
    				<div class="productInfo">
    					<div class="title">branded shoes</div>
    					<div class="goToShop">
    						<button>SHOP</button>
    					</div>
    				</div>
    			</div>
    			<div class="categoryItem">
    				<img src="https://stockx.imgix.net/Nike-Air-Force-1-Low-Day-of-the-Dead-2019.png?fit=fill&bg=FFFFFF&w=700&h=500&auto=format,compress&q=90&dpr=2&trim=color&updated_at=1568774633" alt="">
    				<div class="productInfo">
    					<div class="title">branded shoes</div>
    					<div class="goToShop">
    						<button>SHOP</button>
    					</div>
    				</div>
    			</div>
    			<div class="categoryItem">
    				<img src="https://stockx.imgix.net/Nike-Air-Force-1-Low-Day-of-the-Dead-2019.png?fit=fill&bg=FFFFFF&w=700&h=500&auto=format,compress&q=90&dpr=2&trim=color&updated_at=1568774633" alt="">
    				<div class="productInfo">
    					<div class="title">branded shoes</div>
    					<div class="goToShop">
    						<button>SHOP</button>
    					</div>
    				</div>
    			</div>
    			<div class="categoryItem">
    				<img src="https://stockx.imgix.net/Nike-Air-Force-1-Low-Day-of-the-Dead-2019.png?fit=fill&bg=FFFFFF&w=700&h=500&auto=format,compress&q=90&dpr=2&trim=color&updated_at=1568774633" alt="">
    				<div class="productInfo">
    					<div class="title">branded shoes</div>
    					<div class="goToShop">
    						<button>SHOP</button>
    					</div>
    				</div>
    			</div>
    			<div class="categoryItem">
    				<img src="https://stockx.imgix.net/Nike-Air-Force-1-Low-Day-of-the-Dead-2019.png?fit=fill&bg=FFFFFF&w=700&h=500&auto=format,compress&q=90&dpr=2&trim=color&updated_at=1568774633" alt="">
    				<div class="productInfo">
    					<div class="title">branded shoes</div>
    					<div class="goToShop">
    						<button>SHOP</button>
    					</div>
    				</div>
    			</div>
    			<div class="categoryItem">
    				<img src="https://stockx.imgix.net/Nike-Air-Force-1-Low-Day-of-the-Dead-2019.png?fit=fill&bg=FFFFFF&w=700&h=500&auto=format,compress&q=90&dpr=2&trim=color&updated_at=1568774633" alt="">
    				<div class="productInfo">
    					<div class="title">branded shoes</div>
    					<div class="goToShop">
    						<button>SHOP</button>
    					</div>
    				</div>
    			</div>
    			<div class="categoryItem">
    				<img src="https://stockx.imgix.net/Nike-Air-Force-1-Low-Day-of-the-Dead-2019.png?fit=fill&bg=FFFFFF&w=700&h=500&auto=format,compress&q=90&dpr=2&trim=color&updated_at=1568774633" alt="">
    				<div class="productInfo">
    					<div class="title">branded shoes</div>
    					<div class="goToShop">
    						<button>SHOP</button>
    					</div>
    				</div>
    			</div>
    			
    		</div>
    		<div class="arrow" id="right"><img src="https://png.pngtree.com/png-clipart/20190920/original/pngtree-left-and-right-arrow-icons-png-image_4636456.jpg" alt="" class="rightArrow"></div>
    
    	</div>
    
    	<script type="text/javascript">
    		"use strict";
    
    		var left = document.querySelector("#left");
    		var right = document.querySelector("#right");
    		var elements = document.getElementsByClassName("categoryItem");
    		var pos = 0;
    		let coords = elements[0].getBoundingClientRect().width;
    		let max = Math.floor((elements.length * coords) / 2);
    
    
    		left.onclick = function()
    		{
    			if (pos >= 0) return;
    			pos += coords;
    			for (var i = 0; i < elements.length; i++)
    			{	
    				elements[i].style.left = pos+'px';
    			}
    		};
    
    		right.onclick = function()
    		{
    			if (pos <= -max) return;
    			pos -= coords;
    			for (var i = 0; i < elements.length; i++)
    			{
    				elements[i].style.left = pos+'px';	
    			}
    		};
    	</script>
    </body>
    </html>
    Ответ написан
  • Как наложить сверху тега video прозрачную картинку?

    @fixeri
    <!DOCTYPE html>
    <html>
    <head>
    	<title></title>
    	<style type="text/css">
    		.block {
    			position: absolute;
    			opacity: 0;
    			z-index: 999999999;
    		}
    	</style>
    </head>
    <body>
    	<div class="block"></div>
    	<video controls="controls" style="width: 100%;" class="video" src="1.mkv"></video>
    	<script type="text/javascript">
    		"use strict";
    		let video = document.querySelector(".video");
    		const getStyle = window.getComputedStyle;
    		document.querySelector(".block").style = `
    			width: ${getStyle(video).getPropertyValue("width")};
    			height: ${getStyle(video).getPropertyValue("height")};
    		`;
    	</script>
    </body>
    </html>
    Ответ написан
    Комментировать
  • Как в jQuery к переменной добавить дочерний элемент?

    @fixeri
    $('.menu-item__catalog').children("a")
    Ответ написан
    Комментировать
  • Как сделать, чтобы дата атрибут вставлялся через js?

    @fixeri
    "use strict";
            // jquery
            $(".info__item").each((i, item) => $(item).attr("data-index", i));
    
            // js
         //    document.querySelectorAll(".info__item").forEach((el, i) => {
        	// 	el.setAttribute("data-index", i);
        	// });
    Ответ написан
    Комментировать
  • Как подсчитать количество блоков на странице?

    @fixeri
    <div class="row">
    
    <div class="user_1 my_sex"><div> 
    <div class="user_2 my_sex"><div> 
    <div class="user_3 my_sex"><div>
    <div class="user_4 my_sex"><div>
    <div class="user_5 my_sex"><div>
    <div class="user_6 my_sex"><div>
    <div></div>
    <div>hello</div>
    ...
    </div>

    window.onload = function() {
    			window.console.log(Math.floor(document.querySelector(".row").childNodes.length / 2));
    			// Or
    			window.console.log(document.querySelectorAll(".row div").length);
    		}
    Ответ написан
  • Вертикальный Slick slider на весь экран. Как сделать чтобы после слайда показывался футер?

    @fixeri
    Как-то так
    <!DOCTYPE html>
    <html>
    <head>
      <title></title>
      <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
      <style type="text/css">
        .slide { height: 100vh; background: red; border-top: 1px solid blue; }
        .footer { height: 300px; background: orange; }
        #btn { position: fixed; top:0; z-index: 3; left:50%; 
              transform: translateX(-50%); width: 50px; height: 50px;  }
      </style>
    </head>
    <body>
      <button style="display: block;" id="btn">X</button>
      <div class="row">
        <div class="slide"> 1 slide </div>
        <div class="slide"> 2 slide </div>
        <div class="slide"> 3 slide </div>
        <div class="slide"> 4 slide </div>
        <div class="slide"> 5 slide </div>
        <div class="slide footer"> footer </div>
      </div>
      <script type="text/javascript">

    "use strict";
    
        let page = {
          pageYOffset: 0
        };
    
        let coordsElements = Array.from(document.querySelectorAll(".slide"), (item) => item.getBoundingClientRect());
        let elementsLength = coordsElements.length;
        let height = coordsElements[0].height;
        let btn = document.getElementById("btn");
        window.addEventListener("scroll", () => {
          let Y = window.pageYOffset;
          if (page.pageYOffset > window.pageYOffset) {
            page.pageYOffset = window.pageYOffset;
    
            for (let i = elementsLength; i >= 1; i--) {
              if (Y < height * i && Y > height * (i-1)) {
                if (btn.style.display !== "block") btn.style.display = "block";
                return window.scrollTo({ top: height * (i-1), behavior: "auto" });
              }
            }
          } else {
            page.pageYOffset = window.pageYOffset;
    
            for (let i = 1; i <= elementsLength; i++) {
    
                if (Y > height * (i-1) && height * i > Y) {
                  if (Y > height * (elementsLength - 2) && btn.style.display !== "none") {
                    btn.style.display = "none";
                  }
                  return window.scrollTo({ top: height * i, behavior: "auto" });
                }
            }
          }
        });

    </script>
    </body>
    </html>
    Ответ написан
    Комментировать