Приветствуем Вас на сайте!
      Авторизировавшись на сайте Вы получаете возможность заказывать эксклюзивные вещи для Вашего сайта, скачивать новинки, общаться с друзьями.

      Если у Вас ещё нет аккаунта на BEST STUDIO, вы можете создать его потратив не более 10-ти секунд используя форму справа с заголовком "Вход на сайт"
Вход на сайт
Логин:

Пароль:
Вход
Войти по Логину и Паролю
О нас
Cтудия скриптов и дизайна BEST STUDIO, как студия перспективных веб-разработок, была основана 1 июля 2009 г. Уже более 17000 зарегистрированых пользователей! С момента ее создания мы четко придерживаемся принципа: «Быстро, качествено, дорого».

Заказывая работу для вашего сайта у нас, вы экономите время...

Стремитесь к лучшему - в Best Studio!
Войти | Зарегистрироваться
Настройки
Анимация Шапки
Анимация Меню
Анимация Футера
Автообновление Чата
Автообновление Статистики
Звуковые Оповещения
Авто Подгрузка Материалов

Перезагрузите страницу
Стилизация - Сегодня празднуют
DEMO +
Всем привет, переменная TODAY_BIRTHDAYS оставляет желать лучшего. Данная переменная выводит просто список Юзеров которые празднуют сегодня свой день рождения. Не особо красиво выглядит простой список, но мы с вами исправим на расширенный вариант путем скрипта!...

Особенности:
1. Mail - Аватар.
2. FLAT - Стиль.
3. Отправка ЛС.
4. Отправка Награды.

Установка:

1. Заменяем переменную TODAY_BIRTHDAY (Если есть, если нет то добавляем код ниже) на:
Код
<div class="userBirthday">$TODAY_BIRTHDAYS$</div>


2. Добавим js скрипт:
Код
$(function(){  
uValue = $('.userBirthday').html();
uValues = uValue.replace(/,/g, '');
$('.userBirthday').html(uValues);
$('a.userBirthdayLink').each(function() {
uBirthday = $(this).text();  
uPodarocks1 = "new _uWnd('AwD','Поздравить с Днем рождения',380,200,{autosize:1,maxh:300,minh:100,closeonesc:1},{url:'/index/55-";
uPodarocks2 = "'});return false;";
uBirthdayId = $(this).attr("href").split('-')[1];
$(this).html('<div class="uBirthdayBlock"><a href="/index/8-'+uBirthdayId+'" target="_blank" title="'+uBirthday+'"><img src="https://filin.mail.ru/pic?email='+uBirthday+'@'+uBirthday+'&trust=false&width=32&height=32&name='+uBirthday+'&version=4&build=4"></a><div id="uNnn"><a href="/index/8-0-'+uBirthday+'" target="_blank">'+uBirthday+'</a><hr><a href="/index/14-'+uBirthday+'-0-1" target="_blank">Написать ЛС</a></div><div class="uPodarok" onclick="'+uPodarocks1+''+uBirthdayId+''+uPodarocks2+'" title="Поздравить с Днем рождения '+uBirthday+'"></div></div>');
$(".userBirthday img").css('width','35px');
});  
$('span.userAge').each(function() {
$(this).html($(this).html().replace('(','').replace(')',''));
});});


3. Также в CSS добавим стили:
Код
.userBirthday {width: 250px;display: inline-block;}
div#uNnn {
  display: inline-block;cursor: default;
  width: 190px;padding-left: 5px;
}
.userBirthday a {
  display: inline-block; margin-bottom: -8px;
  text-decoration: none;
  font-family: sans-serif;
  padding: 3px; font-size: 11px;
  color: #3F6288;
  text-transform: capitalize;
}
.userBirthday img {
  float: left;border-radius: 3px;
  display: inline-block;
}
span.userAge {
  display: inline-block;
  position: relative;
  background: #fff;
  padding: 5px 0px;
  width: 21px;
  text-align: center;
  border-radius: 30px;
  font-size: 10px;
  color: #4D71DB;
  font-family: serif;
  margin: 0px 0px -20px 127px;
  top: -11px;
  left: -96px;
}
div#uNnn HR {
  border: 1px dashed #E9ECF1;
  MARGIN: 3px 0px -2px 0px;
}
.uPodarok {
  background: url(http://cdn.heyitsfree.net/wp-content/wptouch-data/icons/custom/present.png) no-repeat;
  background-size: contain;
  width: 17px;cursor:pointer;
  height: 17px;
  position: absolute;
  margin: -25px 0px 0px 225px;z-index:2;
}


Если хотите добавить подсчет (Число) сколько человек празднуют то:
1. Дополним наш .js код из пункта 2:
Код
var Birthday = $('a.userBirthdayLink').size();
$("#uBirthdayLim").html('Сегодня празднуют <b>'+Birthday+'</b> человек.');


2. Добавим DIV для вывода числа сколько человек празднуют:
Код
<div id="uBirthdayLim"></div>



При копировании материала указывать источник MyBestStudio.ru
Данный раздел авторский все работы являются собственностью BS (mybeststudio.ru) любое коммерческое использование строго запрещено.

При копировании материала указываем источник MyBeststudio.ru.

Для редактирования кода необходимо иметь хотя бы базовые знания в HTML, CSS и Js технологиях.
Поделиться новостью в социальной сети.
Добавил: Best_Studio
Дата добавления: 12.03.2016 в 14:30 по МСК
Категория: Пользователи
Просмотров: 590
Комментариев: 0
Эмоций:
Теги: js, userAge, user, mail, birthday, Podarok
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]