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

834
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 2118
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • Marishka написал:
  • Можете добавить свои input поля, но сохраняйте их порядок в html для правильного сохранения и вывода.
  • Marishka написал:
  • Новая версия 1.3 (+6 новых станций):
    Установка:
    Демо: Перейти
  • Marishka написал:
  • Доп 8 станций:
    Код
    <div class="mSt"><p>Tropical</p><div data="2/trop_64">64</div><br><div data="2/trop_128">128</div><br><div data="2/trop_320">320</div></div>  
      <div class="mSt"><p>Нафталин FM</p><div data="2/naft_64">64</div><br><div data="2/naft_128">128</div><br><div data="2/naft_320">320</div></div>  
      <div class="mSt"><p>Rave FM</p><div data="2/rave_64">64</div><br><div data="2/rave_128">128</div><br><div data="2/rave_320">320</div></div>  
      <div class="mSt"><p>Gold</p><div data="2/gold_64">64</div><br><div data="2/gold_128">128</div><br><div data="2/gold_320">320</div></div>  
      <div class="mSt"><p>GOA/PSY</p><div data="2/goa_64">64</div><br><div data="2/goa_128">128</div><br><div data="2/goa_320">320</div></div>  
      <div class="mSt"><p>Minimal/Tech</p><div data="2/mini_64">64</div><br><div data="2/mini_128">128</div><br><div data="2/mini_320">320</div></div>  
      <div class="mSt"><p>House</p><div data="2/fut_64">64</div><br><div data="2/fut_128">128</div><br><div data="2/fut_320">320</div></div>  
      <div class="mSt"><p>Megamix</p><div data="2/mix_64">64</div><br><div data="2/mix_128">128</div><br><div data="2/mix_320">320</div></div>


    Fix работы радио:
    Находим: if(radUrl=="tm" || radUrl=="ps" || radUrl=="teo" || radUrl=="dc")
    Меняем на: if (radUrl == "tm" || radUrl == "ps" || radUrl == "teo" || radUrl == "dc" || radUrl == "gop")
  • CbIPoK2513 написал:
  • Мой вариант выдаёт аватарку картинкой, а не текстом.
  • waak написал:
  • и ещё забыл добавить что использую модуль каталог сайтов
    Последние темы
    Опрос
    258
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 6
    Гостей: 6
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: