Preparing For Tomorrowland

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.

Вы здесь » Preparing For Tomorrowland » Скрипты » Оповещения при новом сообщении

Оповещения при новом сообщении

Страница: 1

Сообщений 1 страница 2 из 2

1

  • Автор: Hilda
  • Администратор
  • Зарегистрирован: 2015-05-08
  • Приглашений: 0
  • Сообщений: 35
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    5 часов 45 минут
  • Последний визит:
    2015-09-24 16:23:18

Я лично не знаю, какое оптимальное оповещение сделать. Мне кажется, что все эти мигающие конвертики и назойливые окошки - это перебор. Хватило бы и простого красного кружочка с цифрой. Но возможность делать красные кружочки нам никто не дал, потому что у цифры нет контейнера и идентификатора. Исправим это:

Код:
<script>
var $elem = $('#navpm a span');
var text = $elem.text().trim();
if (text.indexOf('(')) {
var arr = text.split(/\s/);
var number = arr[1].substr(1, arr[1].length - 2);
$('#navpm a span').html('<span id="navpm-text">'+arr[0]+'</span><span id="navpm-number-container"><span class="navpm-brace" id="navpn-left-brace"> (</span><span id="navpm-number">'+number+'</span><span class="navpm-brace" id="navpn-right-brace">)</span></span>');
}
</script>

Теперь внутренность кнопки "Сообщения", если есть новые сообщения, выглядит так:

<li id="navpm">
  <a href="http://tomorrowlandtest.rolfbb.ru/messages.php">
    <span>
        <span id="navpm-text">Сообщения</span>
         <span id="navpm-number-container">
           <span class="navpm-brace" id="navpn-left-brace"> (</span>
           <span id="navpm-number">1</span>
           <span class="navpm-brace" id="navpn-right-brace">)</span>
         </span>
     </span>
  </a>
</li>

Ну а дальше уже возможны варианты, как оформлять саму кнопку.

0

2

  • Автор: Hilda
  • Администратор
  • Зарегистрирован: 2015-05-08
  • Приглашений: 0
  • Сообщений: 35
  • Уважение: [+0/-0]
  • Позитив: [+0/-0]
  • Провел на форуме:
    5 часов 45 минут
  • Последний визит:
    2015-09-24 16:23:18

Стикер. Вариант 1.

#navpm-number-container {
  position: absolute;
  margin-top: -14px;
  margin-left: -8px;
  text-shadow: 0px 0px 3px rgba(0,0,0,0.4);
  color: black;
  width: 20px;
  height: 20px;
  display: inline-block;
  border-radius: 100%;
  background: -webkit-linear-gradient(135deg, transparent 6px, #aaa 4px, #eee);
  text-align: center;
  padding-top: 2px;
  box-sizing: border-box;
  overflow: hidden;
   color: white;
  background: -webkit-linear-gradient(135deg, transparent 6px, #8e2ea6 4px, #b457c7);
}
#navpm-number-container:after {
  content: " ";
  display: block;
  border-radius: 100%;
  background: -webkit-linear-gradient(135deg, transparent 22px, #000 20px,#666 20px, #fff 85%);
  box-shadow: -3px -3px 5px 1px rgba(0, 0, 0, 0.2);
  width: 20px;
  height: 24px;
  margin-left: 11px;
  margin-top: -1px;
}

0

Страница: 1

Вы здесь » Preparing For Tomorrowland » Скрипты » Оповещения при новом сообщении