Оповещение о новом личном сообщении как ВКонтакте для uCoz
827материалов
228тем на форуме
3004комментария
6160пользователей

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


Описание:

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

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

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

1) Активируем api, если у вас данная функция не включена
2) Вставьте следующий код здесь: Панель управления - Управление дизайном - Нижняя часть сайта.
Код
<!--Оповещение ЛС-->  

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

<script type="text/javascript">  
var no_ava = 'http://yraaa.ru/images/noavatar.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"><a class="h_nover" href="'+getLink+'"></a>'  
+'<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> <a id="hnp_text" href="'+getLink+'">'+getText+'</a></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="http://yraaa.ru/images/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()}, 15000);  
</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 #hnp_author {color:#a4dcfa;font-weight:bold;text-decoration:none;}  
.h_newpm #hnp_author: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 #hnp_text, .h_npr #hnp_text:hover {display:block;text-decoration:none;color:#FFF}  
.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://yraaa.ru/634294/del023.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?>

ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 31.05.2015 в 23:47
Материал просмотрен: 1596 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 12 комментариев

Пожаловаться
Сказать спасибо
Источник

12 комментариев


trem200
Александр @trem200 22.07.2015 15:361
0
Хороший скрипт. Спасибо вашему сайту за такие хорошие скрипты.
Romchik
Роман @Romchik 22.07.2015 16:032
0
Не за что!
trem200
Александр @trem200 22.07.2015 16:563
0
Что надо в коде изменить, что бы в оповещение было написано ник отправителя?
vverunchik
А как изменить цвет окошка вместо черного ?
Romchik
Роман @Romchik 06.08.2015 17:115
0
в этой строчке
Код
.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;}

это элемент
Код
background:rgba(0,0,0,0.7);

Цитата
0,0,0
это цвет окна (на данный момент черный)
vverunchik
Спасибо
Romchik
Роман @Romchik 06.08.2015 17:157
0
Не за что)
webmasterivan
webmasterivan @webmasterivan 06.08.2015 17:408
0
Не плохой скрипт
avatar
NIKOS @NORMAND 31.01.2016 03:249
0
спасибо за скрипт...а как отключить стандартный...а то сразу 2 уведомления
Ромчик
Какой стандартный?
avatar
NIKOS @NORMAND 10.02.2016 12:1611
0
ну есть же и стандартное оповещение ...на сайте выходит 2 сообщения...даже если я и добавлял сам... то не помню теперь как удалить это
1 2 »
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта