Кнопка «Подписаться на блог»

Несколько дней назад у меня появилась кнопка «Подписаться на блог» в конце каждой заметки и в ПВУ на передовице. Странно, что я не догадался до неё раньше. Жмите, не стесняйтесь.

Каких способов подписки вам нехватает? Что работает неправильно?

Да, кстати, я чё-то затупил с Джаваскриптом и не смог сходу сделать так, чтобы попап подписки закрывался только при клике снаружи, он сейчас закрывается при клике где угодно. Как исправить?

Пишите в комментариях.

Подписаться на блог
Отправить
Дальше
23 комментария
liopo 2014

В Эгею бы добавить.

Вадим Бородин 2014

У тебя стоит обработчик щелчка мышью для закрытия где-нибудь на самом документе? Типа такого:

$(document).click(closePopup);

Значит, нужно не дать событию отработать, если щелчок сделан по самому попапу — остановить пропагацию:

$(’.popup’).click(function (event) {
event.stopPropagation();
});

А чтобы не вешать этот обработчик на каждый свежесозданный попап, можно слушать один раз делегированно:

$(document).on(’click’, ’.popup’, function (event) {
event.stopPropagation();
});

Илья Бирман 2014

У меня там всё прописано скриптами прям в атрибутах тегов, безо всякого джейквери, олдскульно. И написано this.event.stopPropagation (), но не работает.

Артём Поликарпов 2014

Напиши onclick=«event.stopPropagation()».

Илья Бирман 2014

А почему не this.event.stopPropagation()?

Сергей Никитин 2014

Кажется
<div id=«subscribator» class=«subscribator» onclick=«if (event.target.id) { this.className=’subscribator’}»>
<div class=«subscribator-window»>

Илья Бирман 2014

Невероятно, но это сработало. Но почему? :-)

Артём Поликарпов 2014

А почему не this.event.stopPropagation()?

Потому что у элемента (this) нет свойства event. Объект события в onclick передаётся в волшебной переменной event.

Вадим Бородин 2014

В развернутой форме (на чистом яваскрипте) это бы выглядело так:

element.addEventListener(’click’, function (event) {
// `this` тут — это element
event.stopPropagation();
});

По сути, `onclick` — декларативная форма этого кода.

Алексей Елисеев 2014

<div tabindex=«2» class=«popup»></div>
<script>
$(’.popup’).focus();
$(’.popup’).on(’blur’, function() {
close();
})
</script>

Примерная идея реализации clickoutside. Если внутри нет элементов генерирующих focus/blur, больше вообще ничего не нужно. Для ссылок, как в вашем случае может быть будет чуть сложнее.

Вадим Бородин 2014

Вот смотрю я то, как код выглядит в комментариях, и надпись «ХТМЛ не работает» расстраивает всё больше :-)

Юрий Петров 2014

Пример Сергея Никитина (если это nop@, привет) работает благодаря тому, что id есть только у элемента subscribator. Правильнее написать так: if (event.target === this) { this.className=’subscribator’ }
И stopPropagation с такой штукой уже не надо.

Илья Бирман 2014

Так и сделал, спасибо.

Артём Горбунов 2014

Кхм-кхм.

Остров по-русски называется «Ява».

Мотоцикл — «Ява».

Сигареты — «Ява».

Значит, и язык — «Яваскрипт» и «Ява». Не «жаба».

Сейчас, подождите, я очки сниму.

Денис Обухов 2014

Не хватает подписки по электронной почте, чтобы туда приходили уведомления о новых заметках

Иван Бессарабов 2014

Денис Обухов, чтобы получать письма о новых заметках этого блога я использую рецепт IFTTT.

Илья Бирман, кажется, IFTTT рецепты можно вставлять на сайт — возможно, это хороший способ сделать подписку на блог через email.

Антон Шувалов 2014

по-русски называется

По правилам транскрибирования «j» — это именно [ʤ], так что Java [’ʤaːvə]. Стоит ли смешивать русский язык и технические термины? Хотя, я предвосхищаю ваш с Ильей ответ по строчке из поста — «…в конце каждой заметки и в ПВУ на передовице».

Андрей 2014

А почему курсор-поинтер на кнопках стоит?

Роман Рыбальченко 2014

А я вот не пойму, зачем столько плясок с разными соц. сервисами вместо простой и более эффективной подписки по e-mail?

Илья Бирман 2014

Как это лучше всего организовать?

Олег 2014

Роман, +1. Было бы круто получать дайджест статей Ильи за неделю по почте, но такого варианта почему-то нет. Технические ограничения?

Дмитрий Шимкин 2014

Вообще говоря, за stopPropagation нужно выгонять из профессии. На небольшом сайте это проблем не доставит, но в более-менее сложном приложении это несет боль и страдания.

Илья Бирман 2014

Было бы намного полезнее, если бы вы объяснили, почему так, и как надо.

Роман Рыбальченко 2014

Илья, есть простой вариант и посложнее.

Простой — прогнать RSS через FeedBurner и получить от них e-mail форму для подписки.
Минусы — не понятно, сколько ещё будет жить FeedBurner, такая рассылка может отвалиться или при рассинхронизации RSS прислать дайджест с 20 (или сколько там в RSS) не новыми материалами.

Сложнее — зарегистрироваться в MailChimp и:
либо настроить автоотправку (возможно, платно)
либо посылать рассылку вручную (до 2000 подписчиков — бесплатно).

Вариант с ручными письмами даст лучше открываемость и кликабельность писем. Ну и, если сравнивать, с соц. сетями вероятность попадания письма в «зону видимости» значительно выше, чем у апдейта соц сети (особенно если в соц. сеть идёт автотрансляция)

Вот, например, цифры по моему проекту Roma.net.ua (рассылка раз в месяц, посты в соц. сети сразу после выхода материалов) — http://note.io/1r1Pqcf

Борис Сердюк 2014

Отвечу за Дмитрия:
Все дело в том, что событие может использоваться не только для закрытия окна. Например, можно слушать клики на <body>  и закрывать выпадающие меню. Если в вашем варианте в попапе будет dropdown, то он закрыться не сможет, событие не дойдет до своего слушателя. Поэтому правильно не останавливать ход события, а проверять в слушателе event.target.

А в этой ситуации лучше всего сделать по-другому: оформить серую подложку отдельным элементом.
<div class=«subscribator-backdrop»></div>
<div class=«subscribator»></div>
Попап будет закрываться по клику на subscribator-backdrop, а клики внутри попапа ничему не угрожают

Фил Барановский 2014

Будет неправильно делать элемент 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/

Илья Бирман 2014

Готово, только проще и железобетоннее :-)

Сергей Тиньков 2014

Подписался бы на рассылку по электронной почте. Это проще РСС на одну сотую процента.

Фил Барановский 2014

Илья, я бы даже сказал «в лоб»...

Фил Барановский 2014

Илья, но я удивлен, на самом деле, что с самого начала этого не появилось, вместе с кнопкой и поп-ап’ом, как так? :)

Илья Бирман 2014

Я сделал на скорую руку и выкатил, в расчёте на то, что читатели помогут сделать нормально. Расчёт оправдался.

Мои книги