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


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

580
9.2 из 10
Проголосовало: 11




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


Всем доброго времени суток друзья!

Решил поделится скриптом. Смысл данного скрипта очень прост - данный скрипт выводит ту или иную информацию в виде разноцветных таблиц на сайте , которую вы друзья захотите донести до своих пользователей. данный скрипт легко приспособить и под другие действия . Например можно выводить информеры , рекламные посты и т.д да что угодно. Как говорится на что хватит вашей друзья фантазии. Данный скрипт так же можно настроить чтоб он выводил информацию в разных временных периодов, все зависит так же от вашей фантазии. Данный скрипт я нашел в сети и не являюсь его автором, выглядел он весьма иначе. Я просто его переделал.

Ну вот и сам скрипт.

Первое что мы делаем это добавляем данный скрипт в верх нашей страницы между тегами: <head></head>

JS-код:

Код

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>


далее так же между тегами: <head></head>
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>


Сделали!? Идем дальше и устанавливаем сам код с помощью которого и будет все выводится. В любое место где вы хотите чтоб выводилась информация.

HTML-код:
Код

<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>
вставляем еще один скрипт.

JS-код:

Код

<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 секунде. Это время задержки появления сообщения. По нужде меняете и сообщение появится в нужный момент.
Вот и все)
Автор публикации: Загрузка
Загрузка
kotx126, это его n материал
  • Всего комментариев: 1

Вовчик
0
Вовчик написал: Написано 16 Июля 2016 в 08:39
Комментарий №1
как раз недавно спрашивали про таблички такие на куках))

Скрипт хороший!

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2111
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • LeKcUs написал:
  • Да понятное дело что можно еще кучей вариантов вывести ну данный вариант вывода используеться если у Вас есть уже офрмление <a href а Вы хотите что то новое по этому есть такой вариант <span и только...

    dry
  • Marishka написал:
  • Тоже нефига не поняли wink ... В любой элемент можно вставить onclick и в нем все прописать. (Window.open, location и т.д)
  • LeKcUs написал:
  • biggrin biggrin biggrin biggrin
    Да все очень просто теперь можно ставить место ссылок стандартных типа вот таких
    Код
    <a href="/load/" rel="v:url" property="v:title">Раздел uCoz</a>


    вот такие новые (через span).

    Код
    <span class="rotate greentext" onclick="InWin('/load/')">Раздел uCoz</span>


    Не всем нужно но пригодиться комуто! Мне нужно было вот и решил поделиться! dry
  • Вовчик написал:
  • что-то я нефига не понял
  • LeKcUs написал:
  • В самый конец просто добавьте вот такие теги... И у Вас не будет больше возникать вопросов! cry

    <!-- </popup> -->$POWERED_BY$<!-- <popup> -->
    Последние темы
    Опрос
    424
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 4
    Гостей: 3
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: