Кнопка «Подписаться на блог»
Несколько дней назад у меня появилась кнопка «Подписаться на блог» в конце каждой заметки и в ПВУ на передовице. Странно, что я не догадался до неё раньше. Жмите, не стесняйтесь.
Каких способов подписки вам нехватает? Что работает неправильно?
Да, кстати, я чё-то затупил с Джаваскриптом и не смог сходу сделать так, чтобы попап подписки закрывался только при клике снаружи, он сейчас закрывается при клике где угодно. Как исправить?
Пишите в комментариях.
В Эгею бы добавить.
У тебя стоит обработчик щелчка мышью для закрытия где-нибудь на самом документе? Типа такого:
$(document).click(closePopup);
Значит, нужно не дать событию отработать, если щелчок сделан по самому попапу — остановить пропагацию:
$(’.popup’).click(function (event) {
event.stopPropagation();
});
А чтобы не вешать этот обработчик на каждый свежесозданный попап, можно слушать один раз делегированно:
$(document).on(’click’, ’.popup’, function (event) {
event.stopPropagation();
});
У меня там всё прописано скриптами прям в атрибутах тегов, безо всякого джейквери, олдскульно. И написано this.event.stopPropagation (), но не работает.
Напиши onclick=«event.stopPropagation()».
А почему не this.event.stopPropagation()?
Кажется
<div id=«subscribator» class=«subscribator» onclick=«if (event.target.id) { this.className=’subscribator’}»>
<div class=«subscribator-window»>
Невероятно, но это сработало. Но почему? :-)
Потому что у элемента (this) нет свойства event. Объект события в onclick передаётся в волшебной переменной event.
В развернутой форме (на чистом яваскрипте) это бы выглядело так:
element.addEventListener(’click’, function (event) {
// `this` тут — это element
event.stopPropagation();
});
По сути, `onclick` — декларативная форма этого кода.
<div tabindex=«2» class=«popup»></div>
<script>
$(’.popup’).focus();
$(’.popup’).on(’blur’, function() {
close();
})
</script>
Примерная идея реализации clickoutside. Если внутри нет элементов генерирующих focus/blur, больше вообще ничего не нужно. Для ссылок, как в вашем случае может быть будет чуть сложнее.
Вот смотрю я то, как код выглядит в комментариях, и надпись «ХТМЛ не работает» расстраивает всё больше :-)
Пример Сергея Никитина (если это nop@, привет) работает благодаря тому, что id есть только у элемента subscribator. Правильнее написать так: if (event.target === this) { this.className=’subscribator’ }
И stopPropagation с такой штукой уже не надо.
Так и сделал, спасибо.
Кхм-кхм.
Остров по-русски называется «Ява».
Мотоцикл — «Ява».
Сигареты — «Ява».
Значит, и язык — «Яваскрипт» и «Ява». Не «жаба».
Сейчас, подождите, я очки сниму.
Не хватает подписки по электронной почте, чтобы туда приходили уведомления о новых заметках
Денис Обухов, чтобы получать письма о новых заметках этого блога я использую рецепт IFTTT.
Илья Бирман, кажется, IFTTT рецепты можно вставлять на сайт — возможно, это хороший способ сделать подписку на блог через email.
По правилам транскрибирования «j» — это именно [ʤ], так что Java [’ʤaːvə]. Стоит ли смешивать русский язык и технические термины? Хотя, я предвосхищаю ваш с Ильей ответ по строчке из поста — «…в конце каждой заметки и в ПВУ на передовице».
А почему курсор-поинтер на кнопках стоит?
А я вот не пойму, зачем столько плясок с разными соц. сервисами вместо простой и более эффективной подписки по e-mail?
Как это лучше всего организовать?
Роман, +1. Было бы круто получать дайджест статей Ильи за неделю по почте, но такого варианта почему-то нет. Технические ограничения?
Вообще говоря, за stopPropagation нужно выгонять из профессии. На небольшом сайте это проблем не доставит, но в более-менее сложном приложении это несет боль и страдания.
Было бы намного полезнее, если бы вы объяснили, почему так, и как надо.
Илья, есть простой вариант и посложнее.
Простой — прогнать RSS через FeedBurner и получить от них e-mail форму для подписки.
Минусы — не понятно, сколько ещё будет жить FeedBurner, такая рассылка может отвалиться или при рассинхронизации RSS прислать дайджест с 20 (или сколько там в RSS) не новыми материалами.
Сложнее — зарегистрироваться в MailChimp и:
либо настроить автоотправку (возможно, платно)
либо посылать рассылку вручную (до 2000 подписчиков — бесплатно).
Вариант с ручными письмами даст лучше открываемость и кликабельность писем. Ну и, если сравнивать, с соц. сетями вероятность попадания письма в «зону видимости» значительно выше, чем у апдейта соц сети (особенно если в соц. сеть идёт автотрансляция)
Вот, например, цифры по моему проекту Roma.net.ua (рассылка раз в месяц, посты в соц. сети сразу после выхода материалов) — http://note.io/1r1Pqcf
Отвечу за Дмитрия:
Все дело в том, что событие может использоваться не только для закрытия окна. Например, можно слушать клики на <body> и закрывать выпадающие меню. Если в вашем варианте в попапе будет dropdown, то он закрыться не сможет, событие не дойдет до своего слушателя. Поэтому правильно не останавливать ход события, а проверять в слушателе event.target.
А в этой ситуации лучше всего сделать по-другому: оформить серую подложку отдельным элементом.
<div class=«subscribator-backdrop»></div>
<div class=«subscribator»></div>
Попап будет закрываться по клику на subscribator-backdrop, а клики внутри попапа ничему не угрожают
Будет неправильно делать элемент gui, не обращая при этом внимания на удобство использования, поэтому хорошо бы добавить такую вещь:
document.addEventListener(’keydown’, function (e) {
if (e.keyCode == 27) {
var pops = document.querySelectorAll(’.subscribator-visible’);
for(i=pops.length-1; i >= 0; i—) {
pops[i].classList.remove(’subscribator-visible’);
}
}
});
Ненавязчивый JavaScript, если старый браузер, функция просто прервется, если попап уже/еще закрыт, не будет обращения к элементу, не нужно вещать отдельно на каждый попап.
Код с подсветкой: http://paste.ubuntu.com/8020091/
Готово, только проще и железобетоннее :-)
Подписался бы на рассылку по электронной почте. Это проще РСС на одну сотую процента.
Илья, я бы даже сказал «в лоб»...
Илья, но я удивлен, на самом деле, что с самого начала этого не появилось, вместе с кнопкой и поп-ап’ом, как так? :)
Я сделал на скорую руку и выкатил, в расчёте на то, что читатели помогут сделать нормально. Расчёт оправдался.