Главная

Добавить
статью


Форум


Новости


RSS


Обратная
связь
друзья


теги


реклама



Для вебмастера » Ucoz системаПоследние движущиеся комментарии

Добавил kaktyc | 23-11-2011, 18:19 | Мнений: 0 | Заглянули 1746
Последние движущиеся комментарии



Красивый блок, с последними движущимися комментария для uCoz, фишка скрипта в том, что можно настроить плавное исчезание первого комментария, но об этом позже.

Установка скрипта Последние движущиеся комментарии


Скрипт использует библиотеку jQuery, все знают, что на ucoze уже она установлена, поэтому пропустим этот пункт, и приступим к установке главного скрипта, который отвечает именно за плавное исчезновение первого комментария в блоке.

Ставим следующий код после тега


$(document).ready(function(){
  var first = 0;
  var speed = 700;
  var pause = 3500;
  
  function removeFirst(){
  first = $('ul#center_dm_ru li:first').html();
  $('ul#center_dm_ru li:first')
  .animate({opacity: 0}, speed)
  .fadeOut('slow', function() {$(this).remove();});
  addLast(first);
  }
  
  function addLast(first){
  last = ''+first+'';
  $('ul#center_dm_ru').append(last)
  $('ul#center_dm_ru li:last')
  .animate({opacity: 1}, speed)
  .fadeIn('slow')
  }
  
  interval = setInterval(removeFirst, pause);
});


var speed = 700; - скорость исчезновение первого сообщения
var pause = 3500; - сколько должно пройти времени, перед исчезновением сообщения

Далее идем в админку и создаем информер со следующими настройками:
Раздел: Комментарии
Модуль: Все модули
Количество материалов: 10
Количество колонок: 1

Меняем код стандартного информера на этот:

$MESSAGE$


Теперь в самом шаблоне там где хотите видеть эти последние комментарии, ставим сам информер:


  $MYINF_1$
  




CSS:

#center_dm_ru {
  overflow:hidden;
  height:250px;
  width:250px;
  border:solid 1px #C8D9E5;
  padding: 0px 0px 0px 0px;
  background: #F8FCFF;
}

#center_dm_ru li {  
  list-style:none;
  overflow:hidden;
  border-top: 1px solid #fff;
  border-bottom: 1px solid #C8D9E5;
  padding: 10px 5px 10px 5px;
}

.coment_avatar {
  float:right;
  width:25px;  
  height:25px;
  background: #F3F3F3;  
  margin-left: 5px;
  padding: 2px;
  border:1px solid #C8D9E5;
}  

.massage_link:link,
.massage_link:visited {
  text-decoration: none;
  color:#555;  
}

.massage_link:hover {
  color:#999;
}  

#center_dm_ru li a:hover img {
  filter: progid: DXImageTransform.Microsoft.Alpha(opacity=50);  
  -moz-opacity: 0.5;
  opacity: 0.5;  
  filter: alpha(opacity=50);
}


CSS легко настраивается, и вы сможете без труда подогнать, размеры ячеек с комментариями, под свой шаблон сайта.

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Комментарии:

Оставить комментарий


календарь



опрос



счетчики



Реклама



Логин: (регистрация? Пароль (забыл?):