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


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

1097
10 из 10
Проголосовало: 1




Шаг-1 js:

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

JS

Code
<script type="text/javascript">
$(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);
});
</script>

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

Шаг-2 html:

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

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

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

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://webo4ka.ru/Ucoz3/no_avatar_dli_kommentov.jpg" alt="no" /><?endif?><a class="massage_link" href="$ENTRY_URL$" target="_blank">$MESSAGE$</a>
</li>

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

HTML-Code

Code
<ul id="center_dm_ru">
  $MYINF_1$
  </ul>

Шаг-3 CSS:

CSS-Code

Code
#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);
}

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

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

Автор публикации: Загрузка
Загрузка
Вовчик, это его n материал
Источник: http://www.center-dm.ru
  • Оставить первым комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2113
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • 1488 написал:
  • 1488 написал:
  • Смысл исходный код? он возвращает после обновление страницы на то положение которое было... или как?
  • 1488 написал:
  • как поставить галки как скрине?
    а то невозможно поставить...
  • Handyman написал:
  • Не появляется код безопасности для обычных пользователей
  • MeVeR написал:
  • Вовка, привет. А вот такой интереснейший вопрос, возможно ли изменить количество посетителей онлайн на форуме?
    Моё авторство:)
    Последние темы
    Опрос
    432
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 3
    Гостей: 3
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: