• Страница 1 из 1
  • 1
Форум » Веб-разработка » HTML + CSS — коды » Оповещение новых личных сообщении с эффектом
Оповещение новых личных сообщении с эффектом
Kosten
Суббота, 01 Июля 2017 | Сообщение 1
Оффлайн
Администраторы
Сообщений:44355
Награды: 70
Красивое оповещение, где с появлением окна, которое идет в самом сообщение и плюс стильный эффект появление. Здесь буде выводиться аварат и название темы, где по клику переходите. По умолчанию будет появляться с правой стороны выше немного центра. Оно сильно отличается от стандартных, которые есть в сети. Это стили, что окно можно сделать как светлым, что идет, так и темным, где при наведение появляется кнопка отключить. Если у вас еще не подключен админ бар, точнее его нет, а все по старому, то этот скрипт безусловно заменит все старые коды оповещение.



Приступаем к установке:

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

2. Вставляем данный код в нижнюю часть сайта :

Код
<!--Оповещение ЛС-->
<?if($USER_LOGGED_IN$)?>
<div id="one_pm" class="bounceIn animated"></div>
<script type="text/javascript">
var no_ava = 'http://zornet.ru/zorner_ru_1/Abter/der/W.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);
});
});
}
}
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;
right: 10px;
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: 1px solid #8e9bb5;
border-radius: 5px;    
     }

.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://webo4ka.ru/Ucoz8/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?>
Прикрепления: 0080989.png (5.5 Kb)
Страна: (RU)
Сафрон
Воскресенье, 02 Июля 2017 | Сообщение 2
Оффлайн
Vip
Сообщений:224
Награды: 1
Это самое нормальное личное сообщение.
Страна: (RU)
Scheme
Воскресенье, 02 Июля 2017 | Сообщение 3
Оффлайн
Пользователи
Сообщений:157
Награды: 1
Цитата Сафрон ()
Это самое нормальное личное сообщение.

Нормально перейти на новый админ бар.
Страна: (RU)
Kosten
Воскресенье, 02 Июля 2017 | Сообщение 4
Оффлайн
Администраторы
Сообщений:44355
Награды: 70
Здесь на выбор, сне вот больше такое окно нравится и установлено, только темно прозрачное.
Страна: (RU)
Kosten
Воскресенье, 02 Июля 2017 | Сообщение 5
Оффлайн
Администраторы
Сообщений:44355
Награды: 70
Можно сделать прозрачный фон.

Прикрепления: 1663595.png (21.8 Kb)
Страна: (RU)
Форум » Веб-разработка » HTML + CSS — коды » Оповещение новых личных сообщении с эффектом
  • Страница 1 из 1
  • 1
Поиск: