var d = $0.toDataURL("image/png"); // $0 - ссылка на элемент canvas из-за того, что кликнули на него мышкой. можете заменить $0 на поиск элемента по id. document.getElementById('answer')
var w = window.open('about:blank','image from canvas');
w.document.write("<img src='"+d+"' alt='from canvas'/>");реально стало интересно как это делается
var elem = document.getElementById('965312')
console.log(elem.dataset.id)const animItems = // Элементы для анимации. Можете задать им общий класс и найти сразу все, можете сложить разные(с разными классами) элементы в один массив
// ..code
animItems.forEach(function(item){item.classList.add('_active')})document.addEventListener("DOMContentLoaded", onDOMReady);
function onDOMReady() {
window.addEventListener('scroll', onWindowScroll)
var menu = document.getElementById('menu');
function onWindowScroll() {
if(window.document.scrollingElement.scrollTop > 150){
menu.classList.add("fixed");
}
else {
menu.classList.remove("fixed")
}
}
}subnav.addEventListener('scroll', function(evt){
if(Math.ceil(this.scrollTop + this.clientHeight) >= this.scrollHeight){ // this в данном случае будет элемент subnav. на всякий случай округляем немного вверх.
// Доскролили вниз, можно добавить класс чтобы переключить состояние указателя
} else {
// недоскролили вниз // можно снять класс чтобы переключить обратно
}
})services__title, about-us___title.title.services__title - основные стили в title, в services__title стили, которые присущи заголовку только в этом блоке. Например, внешние отступы.
// тут let $activatedFilters = document.querySelectorAll(".chose");
const wrapper = ()=>{
// или тут let $activatedFilters = document.querySelectorAll(".chose");
a.addEventListener("click", () => {
/*-- делает что-то --*/
}
b.addEventListener("click", () => {
/*-- делает что-то --*/
}
}.chose то вынесение переменной в вышестоящую область видимости даст не корректный результат, так как в переменную сохранится тот набор элементов, который будет в DOM на момент инициализации переменной, а не вызова функций-обработчиков событий..chose, скажем в переменную choseCont. И тогда в функциях обработчках уже обращаться не к document.querySelectorAll а к choseCont.querySelectorAll, что значительно ускорит поиск по DOM, так как будем искать не во всём дереве, а лишь в определённом элементе.$activatedFilters правильнее использовать const а не let. Если только Вы где-то ниже в коде не переопределяете саму переменную $activatedFilters
pointer-events: none чтобы можно было дальше взаимодействовать с элементами.
var source = [
{
"id": 8,
"name": "Опер3",
"value": 88,
"date": "2021-01-22"
},
{
"id": 5,
"name": "Опер2",
"value": 452,
"date": "2021-01-12"
},
{
"id": 50,
"name": "Опер20",
"value": 4523,
"date": "2021-01-22"
}
]
var groupByDate = {};
source.forEach(function(item){
if(groupByDate[item.date]){
groupByDate[item.date].push(item)
} else {
groupByDate[item.date] = [item]
}
})*,*::after,*::before {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 100%;
}
.navbar {
width: 100%;
display: flex;
justify-content: space-between;
background-color: lavenderblush;
padding: 1%;
}
.navbar__block {
display: flex;
}
.navbar__link {
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
color: black;
padding: 5px;
}
.navbar__link:hover {
background-color: rgb(216, 216, 216);
border-radius: 10%;
}
.navbar__button {
width: 100px;
height: 30px;
background-color: greenyellow;
border: none;
border-radius: 20px;
outline: none;
}
.navbar__button:hover {
cursor: pointer;
}
.burger {
display: none;
opacity: 0; // определяем начальное состояние как прозрачное
transform: translateY(-10px); // смещённое вверх на 10 пикселей.
}
.burger-img {
max-width: 40px;
padding: 2px;
}
.burger__links {
display: none;
}
.burger-img__cancel {
max-width: 35px;
}
.burger__ul {
width: 100%;
height: 100%;
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
align-items: center;
position: absolute;
background-color: grey;
top: 40px;
left: 0;
z-index: 1;
transition: all 2s ease 0s;
}
@media (max-width: 587px) {
.navbar__block > a {
display: none;
}
.burger {
display: block;
animation-name: showBurger; // навешиваем анимацию
animation-duration: 0.2s; // определяем её длительность
animation-fill-mode: forwards; // и говорим что в конце анимации элемент должен остаться в конечном состоянии анимации
}
.burger__ul li {
font-size: 1.5em;
list-style: none;
background: rgb(179, 179, 179);
padding: 5px;
margin: 5px 0;
width: 90%;
text-align: center;
}
}
// Сама анимация.
@keyframes showBurger {
// Сразу описываем конечное состояние, так как начальное мы уже определили выше.
100% {
opacity: 1; // Делаем снова непрозрачным.
transform: translateY(0) // И возвращаем на место
}
}var news = document.querySelectorAll('[id^="news-"]') // все элементы, у которых id начинается с 'news-'
var summ = 0;
news.forEach(function(item){ // перебираем все элементы
summ += Number(item.textContent) // Берём текстовый контент элемент, преобразуем в число и складываем с summ
})index.html
/styles
└ style.css
/images
└ header-bg.jpg../images/header-bg.jpg