Приветствие как на facebook

613
7.6 из 10
Проголосовало: 10





Всем кто пользуется соц. сетью facebook пользователю система выводила приветствие в зависимости от времени суток, мы использовали и заимствовали идею и публикуем ее реализацию, скрипт прост и легко устанавливается ну и подходит под любую CMS. Скрытие уведомления на основе Cookie чтоб пользователи могли его скрыть.

Установка:
1. Добавим html
Код
<div id="col-md-hello"><p></p><i></i><span id="mh1">Добрый день</span><span id="mh2">Добрый вечер</span><span id="mh3">Доброй ночи</span>, $USERNAME$!</div>


2. Добавим CSS стили
Код
div#col-md-hello {  
  background: #ffffff url(http://webo4ka.ru/_ld/44/35659566.png) no-repeat top right;  
  color: #1d2129;  
  border: 1px solid;  
  border-color: #e5e6e9 #dfe0e4 #d0d1d5;  
  margin-bottom: 15px;  
  padding: 10px 0px 7px 30px;  
  font-weight: bolder;  
  }  
  div.col-md-night {  
  background: #ffffff url(http://webo4ka.ru/_ld/44/35659566.png) no-repeat right -42px !important;  
  }  
  div.col-md-vesper {  
  background: #ffffff url(http://webo4ka.ru/_ld/44/35659566.png) no-repeat right -83px !important;  
  }  
  div#col-md-hello i {  
  background: #ffffff url(http://webo4ka.ru/_ld/44/35659566.png) no-repeat 0px -122px;  
  width: 21px;  
  height: 21px;  
  display: inline-block;  
  float: left;  
  margin: 0px 15px 0px -15px;  
  position: relative;  
  top: -1px;  
  }  
  div#col-md-hello p, span#mh2, span#mh3 {display:none;}  
  div#col-md-hello:hover p {display: inline-block;}  
  div#col-md-hello p {  
  background: url(http://webo4ka.ru/_ld/44/35659566.png) no-repeat -21px -124px;  
  width: 17px;  
  height: 14px;  
  margin: -10px 15px 0px 416px;  
  position: absolute;  
  cursor: pointer;  
  }


3. Добавим js код
Код
$(function () {  
  jQuery.cookie = function(name, value, options) {  
  if (typeof value != 'undefined') { // name and value given, set cookie  
  options = options || {};  
  if (value === null) {  
  value = '';  
  options.expires = -1;  
  }  
  var expires = '';  
  if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {  
  var date;  
  if (typeof options.expires == 'number') {  
  date = new Date();  
  date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));  
  } else {  
  date = options.expires;  
  }  
  expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE  
  }  
  // CAUTION: Needed to parenthesize options.path and options.domain  
  // in the following expressions, otherwise they evaluate to undefined  
  // in the packed version for some reason...  
  var path = options.path ? '; path=' + (options.path) : '';  
  var domain = options.domain ? '; domain=' + (options.domain) : '';  
  var secure = options.secure ? '; secure' : '';  
  document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');  
  } else { // only name given, get cookie  
  var cookieValue = null;  
  if (document.cookie && document.cookie != '') {  
  var cookies = document.cookie.split(';');  
  for (var i = 0; i < cookies.length; i++) {  
  var cookie = jQuery.trim(cookies[i]);  
  // Does this cookie string begin with the name we want?  
  if (cookie.substring(0, name.length + 1) == (name + '=')) {  
  cookieValue = decodeURIComponent(cookie.substring(name.length + 1));  
  break;  
  }  
  }  
  }  
  return cookieValue;  
  }  
  };  

   
  $('div#col-md-hello p').click(function () {  
  $('div#col-md-hello').hide();  
  if($.cookie('optHello') != 'false') {  
  $.cookie('optHello', 'false');  
  } else {  
  $.cookie('optHello', 'true');  
  }  
  });  
  if($.cookie('optHello') != 'false') {  
  } else {  
  $('div#col-md-hello').hide();  
  };  

  var time = new Date();  
  if ((time.getHours()>=16) && (time.getHours()<=21)) { $('span#mh1').hide(); $('span#mh2').show(); $('div#col-md-hello').addClass("col-md-vesper"); };  
  if ((time.getHours()>=21) && (time.getHours()<=24)) { $('span#mh1, span#mh2').hide(); $('span#mh3').show(); $('div#col-md-hello').removeClass("col-md-vesper"); $('div#col-md-hello').addClass("col-md-night"); };  
  if ((time.getHours()>=0) && (time.getHours()<=5)) { $('span#mh1, span#mh2').hide(); $('span#mh3').show(); $('div#col-md-hello').removeClass("col-md-vesper"); $('div#col-md-hello').addClass("col-md-night"); }; });
Автор публикации: Загрузка
Загрузка
Marishka, это его n материал
Источник: http://mybeststudio.ru
  • Оставить первым комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта 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 написал:
  • и ещё забыл добавить что использую модуль каталог сайтов
    Последние темы
    Опрос
    469
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 2
    Гостей: 2
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: