Оповещение о новом личном сообщении как ВКонтакте для uCoz


Оповещение о новом личном сообщении как ВКонтакте для uCoz

1010
10 из 10
Проголосовало: 5






На сайте выкладывались уже десятки таких материалов, но все они были не такими как вконтакте. А щас Вам предлогают очень близкий по стилю и поведению вид оповещения о личных сообщениях как ВКонтакте. При написании кода, части кода были позаимствован из других частей, но это не суть, главное конечный результат, который мы видим точь в точь таком же оповещении об лс как вконтакте...

Особенности данного оповещения

  • Нажимая на область уведомления, пользователь переходит на страницу сообщения;
  • Показывается аватар и имя отправителя;
  • Тема сообщения;
  • По нажатию кнопки "Закрыть", уведомление исчезает, а сообщение считается прочитанным;
  • Дизайн ВКонтакте;
  • Звуковое оповещение;
  • Анимация

    Установка

    1) Активируем api, если у вас данная функция не включена

    2) Вставьте следующий код здесь: Панель управления - Управление дизайном - Нижняя часть сайта.

    Код

    <!--Оповещение ЛС-->  

      <?if($USER_LOGGED_IN$)?>  
      <div id="one_pm"></div>  

      <script type="text/javascript">  
      var no_ava = 'http://webo4ka.3dn.ru/_ld/42/40598497.gif';  

      var this_mess_link = '';  
      function m_reload() {  
      if($('#one_pm').html()=='') {  
      $.get('/index/14?'+Math.random(), function (data) {  
      $('b.unread', data).each(function (i,index) {  
      getLink = $(index).parent().attr("href");  
      this_mess_link = getLink;  
      getText = $(index).parent().text();  
      getAuthorName = $(index).parent().parent().children('a').eq(1).text();  
      getAuthor = $(index).parent().parent().children('a').eq(1).attr("href");  
      getID = '#one_pm'+i;  
      var xml = $.ajax({  
      type: 'GET',  
      url: '/api/index/8-0-'+getAuthorName.replace('-','~'),  
      dataType: 'xml',  
      async: false  
      }).responseText;  
      var urlAvatar = $(xml).find('struct:first member:contains("USER_AVATAR")').find('string').text();  
      var userName = $(xml).find('struct:first member:contains("USER_NAME")').find('string').text();  
      $('#one_pm').html('<div id="one_pm'+i+'" style="display:none">'  
      +'<div class="h_newpm">'  
      +'<div class="h_npin"><div class="h_nover" onclick="document.location.href="'+getLink+'""></div>'  
      +'<div class="h_nptitle">Новое сообщение</div><span class="h_del" onclick="h_del();return false;"></span>'  
      +'<div class="h_npl"><div class="h_npimg"><a href="#" id="hnp_avatar"></a></div></div>'  
      +'<div class="h_npr"><a href="#" id="hnp_author"></a> <span id="hnp_text" onclick="document.location.href="'+getLink+'"">'+getText+'</span></div>'  
      +'</div>'  
      +'</div>'  
      +'</div><div id="hnp_sound"></div>');  
      $(getID+' #hnp_author').attr('href', getAuthor);  
      $(getID+' #hnp_avatar').attr('href', getAuthor);  
      $(getID+' #hnp_author').html(userName);  
      $(getID+' #hnp_avatar').html('<img src="'+ (urlAvatar == '' ? no_ava : urlAvatar )+'">');  
      setTimeout(function(){$(getID).slideDown(200);},200);  
      $('#hnp_sound').html('<audio src="/vk.mp3" volume="1" autoplay></audio>');setTimeout(function(){$('#hnp_sound').html('')},2000);  
      });  
      });  
      }  
      }  
      function h_del() {$('#one_pm').fadeOut(200,function(){$('#one_pm').html('<i></i>')});$.get(this_mess_link);}  
      m_reload();setInterval(function(){m_reload()}, 5000);  
      </script>  

      <style type="text/css">  
      #one_pm {position:fixed;left:20px;bottom:0px;cursor:pointer;font-family:Tahoma,Arial,Verdana,sans-srif}  
      #hnp_sound {position:absolute;top:-1000px;left:-1000px}  
      #hnp_author span {display:none}  
      .h_newpm {position:relative;width:350px;height:110px;margin-bottom:20px;background:rgba(0,0,0,0.7);text-shadow:0 1px 3px rgba(0,0,0,0.5);box-shadow:0 0 10px #000;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}  
      .h_newpm a {color:#a4dcfa;font-weight:bold;text-decoration:none;}  
      .h_newpm a:hover {color:#a4dcfa;text-decoration:underline}  
      .h_npin {padding:14px;padding-top:10px}  
      .h_nptitle {color:#FFF;font-size:13px;font-weight:bold;padding-bottom:12px}  
      .h_npimg {width:57px;height:57px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,0.3);-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}  
      .h_npimg img {width:100%;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}  
      .h_npl {position:absolute;left:13px;top:38px;z-index:3;width:70px}  
      .h_npr {position:absolute;left:84px;top:38px;z-index:3;color:#FFF;font-size:13px;padding-right:14px}  
      .h_npr span {display:block}  
      .h_newpm:hover .h_del {display:inline-block;}  
      .h_del {position:absolute;display:none;top:12px;right:12px;z-index:3;cursor:pointer;background:url('http://webo4ka.3dn.ru/_ld/42/86217699.png') 0px 0px;width:18px;height:18px}  
      .h_del:hover {background-position:0px 18px}  
      .h_nover {position:absolute;top:0px;left:0px;width:100%;height:100%;}  
      </style>  

      <?endif?>


    Незабываем скачать музыку и вставить в код, на этом все...
  • Автор публикации: Загрузка
    Загрузка
    Вовчик, это его n материал
    Источник: http://yraaa.ru/publ/vkontakte/22-1-0-2441
    • Всего комментариев: 1

    Meder
    0
    Meder написал: Написано 10 Августа 2015 в 23:03
    Комментарий №1
    Классно все. Но проблемка при нажатии на оповещение не переходит в ЛС.

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