Личные сообщения в онлайне

Вопросы оформления, приемы HTML и JavaScript, обсуждение прочих стилей, не представленных в предыдущем разделе.
Правила форума
Если ваш вопрос касается стиля, загруженного в разделе "Стили для вашего форума", задайте пожалуйста вопрос в том разделе в теме конкретного стиля. Если ваш вопрос касается предустановленного стиля, задайте вопрос в соответствующей теме.
Создавайте НОВУЮ ТЕМУ только в том случае, если еще нет темы посвященной вашему стилю или вопрос не касается какого-то конкретного стиля.
Задавая вопрос, не забывайте написать название вашего стиля.
Спасибо! :)

Автор темы
s666
Сообщения: 30
Зарегистрирован: 19 мар 2016, 10:55
Откуда: Владивосток
Благодарил (а): 3 раза
Поблагодарили: 8 раз
Пол:

Личные сообщения в онлайне

Сообщение s666 » 21 май 2017, 14:22

Нарисовал для себя скриптик, который отслеживает появления новых личных сообщений и уведомлений в он-лайн режиме. А то шибко не удобственно перегружать всё время страницы. Но есть одна проблема - сервис не даёт возможности закачать на сервер мр3 файл. Подскажите пожалуйста как это можно сделать. Уж очень хочется сделать ещё и звуковую сигналку. Исходник выложу в этой ветке, но не хочется давать в массы сырую версию.
Тестовый форум Чарка

Аватара пользователя

beholder
Администратор
Сообщения: 1210
Зарегистрирован: 02 янв 2015, 08:15
Откуда: Владивосток
Благодарил (а): 35 раз
Поблагодарили: 438 раз
Пол:
Контактная информация:

Личные сообщения в онлайне

Сообщение beholder » 25 май 2017, 12:35

s666,
сделаем загрузку mp3 в "менеджер картинок", постараемся в ближайшее время.

Единственный нюанс - возможна будет загрузка только небольших по размеру mp3 файлов.
Поддержка GetBB.Ru
Бесплатный хостинг форумов PHPBB3

Ваши собственные домены с привязкой к форуму:
.ru - 200 руб./год , .рф - 250 руб./год. (кирилический домен)
in.ua - 7$/год. , .com,org,net - 12$/год.


Автор темы
s666
Сообщения: 30
Зарегистрирован: 19 мар 2016, 10:55
Откуда: Владивосток
Благодарил (а): 3 раза
Поблагодарили: 8 раз
Пол:

Личные сообщения в онлайне

Сообщение s666 » 25 май 2017, 13:23

beholder, да мне нужно то всего на пару секунд, так что бы пиликнуло пару раз. Так что за раннее спасибо! :Yahoo!:
Тестовый форум Чарка


Автор темы
s666
Сообщения: 30
Зарегистрирован: 19 мар 2016, 10:55
Откуда: Владивосток
Благодарил (а): 3 раза
Поблагодарили: 8 раз
Пол:

Личные сообщения в онлайне

Сообщение s666 » 04 июн 2017, 06:33

Пока жду возможности загрузки аудио файлов скрипт не плохо себя зарекомендовал. Очень удобно не перегружая страницу отслеживать поступающие уведомления о новых сообщениях в темах, новых ЛС и т.д. Нарисовано все в виде выезжающей с боку панельки. Пока показано только последнее уведомление. Стоит ли показывать все, пока не решил. Но и в этом виде всё очень функционально, облегчает жизнь модераторов и пользователей, нет необходимости лишний перегружать страницы. Сохранена возможность быстрого перехода к сообщению по клику, так же как в меню"уведомления". Вот так это выглядит в натуре:
Изображение

Так что очень жду возможности закачать аудио... :)
Тестовый форум Чарка


Автор темы
s666
Сообщения: 30
Зарегистрирован: 19 мар 2016, 10:55
Откуда: Владивосток
Благодарил (а): 3 раза
Поблагодарили: 8 раз
Пол:

Личные сообщения в онлайне

Сообщение s666 » 06 июн 2017, 08:41

Вот исходный обещанный исходный код. Что он делает? Отслеживает появление новых уведомлений, выдаёт звуковой сигнал и выводит в заголовке их количество. Звуковой оповещение можно отключать. Аудио файл, который вы хотите услышать закачайте в менеджере картинок. Формат МР3. Имя и путь к файлу укажите в функции soundClick(). В overall_footer_after.html запишем классы:

Код: Выделить всё

<style>
.mymessage {
   width: 200px;
   height: auto;
   left: -210px;
   top: 200px;
   float: left;
   position: fixed;
   display: block;
   opacity: 0.7;
   background-color: black;
   color: white ;
   border: 3px double white;
   border-radius: 4px;
   -webkit-transition-duration: 0.5s;
   -moz-transition-duration: 0.5s;
   -o-transition-duration: 0.5s;
   transition-duration: 0.5s;
}
.close {
    top: -10px;
    right: -10px;
    width: 20px;
    height: 20px;
    position: absolute;
    padding: 0;
    border: 2px solid #ccc;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
    background-color: rgba(61, 61, 61, 0.8);
    -webkit-box-shadow: 0px 0px 10px #000;
    -moz-box-shadow: 0px 0px 10px #000;
    box-shadow: 0px 0px 10px #000;
    text-align: center;
    text-decoration: none;
    font: 13px/20px 'Tahoma', Arial, sans-serif;
    font-weight: bold;
    -webkit-transition: all ease .8s;
    -moz-transition: all ease .8s;
    -ms-transition: all ease .8s;
    -o-transition: all ease .8s;
    transition: all ease .8s;
}
.close:before {
    color: rgba(255, 255, 255, 0.9);
    content: "X";
    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
    font-size: 12px;
}
.close:hover {
    background-color: rgba(252, 20, 0, 0.8);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);    
}
.my_block p {
   color: white;
   font-weight: 300;
   margin-bottom: 5px;
}
.my_block p.notification-time {
   font-size: 6pt;
}
.my_block p.notification-title span {
    color: #2aed25cc;
}
#addmessage img {
   width: 40px;
   height: auto;
   float: left;
   margin: 4px;
}
</style>
<script type="text/javascript">
function getCookie(name) {
    var nsearch = document.cookie.search(name)
    var lReturn = 'true'
    if (nsearch != -1) {
        var value =  document.cookie.substr(nsearch);
        nsearch = value.search('=');
        lReturn =  value.substr(nsearch+1);
    }
    return lReturn;
}
</script>
Сам html код:

Код: Выделить всё

<div class="mymessage" id="mymes">
  <a class="close" title="Закрыть" href="#close" onclick="if(mymes.offsetLeft<0) mymes.style.left='0px';  else {mymes.style.left='-210px'};"></a>
  <div id="add" style="border-bottom: 1px white solid; margin-bottom: 5px; padding-left: 5px;"> </div>
  <div id="addmessage"> </div>
  <div id="aud" style="border-top: 1px white solid; margin-top: 5px; padding-left: 5px;"> 
     <p style="font-size: 1em; margin-bottom: 0; color: white; font-weight: 700;"><input type="checkbox" id="chk_audio" onclick="setCookie ()" /> звуковое оповещение</p>
  </div>
  <script type="text/javascript">
    if (getCookie('myShecked')=='true') chk_audio.checked = 'checked';
  </script>
</div>
Ну и функции к этому коду. Что тут интересного? Вроде всё просто. Единственный момент, требующий пояснения. Если мы печатаем сообщение, то нам нужно запретить выполнение этой функции, иначе будет пропадать часть текста, т.к. выполнение функции занимает некоторое время. Избежать этого будет возможно если отцы-основатели phpBB сделают отдельный запрос типа этого - ЗАПРОС. Это бы сократило время выполнения. В переменную adress впишите адрес любой страницы вашего форума. Эту строчку кода нужно тоже подредактировать nsearch = mytitle.search('Ч'); Вместо буквы "Ч" впишите первую букву названия вашего форума.

Код: Выделить всё

<script type="text/javascript">
play=setInterval("newmessage()", 40000);   // установим интервал таймера

function newmessage()     // функции поиска личных сообщений
{ 
     if (document.getElementById("message") == document.activeElement){return false;}; // если мы печатаем ответ 

     var adress = ('http://distillate.rx22.ru/page/pochta');
     var xmlhttp = getXmlHttp();
     xmlhttp.open('GET', adress, false);
     xmlhttp.send(null);
     var response = xmlhttp.responseText;                                // загнали страницу в переменную


     nsearch = response.search('notification_list_button');      //найдём есть ли новые уведомления
     response =  response.substr(nsearch);
     nsearch = response.search('<strong>');
     var newuved =  Number(response.substr(nsearch+8, 1));
     var text = "";
     if (newuved > 0)
     {
        if (newuved == 1) text = " новое сообщение";   // поправим орфографию
          else {if (newuved > 4) text = " новых сообщений";
            else text = " новых сообщения";
          }

        document.getElementById('add').innerHTML = "Получено <b>" + newuved + "</b>" + text ;

        nsearch = response.search('notification-block');    // найдём уведомление
        response =  response.substr(nsearch);
        nsearch = response.search('</a>');
        text =  '<a class="' +  response.substr(0, nsearch+4);
        text = text.replace('notification_text', 'my_block');   //  поменяем класс на свой
        document.getElementById('addmessage').innerHTML = text ;
        
        var mytitle = document.title;  // покажем уведомление в заголовке
        nsearch = mytitle.search('Ч');
        if (nsearch != -1) mytitle = mytitle.substr(nsearch);
        document.title = "(" + newuved + ") " + mytitle;

        if (chk_audio.checked) soundClick();    // запустим музыку...
        mymes.style.left = "0px";

     }
}

function getXmlHttp() {
 var xmlhttp;
    try {
       xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
       } catch (e) {try {
           xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");} catch (E) {
           xmlhttp = false;
       }
    }
    if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
        xmlhttp = new XMLHttpRequest();
    }
    return xmlhttp;
 }

var TIME = 3*24*60*60*1000; // установим 3 дня
function setCookie () {
    var time = new Date();
    time.setTime(Date.parse(time) + TIME);
    var value = chk_audio.checked;
    document.cookie = 'myShecked=' + value + '; expires=' + time;
}

function soundClick() {
  var audio = new Audio(); // Создаём новый элемент Audio
  audio.src = 'http://distillate.rx22.ru/store/distillate_rx22_ru/images/Sound4588.mp3';      // Указываем путь к звуку 
  audio.autoplay = true; //  Запускаем
}
</script>
Вот в принципе и всё... пользуйтесь на здоровье! 8)
Последний раз редактировалось s666 19 июн 2017, 08:18, всего редактировалось 7 раз.
Тестовый форум Чарка


blues
Сообщения: 113
Зарегистрирован: 03 апр 2015, 16:11
Благодарил (а): 51 раз
Поблагодарили: 23 раза
Пол:
Контактная информация:

Личные сообщения в онлайне

Сообщение blues » 15 июн 2017, 20:30

Попробовал, не получилось. Можно подробнее куда вставлять второй и третий код


Автор темы
s666
Сообщения: 30
Зарегистрирован: 19 мар 2016, 10:55
Откуда: Владивосток
Благодарил (а): 3 раза
Поблагодарили: 8 раз
Пол:

Личные сообщения в онлайне

Сообщение s666 » 16 июн 2017, 04:26

blues, весь код записан в один файл - overall_footer_after.html. В порядке приведённом мной. Не забывайте указывать путь к своему форуму вот в этой строке:
var adress = ('http://distillate.rx22.ru/page/pochta');
Вместо http://distillate.rx22.ru/page/pochta пишем адрес любой страницы Вашего форума.К сожалению у Вас нет ссылки на ваш ресурс, так что не смогу дать более развёрнутые рекомендации.
Тестовый форум Чарка


blues
Сообщения: 113
Зарегистрирован: 03 апр 2015, 16:11
Благодарил (а): 51 раз
Поблагодарили: 23 раза
Пол:
Контактная информация:

Личные сообщения в онлайне

Сообщение blues » 16 июн 2017, 19:18

Так и делал, но...
Разобрался, в коде отсутстует тег <style> поетому получается вот такое

Изображение

Добавил тег, все вроде заработало, но звука нет, ставлю галочку "звуковое оповещение" но она не сохраняется...


Автор темы
s666
Сообщения: 30
Зарегистрирован: 19 мар 2016, 10:55
Откуда: Владивосток
Благодарил (а): 3 раза
Поблагодарили: 8 раз
Пол:

Личные сообщения в онлайне

Сообщение s666 » 17 июн 2017, 00:21

blues, спасибо за подсказку... действительно забыл тег. Исправил исходный код. С куками гляну что твориться. У меня вроде работает...

Отправлено спустя 4 часа 2 минуты 14 секунд:
Разобрался с куками...
Функцию getCookie

Код: Выделить всё

function getCookie(name) {
    var nsearch = document.cookie.search(name)
    var lReturn = 'true'
    if (nsearch != -1) {
        var value =  document.cookie.substr(nsearch);
        nsearch = value.search(';');
        lReturn =  document.cookie.substr(name.length+1, nsearch-1);
    }
    return lReturn;
}
меняем на

Код: Выделить всё

function getCookie(name) {
    var nsearch = document.cookie.search(name)
    var lReturn = 'true'
    if (nsearch != -1) {
        var value =  document.cookie.substr(nsearch);
        nsearch = value.search('=');
        lReturn =  value.substr(nsearch+1);
    }
    return lReturn;
}
Должно помочь...
Строку с описанием класса

Код: Выделить всё

<a class="close" title="Закрыть" href="#close" onclick="mymes.style.left='-210px'"></a>
заменим на

Код: Выделить всё

<a class="close" title="Закрыть" href="#close" onclick="if(mymes.offsetLeft<0) mymes.style.left='0px';  else {mymes.style.left='-210px'};"></a>
Теперь если нажать на выступающий край кнопки панелька сама выдвинется, что позволит менять настройки не дожидаясь еёпоявления. Повторный клик задвинет панельку.

Отправлено спустя 4 минуты 29 секунд:
Исходный код отредактирован!
Тестовый форум Чарка


blues
Сообщения: 113
Зарегистрирован: 03 апр 2015, 16:11
Благодарил (а): 51 раз
Поблагодарили: 23 раза
Пол:
Контактная информация:

Личные сообщения в онлайне

Сообщение blues » 17 июн 2017, 20:02

Нет, со звуком те же траблы, после перезагрузки страницы галочка снимается...

Ответить