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


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

1086
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 2110
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
  • LeKcUs написал:
  • В самый конец просто добавьте вот такие теги... И у Вас не будет больше возникать вопросов! cry

    <!-- </popup> -->$POWERED_BY$<!-- <popup> -->
  • invitesystem написал:
  • Скачал архив, залил сайт, но проблема с кодом для вставки в конструктор шаблонов. Какие-то в нём знаки вопроса и без обязательного $POWERED_BY$
  • Marishka написал:
  • Можно, включите фантазию. Бесплатно никто ничего делать не будет.... Данный скрипт то написали так как попросили happy
  • BLAzER написал:
  • А на условных операторах это не сделать?
  • Вовчик написал:
  • Кто-то недавно об этом спрашивал
    Последние темы
    Опрос
    224
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    Топ пользователей: