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

4 февраля 2016 Антон Кулешов 1344 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
Читайте далее

Файл «robots.txt» – версия Яндекс

3 июля 2015 ti1schweiger

Всем добра! Возможно, сегодня я не скажу ничего нового, и вся изложенная ниже информация находится в свободном доступе в Помощи Яндекса, но, как показывает практика, очень мало людей ею пользуется, да и вообще задумывается о её существовании. Поэтому, дабы развеять сумрак над тем, что же все-таки должно быть написано в robots.txt, я приведу здесь материалы из Помощи Яндекса со своими личными комментариями.

Подписываем фотографии

1 сентября 2015 Антон Кулешов

Фотографии на сайте делают его живым и интересным, порой бывает не лишним подписать места, события, а то и людей изображенных на фото. В свое время, опция отмечания друзей на снимках была невероятно популярно в социальных сетях. Если блог о путешествиях, кулинарный или любой другой, где изображений много и они собраны в галереи, то подписанные снимки будут выглядеть выигрышнее безымянных. Я же предлагаю для этих целей воспользоваться jQuery плагином taggd – скриптом, позволяющим сделать всплывающие подсказки для подписи фотографий.

Прячем загрузку за прелоадер

9 июня 2015 Антон Кулешов

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