Новое, красивое оповещение ЛС для 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
Ставим пароль на страницу для Ucoz
39 ресурсов для дизайнеров, разработчиков и маркетологов
39 ресурсов для дизайнеров, разрабо
Обложка профиля
Обложка профиля
Clean - качественный адаптивный шаблон
Clean - качественный адаптивный шаб