Задать вопрос
Elisseii

Елисей Басенко

Пишу музыку и код.
Лайки

  • Как применить один обработчик событий к множеству элементов, для индивидуальной обработки, не раздувая / дублируя код?

    KorniloFF
    @KorniloFF Куратор тега JavaScript
    Работаю по font-end / JS
    Это элементарная задача на использование объекта события, передаваемого первым аргументом в любую функцию обработчика. У этого события есть свойство - мишень события. Используя его мы делаем следующее:

    <div id=map>
	<div class="bface-slide-1"></div>
	<div class="modal-wrapper modal-1">
		Контент-1
	</div>

	<div class="bface-slide-2"></div>
	<div class="modal-wrapper modal-2">
		Контент-2
	</div>

	<div class="bface-slide-3"></div>
	<div class="modal-wrapper modal-3">
		Контент-3
	</div>
</div>


<script>
	// to hell jQuery!
document.getElementById('map').addEventListener('click', function (e) {
	var t= e.target; // Объект - инициатор события
	t.style.cursor='pointer';
	if(/modal\-wrapper/i.test(t.className)) alert(t.className);
});
</script>


    Пример работы.
    Ответ написан
    Комментировать
    Комментировать

  • Как применить один обработчик событий к множеству элементов, для индивидуальной обработки, не раздувая / дублируя код?

    GeneMoss
    @GeneMoss
    void
    Как-нибудь так:
    <div class="block">
	<div class="block__slide"></div>
	<div class="block__modal">Контент-1</div>
</div>
<div class="block">
	<div class="block__slide"></div>
	<div class="block__modal">Контент-2</div>
</div>
    $("body").on('click', '.block__slide', function(){
	$(this).parent('.block').find('.block__modal')
		.fadeIn("slow")
		.css({display: "flex"});
});
    Ответ написан
    4 комментария
    4 комментария

  • Как задать для rotate центр?

    lastwish
    @lastwish
    Такая точка задаётся с помощью transform-origin: http://jsfiddle.net/j2wLk/
    Ответ написан
    1 комментарий
    1 комментарий

  • Стандартная ФотоГалерея Wordpress (4.8) - как вывести фото в виде списка img тегов на сранице?

    maxxannik
    @maxxannik
    Сайты на WordPress + Интернет магазины WooCommerce
    Спать спать :)

    Хук ссылается на функцию с именем my_gallery_output
    А сама функция имеет имя my_custom_gallery

    Найдите 10 отличий :)
    Ответ написан
    1 комментарий
    1 комментарий

  • Как сделать смягчение скролла в Mozilla Firefox?

    @healqq
    Все решения работают одинаково и делают это плохо.
    event.preventDefault на скролл и изменять положение руками. Если нужно затухание - делать через animationFrame/setInterval.
    Правильнее всего не трогать скролл никогда ( за исключением случаев когда у вас промо сайт с каким-то совсем кастомным скролом, типа перелистывания целых страниц и т.д.). Это только мешает.
    Ответ написан
    2 комментария
    2 комментария

  • Как реализовать параллакс?

    Olivoin
    @Olivoin
    stellar.js
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать такой parallax + svg?

    @Dark19 Автор вопроса
    В общем я отыскал для себя 2 варианта:
    1) это воспользоватся нативным скроллом вот я примерчик быстро наваял codepen.io/dark19/pen/ybboPw , но есть проблемка в том, что я не придумал как задерживать секцию до полного выполнения анимации, может кто знает, то подскажитет;
    2) это воспользоватся готовым решением с помощью плагинов GSAP и ScrollMagic (как мне тут подсказали, но удалили коммент). Вот этим вариантом я и воспользовался. Но нужно хорошо разобраться в документации.
    На jquery мне показалось проще как-то все сделать, но у меня не было там сверхзадач в проекте. Мне нужно было просто заполнять свг линию цветом и по мере её заполнения в некоторых участках анимировать блоки html(тут ещё есть грабли: рисуйте svg как path потому, что потом вы не сможете заполнить его цветом, там нужно будет использовать свойства stroke-dasharray и stroke-dashoffset). Но я все таки воспользовался плагинами, хотя, я думаю, зря, так как я вручную прописывал точки заполнения свг и когда должна произойти анимация, по другому я не знаю как вычислить степень заполнения линии. Вот вам ещё пример GSAP + ScrollMagic правда тут он без эффектов codepen.io/dark19/pen/WjwoWm
    Ответ написан
    Комментировать
    Комментировать

  • Как НЕ дать пользователям скачать изображения сайта?

    kumaxim
    @kumaxim
    Web-программист
    Самый простой способ - не показывать Ваше супер ценное изображение кому-либо вообще. В любом другом случае человек его сможет скачать(читать как "достать из кэша своего браузера").
    Для того чтобы хоть как-то защитить картинки на сайта можете использовать один из спосбов:
    • Наложить водяной знак - легко реализуемо, см. либу image magic
    • Прятать картинку в CSS через background-image
    • Загружать картинку через Angular-директиву
    • Резать картинку на фрагменты 5 х 5 пикселей, собирая ее потом сеткой
    • Смотреть user-agent клиента и, если он пустой или не валидный(какой-то бред, робот, не из списка), отдавать 404 ошибку либо другую картинку, аля "Это изображенние украли с сайта lallalala.com
    • Аналогично пункту выше, только смотрим теперь предварительно установленные пользователю cookie

    Я когда-то реализовывал связку из 3 + 4 способа. У моего клиента был сайт, который в качестве донора постоянно использовали "нехорошие люди". Разумеется был автоматический парсинг контента. Роботы выдергивали ссылки на картинки и использовали их у себя. Трафик у клиента был бешеный, дисковая подсистема сервера это дело не вывозила, из-за чего и были тормоза. Результат такой - 50% парсить его перестали от слова "вообще", 20% адаптировали код под написанную защиту, 30% - банально забили(парсили с битыми ссылками/кривыми картинками), на сколько я понял. Цифры получены на основе моих наблюдений в течении 3-х месяцев после внедрения.

    Этот случай был где-то в 2011 или 2012. Если бы эта же задача мне пришла в 2017, я бы просто наложил на картинки водяные знаки и подключил бы CloudFront от AWS, на чем бы все и закончилось, но в те годы я был юн и неопытен...
    Ответ написан
    Комментировать
    Комментировать