Информационные таблички для uCoz
827материалов
228тем на форуме
3004комментария
6157пользователей

Информационные таблички для uCoz


Описание:

Хотите максимально быстро и эффективно донести до пользователей важную для них информацию? Хотите сделать скрывающий рекламный блок? Тогда Вам помогут информационные таблички на cookie. Данный скрипт так же можно настроить чтоб он выводил информацию в разных временных периодов, все зависит так же от вашей фантазии и креативности.

Установка:

Первое что мы делаем это добавляем данный скрипт в верх нашей страницы между тегами <head></head>:
Код
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">           
           $(document).ready(function(){           
           $("#setCookie").click(function () {           
           $.cookie("popup", "", {expires: 0} );           
           $("#bg_popup").hide();           
           });           
                     
           if ( $.cookie("popup") == null )           
           {           
           setTimeout(function(){           
           $("#bg_popup").show();           
           }, 1000)           
           }           
           else { $("#bg_popup").hide();           
           }           
           });           
           </script>

В то место где вы хотите чтобы выводилась информация ставите код сообщения:
Код
<div id="bg_popup">           
           <div id="popup">           
           <a id="setCookie" class="close" href="#" title="Закрыть" onclick="document.getElementById('bg_popup').style.display='none'; return false;"></a>           
           <div class="wTitle">тут ваш название</div>           
           <div class="wText">тут ваше сообщение</div>           
           </div>           
           </div>

Данный код вставляете в свой CSS:
Код
#bg_popup{           
           display: none;           
           }           

           #popup {           
           border: 1px solid #deb7b7;           
           background-color: #fde9e9;           
           padding: 8px 11px;           
           margin: 0px;           
           color: #281b1b;           
           border-radius: 1px;           
           }           
                     
           .close{           
           background-image: url('http://webo4ka.ru/Ucoz8/gtk-close.png');           
           background-size: 100% 100%;           
           width: 18px;           
           height: 18px;           
           float:right;           
           margin: -2px -7px 0px 0px;           
           opacity: 0.5;}           

           .wTitle {           
           color:#3793cc;           
           font-size:14px;           
           line-height:14px;           
           }           

           .wText {           
           color:#454545;           
           font-size:12px;           
           text-align:justify;           
           }           

           .close:hover {           
           opacity: 1.0;           
           cursor: pointer;           
           }

В самый конец нашей страницы перед тегам </body> вставляем еще один скрипт.
Код
<script src="http://webo4ka.ru/Ucoz8/soc-info.js"></script>

Ну вот и все. информационные таблички установлены.

Разбор кода:

Ну а теперь давайте разберем как же настроить временной период сообщения.

Данный скрипт JS-код:
Код
<script type="text/javascript">           
           $(document).ready(function(){           
           $("#setCookie").click(function () {           
           $.cookie("popup", "", {expires: 0} );           
           $("#bg_popup").hide();           
           });           
                     
           if ( $.cookie("popup") == null )           
           {           
           setTimeout(function(){           
           $("#bg_popup").show();           
           }, 1000)           
           }           
           else { $("#bg_popup").hide();           
           }           
           });           
           </script>
Может выводит информацию как и раз в сутки при закрытии которого сообщение появится вновь спустя 24 часа поминутно и дням.

Данная строка отвечает за время появления сообщения на сайте.
Код
$.cookie("popup", "24house", {expires: 0} );
На данный момент сообщение появится при закрытии через 24 часа. 24house

Если нужно больше, то просто измените в строке значения, например на 3 дня:
Код
$.cookie("popup", "3", {expires: 3} );

Для тех, кому нужно не в днях, а в минутах, то строку $.cookie("popup", "24house", {expires: 0} ); нужно заменить на вот такие три строки:
Код
var date = new Date();           
           date.setTime(date.getTime() + (60 * 1000));           
           $.cookie("popup", "", {expires: date} );

60 * 1000 - это одна минута, 60 * 3000 - это три минуты, ну и так далее.

Также в скрипте есть значение 1000 - это миллисекунды и равно все это 1 секунде. Это время задержки появления сообщения. По нужде меняете и сообщение появится в нужный момент.

ПОСМОТРЕТЬ ДЕМО ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 01.09.2016 в 16:30
Материал просмотрен: 648 раз
Категория материала: Скрипты для uCoz
К материалу оставлен: 1 комментарий

Пожаловаться
Сказать спасибо
Источник

1 комментарий


kiidii
Вадим @kiidii 01.09.2016 18:051
+3
Не плохо, а что на куках сделали - это вообще супер. Спасибо.
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта