Скрипт всплывающего сбоку окна с рекламой или сообщением

2012-12-04 | Веб-дизайн

Окно

Этот яваскрипт, работающий на фреймворке jQuery при прокрутке содержимого окна браузера выводящий внизу страницы появляющееся сбоку окошко, является довольно универсальным, поскольку в выводимый скриптом блок можно поместить практически что угодно: контекстную рекламму, тизеры, баннеры, список похожих или популярных записей, а также призыв добавить страницу в закладки или подписаться на обновления блога или сайта.

Необходимым и обязательным условием для работы скрипта является подключенный к сайту фреймворк jQuery, о том как он подключается я вам уже рассказывал ранее.

Скрипт всплывающего сообщения в окне

Принцип работы jQuery скрипта заключается в том, что им отслеживается положение на странице, определенного в его коде, с уникальным id или классом блока. Как только этот блок с содержимым при прокрутке страницы вниз проходит отметку середины окна браузера пользователя, скриптом с левой или правой стороны выводится окошко с тем содержимым или сообщением которое вы желаете показать.

Все настройки положения выдвигающегося окна, его высоты, ширины и т. д. производятся в самом javascript (скрипте) или css стилях назначенных всплывающему блоку.

Код скрипта (javascript)

(function ($) {
    $(function () {
        var $sideroll       = $('#sideroll'), // айди блока который будет появляться
            $watch_block    = $('#content'),  // айди блока положение которого отслеживается

            enabled         = true,
            hide_offset     = 5,
            outer_margin    = 10,
            shown           = false,

            show = function() {
                if(shown) return;
                shown = true;

                $sideroll.stop().animate({right: -hide_offset}, 300);
            },

            hide = function() {
                if(!shown) return;
                shown = false;

                $sideroll.stop().animate({right: -$sideroll.outerWidth()-outer_margin}, 300);
            },

            disable = function(e) {
                e.preventDefault();
                enabled = false;
                hide();
            },

            onscroll = function() {
                if(!enabled) return;

                var viewport_bottom = $(window).scrollTop() + $(window).height(),
                    block_bottom    = $watch_block.offset().top + $watch_block.outerHeight();

                if(viewport_bottom > block_bottom)
                    show()
                else
                    hide();
            };

        $('.roll-close', $sideroll).click(disable);

        $(window).scroll(onscroll).resize(onscroll);
    })
})(jQuery);

HTML код


<script src="/sideroll.js" type="text/javascript"></script>
<div id="sideroll">
<span class="roll-close">X</span>
<h4>Заголовок сообщения</h4>
Текст сообщения, контекстная реклама и прочее...
</div>

Данный html код желательно вставить в самый конец кода страницы перед загрузкой футера, не забудьте указать полный путь до файла скрипта.

CSS стили

#siderol {
position: fixed;
top: expression(document.getElementsByTagName("body")[0].scrollTop + "px");
overflow: hidden;
bottom: 20px; /*Расстояние до нижнего края окна*/
right: -100%; /*Появляется справа, чтобы поменять сторону замените на: left */
width: 240px; /*Ширина выезжающего блока*/
z-index: 99999;
background: #fff;
font-size: 11px;
line-height:1.4em;
border: 1px solid #ebebeb;
border-radius: 7px;
padding: 10px 15px 10px 10px; /*Отступы от краев до текста*/
min-height: 100px;
-webkit-box-shadow: 0 0 16px rgba(0,0,0,0.5);
-moz-box-shadow: 0 0 16px rgba(0,0,0,0.5);
box-shadow: 0 0 16px rgba(0,0,0,0.5);
}
#siderol .roll-close {
display: block;
position: absolute;
width: 15px;
height: 15px;
top: 10px;
left: 10px;
cursor: pointer;
font-weight: bold;
font-size: 15px;
text-shadow: #000 0px 0px 1px;
}
#siderol h4{font-size:18px;margin:0 0 10px;}

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

На момент публикации статьи вы можете посмотреть скрипт в работе прямо на моем блоге, прокрутив любую из страниц вниз, как долго он будет стоять пока не знаю.

Статьи по теме:

Комментарии к записи

RSS

Рекомендую
  1. WEBHOST1 - проверенный недорогой хостинг для сайта с PHP и MYSQL.
  2. LOGASTER - генератор логотипов и фавиконок с поддержкой кириллицы.
  3. QComment - наполнение сайтов комментариями и заработок на отзывах.
Категории

Как создать:

Где найти:

Как заработать:

© 2011-2016 «Сеодиз». Создание сайтов и заработок для начинающих.
Копирование запрещено.