.item-data > .price {
display: flex !important;
flex-direction: row-reverse;
justify-content: flex-end;
}
themeButton.value = (themeButton.value === "Темная тема") ? "Светлая тема" : "Темная тема";
<input type="button" value="Темная тема" class="themeButton">
на <button type="button" class="themeButton" data-light-text="Темная тема" data-dark-text="Светлая тема"></button>
.themeButton::before {
content: attr(data-dark-text)
}
body.darkTheme .themeButton::before {
content: attr(data-light-text)
}
const x = 'Здравствуйте, <span class="a612353adjddv__AS" data-target="id_customer">продавец</span>! Мы хотим с Вами заключить <span class="bbasfaAFADFAFV_SD" data-target="id_option">договор</span>. Как Вы на это смотрите, <span id="some_id" class="a612353adjddv__AS" data-target="id_customer">продавец</span>'
let dataTargetValues = []
x.replace(/data-target=([\\"\\'])(.*?)\1/g, current => dataTargetValues.push(current.replace(/data-target=/, '').replace(/["']/g, '')))
console.log(dataTargetValues)
dataTargetValues = Array.from(new Set(dataTargetValues))
.slick-active{ background-color: red; } /* Выбрать все активные слайды */
.slick-slide + .slick-active + .slick-active{ background-color: red; } /* Выбрать второй активный слайд */
:nth-of-type
<li>
. Поэтому это не прокатит. buildQuiz()
const quizContainer = document.getElementById('quiz');
const resultsContainer = document.getElementById('results');
const submitButton = document.getElementById('submit');
const myQuestions = [ { question: "Who invented JavaScript?", answers: { a: "Douglas Crockford", b: "Sheryl Sandberg", c: "Brendan Eich" }, correctAnswer: "c" }, { question: "Who can help us?", answers: { a: "Noone", b: "Specialists", c: "Youself" }, correctAnswer: "b" }, { question: "Which language can you use to write it?", answers: { a: "PHP", b: "Java Script", c: "CSS"}, correctAnswer: "b" } ];
const previousButton = document.getElementById("previous");
const nextButton = document.getElementById("next");
const slides = document.querySelectorAll(".slide");
showSlide
$('.col.img.owl-carousel').owlCarousel({
autoplayHoverPause: true,
nav: true,
navText: true,
dots: true,
autoplay: true,
center: true,
loop: true,
margin: 10,
responsiveClass: true,
responsive: {
0: {
items: 1,
margin: 20
},
370: {
items: 2,
margin: 20
},
800: {
items: 3
},
1000: {
items: 4
}
}
})
// Поместили слайдер в переменную, чтобы потом использовать
var myCarousel = $('.col.img.owl-carousel').owlCarousel({
autoplayHoverPause: true,
nav: true,
navText: true,
dots: true,
autoplay: true,
center: true,
loop: true,
margin: 10,
responsiveClass: true,
items: 1,
responsive: {
0: {
items: 1,
margin: 20
},
370: {
items: 2,
margin: 20
},
800: {
items: 3
},
1000: {
items: 1 // Изменили значение на 1
}
}
})
data-fancybox
$().fancybox({
selector: '.gallery .owl-item:not(.cloned) a'
})
$('.services .item').fancybox({
// После того как попап открылся
afterShow: function(instance, current) {
// Обновляем слайдер
myCarousel.trigger('refresh.owl.carousel')
}
})
document.body.addEventListener('contextmenu', e => {
e.preventDefault();
});
[data-text]{
position: relative;
}
[data-text]::before{
content: attr(data-text);
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
z-index: 1;
pointer-events: none;
text-transform: uppercase;
color: red;
font-weight: 900;
font-size: 50px;
}
[data-text] > *{
position: relative;
z-index: 2;
}
<section id="estate" class="section" data-text="Investment">
...
</section>
span.is-open::after {
display: none;
opacity: 0;
}
<div>
<input type="text" id="test">
<label for="test">Text</label>
</div>
div{
display: flex;
flex-direction: column;
}
label{ order: 1 }
input{ order: 2 }
input:focus + label{ background: red }
<body>
.$(document).ready(function(){
var slinky = $('.js-menu').slinky({
title: true,
resize: true
});
});