» » >

Последние движущиеся комментария для uCoz v2
·
22.09.2013, 10:06


Шаг-1 js:

Так как в системe uCoz уже вшита библиотека jQuery, нам не понадобиться её устанавливать, поэтому установим основной скрипт после тега <body>, который отвечает за плавное исчезновение первой новости контейнера.

JS


$(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 = '<li style="display:none">'+first+'</li>';
  $('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; - сколько должно пройти времени, перед исчезновением сообщения

Шаг-2 html:

Заходим в админ панель сайта => Инструменты => Информеры => Создать информер

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

и копируем в информер следующий код:

HTML-Code

<li>
if($USER_AVATAR_URL$)?><a href="$PROFILE_URL$" target="_blank"><img class="coment_avatar" src="$USER_AVATAR_URL$" /></a>else?><img class="coment_avatar" src="http://ucoz-helper.ucoz.com/vid_comment/no_avatar.jpg" alt="no" />endif?><a class="massage_link" href="$ENTRY_URL$" target="_blank">$MESSAGE$</a>
</li>

Теперь там где хотите видеть последние комментария, устанавливаем сам информер, который поместим в ячейку списков:

HTML-Code

<ul id="center_dm_ru">
  $MYINF_1$
  </ul>
Шаг-2 CSS:
CSS-Code

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

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

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

.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);
}

Как мы видим из кода, мы прописали основные атрибуты нашим спискам, хочу заметить, что вам осталось лишь подогнать под ваш сайт, ширину и высоту основной ячейки <ul>

Вот в принципе и всё...

Категория: Вид комментарий | Добавил: tashkent97
Просмотров: 529 | Загрузок: 310 | Источник: center-dm.ru | Рейтинг: 5.0/1
Всего комментариев: 0
dth="100%" cellspacing="1" cellpadding="2" class="commTable">
Имя *: Email:
Яндекс.Метрика Яндекс цитирования<