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

1147
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 2118
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • Marishka написал:
  • Можете добавить свои input поля, но сохраняйте их порядок в html для правильного сохранения и вывода.
  • Marishka написал:
  • Новая версия 1.3 (+6 новых станций):
    Установка:
    Демо: Перейти
  • Marishka написал:
  • Доп 8 станций:
    Код
    <div class="mSt"><p>Tropical</p><div data="2/trop_64">64</div><br><div data="2/trop_128">128</div><br><div data="2/trop_320">320</div></div>  
      <div class="mSt"><p>Нафталин FM</p><div data="2/naft_64">64</div><br><div data="2/naft_128">128</div><br><div data="2/naft_320">320</div></div>  
      <div class="mSt"><p>Rave FM</p><div data="2/rave_64">64</div><br><div data="2/rave_128">128</div><br><div data="2/rave_320">320</div></div>  
      <div class="mSt"><p>Gold</p><div data="2/gold_64">64</div><br><div data="2/gold_128">128</div><br><div data="2/gold_320">320</div></div>  
      <div class="mSt"><p>GOA/PSY</p><div data="2/goa_64">64</div><br><div data="2/goa_128">128</div><br><div data="2/goa_320">320</div></div>  
      <div class="mSt"><p>Minimal/Tech</p><div data="2/mini_64">64</div><br><div data="2/mini_128">128</div><br><div data="2/mini_320">320</div></div>  
      <div class="mSt"><p>House</p><div data="2/fut_64">64</div><br><div data="2/fut_128">128</div><br><div data="2/fut_320">320</div></div>  
      <div class="mSt"><p>Megamix</p><div data="2/mix_64">64</div><br><div data="2/mix_128">128</div><br><div data="2/mix_320">320</div></div>


    Fix работы радио:
    Находим: if(radUrl=="tm" || radUrl=="ps" || radUrl=="teo" || radUrl=="dc")
    Меняем на: if (radUrl == "tm" || radUrl == "ps" || radUrl == "teo" || radUrl == "dc" || radUrl == "gop")
  • CbIPoK2513 написал:
  • Мой вариант выдаёт аватарку картинкой, а не текстом.
  • waak написал:
  • и ещё забыл добавить что использую модуль каталог сайтов
    Последние темы
    Опрос
    469
    А
    Р
    Оцените новый дизай:)
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: