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


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

455
9 из 10
Проголосовало: 8




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


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

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

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

Первое что мы делаем это добавляем данный скрипт в верх нашей страницы между тегами: <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 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
  • Winston888 написал:
  • Если бы я не добавлял бесплатные адаптации или скрипты бесплатно я бы наверное не стал бы комментировать ваш материал.
    Последние темы
    Опрос
    403
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 6
    Гостей: 4
    Пользователей: 2
    0
    Сегодня были
    Топ пользователей: