jQuery end Page Box для всплывающих сообщений

4 февраля 2016 Антон Кулешов 1338 0

В процессе прокрутки пользователем страницы, часто бывает нужно что-нибудь подсказать ему или показать – для этого существуют всплывающие сообщения при прокрутке. Сейчас на многих ресурсах используются этот вариант, к примеру: для добавления формы обратного звонка, кнопок социальных сетей, просто заметки (а-ля на полях книги), форм подписок, которые появляются при прокрутке страницы, или просто блока рекламы.

Реклама

Плагин jQuery end Page Box добавляет внизу страницы блок с всплывающим сообщением, куда можно поместить как обычный текст, так и HTML форму. На странице демо можно увидеть несколько примеров работы скрипта.

Первым делом подключим CSS стили и сам плагин с jQuery библиотекой между тегами head:

<link href="css/endpage-box.css" type="text/css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="jquery.endpage-box.js" type="text/javascript"></script>

После этого у нас есть два варианта подключения скрипта всплывающих сообщений. Первый - добавить HTML каркас подсказки, главное указать class=endpage-box и вызвать для него метод endpage_box(), с переданными в него настройками:

<div id="custom-div" class="endpage-box">
	<!-- Контент для показа сообщения -->
</div>

<script type="text/javascript">
	$(window).load(function(){

		$("#custom-div").endpage_box({
			animation: "slide"
		});
	});
</script>

Второй способ не требует от нас добавления HTML, мы просто предаём нужный нам контент в параметр content.

Давайте рассмотрим другие параметры, которые мы можем указать при инициализации плагина всплывающих сообщений:

  • animation – вид анимации, при помощи которой будет появляться сообщение (fade, slide);
  • from – в этом параметре мы указываем с какой позиции показывать подсказку (указывается как px так и в процентах);
  • to – аналогично предыдущему параметру, только тут указывается до какого момента отображать;
  • content – этот параметр мы уже рассмотрели выше, но стоит отметить, что сюда можно указывать как текст, так и HTML.
Реклама
Комментариев еще не оставлено
no_avatar
Читайте далее

SMTP сервер для отправки писем с сайта если функция mail не работает

9 апреля 2016 Антон Кулешов

Довольно распространенное явление на просторах бесплатных хостингов – когда не работает функция mail() или работает как-то странно. Что же делать в этом случае? Ответ простой - воспользоваться отправкой писем через SMTP протокол, но для этого нам нужен уже готовый и написанный код. Совсем недавно подключая доменную почту на falbar, я сделал «маленькую выжимку из поисковой выдачи» и не найдя подходящего решения написал собственный класс, который, я думаю, будет полезен не только мне.

Эффект зеркального отражения

7 октября 2015 Антон Кулешов

Недавно я писал об 3D слайдере (ссылка ниже) и для его работы использовался маленький jQuery плагин reflection – этот скрипт позволяет добавить зеркальное отражение у картинки. Это довольно интересное решение, которое стоит добавить в копилку falbar. Полезность скрипта трудно переоценить: да, если вы прикрутили себе слайдер с пятью изображениями, то картинки можно подготовить и заранее в фотошопе, но если мы подгружаем новые картинки динамически или рандомной выборкой из, скажем, трех-четырех тысяч товаров нашего интернет магазина? Да, работа контент-менеджера встанет в копеечку, и скорее всего вы откажетесь от использования эффекта отражения в своем проекте.

Всплывающие окна alertify

5 октября 2015 Антон Кулешов

Скучные JavaScript всплывающие окна – не самый лучший вариант информирования и общения с пользователем. В одной из прошлых статей я рассказывал, как легко и просто можно добавить «Сладкие Оповещения» на сайт, заменив стандартный вид alert-ов. Сегодня мы также рассмотрим хороший самодостаточный JavaScript код всплывающего окна под названием alertify. У него есть ряд преимуществ, которые делают его полезным инструментом в арсенале веб-разработчика.