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)
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 {
// недоскролили вниз // можно снять класс чтобы переключить обратно
}
})
// тут 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
*,*::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 theInputFile = $('input[type="file"]'); // Это не 1 элемент. А jquery коллекция.
theInputFile[0].files = dfiles; // попытка добавить инпут file все переносимые файлы (должна работать)
Destroy slider instance and detach all events listeners, where
deleteInstance - boolean - Set it to false (by default it is true) to not to delete Swiper instance
cleanStyles - boolean - Set it to true (by default it is true) and all custom styles will be removed from slides, wrapper and container. Useful if you need to destroy Swiper and to init again with new options or in different direction
.map
и узнать что вторым аргументом функция-обработчик принимает порядковый номер элемента.var files = {}; // тут хранятся файлы
// ...
files = {}; // сначала очистим массив, так как юзер может перезагрузить файлы n раз
var isSomeFileTooBig = this.files.some(function(file){ return file.size > 10485760 })
if(isSomeFileTooBig) return;
var isSomeFileTooBig = Object.values(this.files).some(function(file){ return file.size > 10485760 })
if(isSomeFileTooBig) return;