Новое, красивое оповещение ЛС для ucoz
Представляю вашему вниманию красивое и стильное оповещение о ЛС для ucoz.

Знаю данный скрипт уже существует, но в моей версии я:
1. Изменил положение кнопки "close"
2. Округлил углы
3. Добавил анимацию
4. Новое звуковое оповещение


Установка


Включите API в "Общих настройках" Панели управления.


Вставьте следующий код здесь:


Панель управления - Управление дизайном - Нижняя часть сайта.

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

<?if($USER_LOGGED_IN$)?>  
<div id="one_pm" class="bounceIn animated"></div>  
<script type="text/javascript">  
var no_ava = 'http://kanavas.at.ua/img/nophoto.png';  
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" class="bounceIn animated">'  
+'<div class="h_newpm">'  
+'<div class="h_npin" align="center"><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://kanavas.at.ua/sound/gently.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;
  top: 80px;
  cursor: pointer;
  font-family: Tahoma,Arial,Verdana,sans-srif;
  width: 300px;}  
#hnp_sound {position:absolute;top:-1000px;left:-1000px}  
#hnp_author span {display:none}  
.h_newpm { position: relative;
  height: 110px;
  margin-bottom: 20px;
  color: #555;
  padding: 8px 8px!important;
  background: #fff!important;
  border-radius: 90px;}
.h_newpm #hnp_author {color:#555;font-weight:bold;text-decoration:none;}  
.h_newpm #hnp_author:hover {color:#555;text-decoration:underline}  
.h_npin {padding:5px;padding-top:5px}  
.h_nptitle {color:#555;font-size:13px;font-weight:bold;padding-bottom:0px}  
.h_npimg {width:57px;height:57px;overflow:hidden;-webkit-border-radius: 90px;-moz-border-radius:90px;border-radius: 90px;}  
.h_npimg img {width:100%;-webkit-border-radius: 90px;-moz-border-radius: 90px;border-radius: 90px;}  
.h_npl {position:absolute;left:13px;top:45px;z-index:3;width:70px}  
.h_npr {position:absolute;left:84px;top:45px;z-index:3;color:#555;font-size:13px;padding-right:14px}  
.h_npr #hnp_text, .h_npr #hnp_text:hover {display:block;text-decoration:none;color:#555}  
.h_newpm:hover .h_del {display:inline-block;}  
.h_del {display: none;cursor: pointer;position: absolute!important;right: 10px;top: 40px;margin: 0!important;z-index: 10014!important;width: 36px!important;height: 36px!important;background: url(http://kanavas.at.ua/img/ajax_p.png) no-repeat!important;}
.h_del:hover {background-position:0px 18px}  
.h_nover {position:absolute;top:0px;left:0px;width:100%;height:100%;}
.animated {
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}

.animated.infinite {
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
}

.animated.hinge {
-webkit-animation-duration: 2s;
animation-duration: 2s;
}

/*the animation definition*/

@-webkit-keyframes bounceIn {
0%, 100%, 20%, 40%, 60%, 80% {
-webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
}
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3)
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1)
}
40% {
-webkit-transform: scale3d(.9, .9, .9);
transform: scale3d(.9, .9, .9)
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03)
}
80% {
-webkit-transform: scale3d(.97, .97, .97);
transform: scale3d(.97, .97, .97)
}
100% {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
}

@keyframes bounceIn {
0%, 100%, 20%, 40%, 60%, 80% {
-webkit-transition-timing-function: cubic-bezier(0.215, .61, .355, 1);
transition-timing-function: cubic-bezier(0.215, .61, .355, 1)
}
0% {
opacity: 0;
-webkit-transform: scale3d(.3, .3, .3);
-ms-transform: scale3d(.3, .3, .3);
transform: scale3d(.3, .3, .3)
}
20% {
-webkit-transform: scale3d(1.1, 1.1, 1.1);
-ms-transform: scale3d(1.1, 1.1, 1.1);
transform: scale3d(1.1, 1.1, 1.1)
}
40% {
-webkit-transform: scale3d(.9, .9, .9);
-ms-transform: scale3d(.9, .9, .9);
transform: scale3d(.9, .9, .9)
}
60% {
opacity: 1;
-webkit-transform: scale3d(1.03, 1.03, 1.03);
-ms-transform: scale3d(1.03, 1.03, 1.03);
transform: scale3d(1.03, 1.03, 1.03)
}
80% {
-webkit-transform: scale3d(.97, .97, .97);
-ms-transform: scale3d(.97, .97, .97);
transform: scale3d(.97, .97, .97)
}
100% {
opacity: 1;
-webkit-transform: scale3d(1, 1, 1);
-ms-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1)
}
}

.bounceIn {
-webkit-animation-name: bounceIn;
animation-name: bounceIn
}
  
</style>  
<?endif?>

Всего комментариев: (2)

StimuL
в 21:08, 21 Мар 16
как переместить в правый угол и отпустить в низ сайта и уменьшить закруглние
Kanavas
в 22:01, 21 Мар 16
#one_pm{right: 0px;bottom: 0px;border-radius:5px;} :)
_LOGGED_IN$)?>
Чтобы оставить комментарий под этой публикацией, войдите или зарегистрируйтесь.

Случайные материалы

Полоска загрузки сайта для uCoz
Полоска загрузки сайта для uCoz
Кнопка лайк как на Facebook
Кнопка лайк как на Facebook
Прокрутка страницы
Прокрутка страницы
CSS3 выдвижной нижний блок (footer)
CSS3 выдвижной нижний блок (footer)
Необычная графа поиска
Необычная графа поиска
30 бесплатных онлайн редакторов фото-, видео- и аудиофайлов
30 бесплатных онлайн редакторов фот