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


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

344
7.4 из 10
Проголосовало: 9





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