[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Форум » Система uCoz » Мини-профиль и Форма входа » Аватар и данные при наведении на ник для онлайн пользователе
Аватар и данные при наведении на ник для онлайн пользователе
vasjuta Дата: Среда, 18.05.2011, 14:29 | Сообщение # 1
Василидзэ
Сообщений: 103
Репутация: 9 [±]
Награды: 1 [+]

Представляю Вам скрипт "Аватар и данные при наведении на ник для онлайн пользователей V.3(как на DLE)"
Я уже делал скрипты подобного рода ,но для онлайн статистики еще не делал никогда. И вот сделал,смотрите что получилось...
Что нам нужно для установки скрипта:

1. Как и в предидушем скрипте будем использовать вывеление данных при помощи jquery.tooltip.js.
Скачиваем архив , распаковываем и заливаем содержимое (java скрипт) в корень сайта:
Скачать
2. Ставим в CSS (таблица стилей Вашего сайта) следуещее:

Code
/* Avatar */  
#tooltip {  
width: 200px;  
position: absolute;  
z-index: 1;  
border: 1px solid #989790;  
background-color: #fff;  
font-family: Arial;  
color: #000;  
padding: 5px 10px 5px 10px;  
opacity: 1.0;  
-moz-border-radius: 5px;  
-webkit-border-radius: 5px;  
border: 1px solid #989790;  
border-radius: 5px;  
}  
/*------------------------*/

3. Далее в блок с онлайн статистикой в самый верх ставим следующий код:

Code
<script src="/jquery.tooltip.js" type="text/javascript"></script>  
<script type="text/javascript">  
$(function() {  
$('#tooltiper a').tooltip({  
   track: false,  
   delay: 0,  
   showURL: false,  
   fade: 200  
});  
});  
</script>

Внимание! Если вы уже поставили себе мой пршлый "Аватар и данные о пользователе при наведении на ник V.2 (как на DLE)" скрипт , то пропустите действие 1 , 2 и 3.

4. Заменяем

Code
$ONLINE_USERS_LIST$

на

Code
<div id="tooltiper">  
<div id="avat">  
$ONLINE_USERS_LIST$  
</div>  
</div>  
<script type="text/javascript">  
r=document.getElementById('avat').getElementsByTagName('a');  
   for(j=0; j<r.length;j++) {  
   r[j].className = ''+r[j].innerHTML+'';  
}  
</script>

5. Теперь нам нужно откуда-то взять все данные ,которые будут выводиться в подсказке. Для этого создаём информер (информеры)
И вот здесь то большим недостатком становится ограничение колличества выводимых материалов до 300 в информерах сайтов на ucoz...
- Для сайтов с колличеством пользователей до 600 всё очень просто:
если ползователей до 300 ,создаем информер Пользователи--->Способ сортировки дата регистрации А--->Количество материалов 300;
если ползователей до 600 ,создаем первый информер Пользователи--->Способ
сортировки дата регистрации А--->Количество материалов 300 и второй информер Пользователи--->Способ
сортировки дата регистрации D--->Количество материалов 300;

- Для сайтов с колличеством пользователей более 600 создаем колличество информеров по своему усмотрению,при этом сортируем пользователей тоже посвоему усмотрению.
Я посоветовал бы так:
- создать информер (информеры) куда вошли бы администраторы,модераторы,журналисты и т.д....все кроме простых пользователей
- создать еще одну группу,назвать её тоже Пользователи и при помощи "Массового переноса пользователей" в админке перенести в неё всех неактивных,к примеру кто посетил последний раз сайт полгода или год назад...туда попадут все "мертвые души"
- а основную оставшуюся группу Пользователей посортировать информерами уже как вам угодно

Может Вы придумаете способ лучшей сортировки.Информеров можно сделать ровно столько,сколько вам позволяет ваш сайт (максимум 30 за исключением тех которые у вас есть)

6. После всего этого в шаблон информера (шаблоны информеров) вставляем следующий код

Code
<script type="text/javascript">  
e=document.getElementsByTagName('A');   
for(k=0; k<e.length;k++) {   
if(e[k].className=="$USERNAME$"){   
e[k].title = "<center><?if($AVATAR_URL$)?><img src=$AVATAR_URL$ height='100' width='100' border='0'><?else?><img src='http://romale80.ucoz.ru/noavatar.gif.png' border='0' height='100' width='100'><?endif?></center><br><span style='font-size: 8pt;font-weight:normal;'><b>Ник на сайте:</b> $USERNAME$<br><b>Пол:</b> $GENDER$<br><b>Группа:</b> $GROUP_NAME$<br><b>Страна:</b> $COUNTRY$<br><b>С нами с</b> <?if($USERNAME$='admin')?>03.09.2009<?else?>$REG_DATE$<?endif?><br><b>Опубликовал новостей:</b> $NEWS_POSTS$ шт.</span>";  
e[k].innerHTML = '<?if($GROUP_ID$==1)?><font color="blue"><?endif?>  
<?if($GROUP_ID$==2)?><font color="green"><?endif?>  
<?if($GROUP_ID$==3)?><font color="yellow"><?endif?>  
<?if($GROUP_ID$==4)?><font color="red"><?endif?>  
<?if($GROUP_ID$==251)?><font color="orange"><?endif?>  
<?if($GROUP_ID$==255)?><font color="gray"><?endif?>  
$USERNAME$</font>';   
}}   
</script>

Коды информеров ставим перед (я поставил в нижний контейнер) только не ввиде кода вызова информера,а в виде java скриптов инфориеров для того чтоб в итоге не получить киллометровый код страницы(в админке кликните на название информера и получите код,для тех кто не вкурсе)
Вот впринципе и всё!!!
Да и еще я добавил в скрипт возможность сделать всплывающую подсказку с аватаром и данными для информера пользователей посетивших сайт сегодня.
Для этого нужно создать информер пользователей посетивших сайт сегодня и вставить в его шаблон код (при условии если вы всё сделали для онлайн статистики)\

Code
<a href="$PROFILE_URL$" class="$USERNAME$1">$USERNAME$</a>,

Успешно протестировано на сайтах автора в браузерах Firefox 4,Opera 10, IE 8,Safari,Google Chrome и Рамблер Нихром

Картинки на noavatar ставим свои


Делаем все быстро, качественно, не дорого - выбираем любые два goldinter net
 
Форум » Система uCoz » Мини-профиль и Форма входа » Аватар и данные при наведении на ник для онлайн пользователе
  • Страница 1 из 1
  • 1
Поиск: