Анимированное изображение при новых ЛС (sadhaka, mintemero)
Анимированное изображение при новых ЛС от sadhaka
Анимированный конвертик "Вам пришло новое сообщение!". Значение количества сообщений сохранено.
Ставим в хтмл-низ.
При необходимости измените изображение, всплывающую подсказку, отступы слева/справа, отступ сверху.
Модификация скрипта от mintemero
Еще один вариант уведомления о личном сообщении. Чем он лучше:
а) Он очень короткий
б) Его легко настраивать. Всплывающее уведомление можно как угодно настраивать стилистически, вставлять любой html-контент.
html-низ:
Красное — адрес вашего форума
Вместо жирного можно вставлять любой html-контент — текст, картинки, дивы.
Синее — время анимации появления в миллисекундах.
Html-верх:
Выделенное серым — стиль уведомления. Он необязателен, вы вольны вставлять и убирать любые селекторы на ваше усмотрение.
Анимированный конвертик "Вам пришло новое сообщение!". Значение количества сообщений сохранено.
Цитата
<script type="text/javascript">
var pmstr = $("#navpm a").html();
if ((pmstr != null) && (pmstr.indexOf("(") != -1)) {
$("#navpm a").before("<img src='http://uploads.ru/i/6/r/9/6r98t.gif' title='У Вас новое личное сообщение!' style='margin: -2px 0 0 1px; position: relative; top: 5px;'/>");
}
</script>
var pmstr = $("#navpm a").html();
if ((pmstr != null) && (pmstr.indexOf("(") != -1)) {
$("#navpm a").before("<img src='http://uploads.ru/i/6/r/9/6r98t.gif' title='У Вас новое личное сообщение!' style='margin: -2px 0 0 1px; position: relative; top: 5px;'/>");
}
</script>
Ставим в хтмл-низ.
При необходимости измените изображение, всплывающую подсказку, отступы слева/справа, отступ сверху.
Модификация скрипта от mintemero
Еще один вариант уведомления о личном сообщении. Чем он лучше:
а) Он очень короткий
б) Его легко настраивать. Всплывающее уведомление можно как угодно настраивать стилистически, вставлять любой html-контент.
html-низ:
Цитата
<script>
var pmstr = $("#navpm a").html();
if ((pmstr != null) && (pmstr.indexOf("(") != -1)) {
$("#pun").before("<a class=msgi href=http://forum.mybb.ru/messages.php>Есть непрочитанные ЛС</a>");
};
$(document).ready(function() {
$('.msgi').fadeIn(700);
});
</script>
var pmstr = $("#navpm a").html();
if ((pmstr != null) && (pmstr.indexOf("(") != -1)) {
$("#pun").before("<a class=msgi href=http://forum.mybb.ru/messages.php>Есть непрочитанные ЛС</a>");
};
$(document).ready(function() {
$('.msgi').fadeIn(700);
});
</script>
Красное — адрес вашего форума
Вместо жирного можно вставлять любой html-контент — текст, картинки, дивы.
Синее — время анимации появления в миллисекундах.
Html-верх:
Цитата
<style>
.msgi {
margin-top: 15px; /* Отступ сверху */
right: 50px; /* Отступ сверху */
position: fixed;
z-index: 80;
opacity: 0;
background: #fff; /* Цвет фона */
color: #89a648; /* Цвет текста*/
border: 1px solid #89a648; /* Границы */
padding: 5px; /* Отступы до текста */
-webkit-border-radius: 7px; /* Скругление углов */
-moz-border-radius: 7px;
border-radius: 7px;
}
</style>
.msgi {
margin-top: 15px; /* Отступ сверху */
right: 50px; /* Отступ сверху */
position: fixed;
z-index: 80;
opacity: 0;
background: #fff; /* Цвет фона */
color: #89a648; /* Цвет текста*/
border: 1px solid #89a648; /* Границы */
padding: 5px; /* Отступы до текста */
-webkit-border-radius: 7px; /* Скругление углов */
-moz-border-radius: 7px;
border-radius: 7px;
}
</style>
Выделенное серым — стиль уведомления. Он необязателен, вы вольны вставлять и убирать любые селекторы на ваше усмотрение.
Просмотров: 762, Загрузок: 0, Комментарии: 2, Оценка: 5.0 (1)
| Страницы: | |||||||
| |||||||
