Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.01.2023, 14:59
Интересующийся
Отправить личное сообщение для dvbshka Посмотреть профиль Найти все сообщения от dvbshka
 
Регистрация: 07.05.2020
Сообщений: 17

Вывод даты сообщения при скролле
Доброго времени суток!

У меня такая проблема:
Есть чат, написан на php и js.
Есть скрипт-условие-событие, которое при наведении на время в сообщении делает типо hover эффект и показывает дату вверху окна чата.

Вот так:



Вот код:

$("body").on('mouseenter', '.main .chatbox > .contents > .chat_messages > ul > li > div >.right > .header > .tools > .timestamp', function(e) {
    $('.main .chatbox > .contents > .date').hide();
    if ($(this).parents('.message').find('.date').attr('message_sent_on') !== undefined) {
        var message_sent_on = $(this).parents('.message').find('.date').attr('message_sent_on');
        $('.main .chatbox > .contents > .date > span').text(message_sent_on);
        $('.main .chatbox > .contents > .date').show();
    }
});

$("body").on('mouseleave', '.main .chatbox > .contents > .chat_messages > ul > li > div >.right > .header > .tools > .timestamp', function(e) {
    $('.main .chatbox > .contents > .date').hide();
});


Собственно вопрос:

Как сделать так, чтобы не при наведении на время, а при скролле вверх или вниз показывалась дата сверху и исчезала при остановке скролла.

Заранее спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 08.01.2023, 17:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

dvbshka,
информации недостаточно ...
let timer;
            $("body").on('scroll', function() {
                window.clearTimeout(timer);
                $('.main .chatbox > .contents > .date').show();
                timer = window.setTimeout(function() {
                    $('.main .chatbox > .contents > .date').hide();
                }, 100)
            })
Ответить с цитированием
  #3 (permalink)  
Старый 08.01.2023, 20:01
Интересующийся
Отправить личное сообщение для dvbshka Посмотреть профиль Найти все сообщения от dvbshka
 
Регистрация: 07.05.2020
Сообщений: 17

Да, это работает как мне нужно, но оно саму дату не выводит почему то(
Просто черное пятно при скролле появляется и все.
Думаю это связанно с тем, что к скроллу нужно как то привязать действие или какой то триггер, который как в моем примере будет выводить дату, только у меня при наведении мыши она показывается, а нужно чтобы при скролле цеплялась к сообщению и показывала его дату.
Типо чтобы работало как в телеграмм, скроллишь и сверху показывается дата.

В консоли браузера, у каждого сообщения все данные есть



Скидываю файлы, которые связанны с этим делом, может сможете помочь(

В chatbox.php 115 по 117 строки.
В middle.js 153 по 164 строки (это то что я скидывал изначально)
messages.js тоже как то связан с датами итд.

files.zip
Ответить с цитированием
  #4 (permalink)  
Старый 09.01.2023, 05:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

dvbshka,
пробуйте ...
let timer, show = false;
            $("body").on('scroll', function() {
                window.clearTimeout(timer);
                if (!show) {
                    $("[message_sent_on]").each(function(i, el) {
                        let message_sent_on = el.getAttribute("message_sent_on");
                        el.querySelector("span").textContent = message_sent_on;
                        $(el).show();
                    })
                    show = true;
                }
                timer = window.setTimeout(function() {
                    $("[message_sent_on]").hide();
                    show = false;
                }, 100)
            })

Последний раз редактировалось рони, 09.01.2023 в 05:20.
Ответить с цитированием
  #5 (permalink)  
Старый 09.01.2023, 12:12
Интересующийся
Отправить личное сообщение для dvbshka Посмотреть профиль Найти все сообщения от dvbshka
 
Регистрация: 07.05.2020
Сообщений: 17

рони,

Теперь происходит такая вещь.

Даты появились у каждого сообщения слева и не исчезают, при этом когда скроллишь, то все моргает, дата, сами сообщения,даже если остановить скролл.((

В консоли браузера стили меняются постоянно вот так:





Хотелось бы, чтобы дата выводилась при скролле один раз вверху страницы, а не у каждого сообщения.
Как в первом моем сообщении, но там это работает только при наведении на элемент.
Всю голову сломал, с js вообще не дружу


Может как то нужно привязаться к дате, которая сейчас по середине выводится (она показывается один раз, у первого сообщения за сутки) и с помощью этого показывать при скролле вверху эту дату?

Ответить с цитированием
  #6 (permalink)  
Старый 09.01.2023, 12:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

dvbshka,
параметр 100, попробуйте увеличить от 300 до 800, может поможет.
Ответить с цитированием
  #7 (permalink)  
Старый 09.01.2023, 12:18
Интересующийся
Отправить личное сообщение для dvbshka Посмотреть профиль Найти все сообщения от dvbshka
 
Регистрация: 07.05.2020
Сообщений: 17

рони,
Пробовал, тоже самое, но с большим интервалом
Ответить с цитированием
  #8 (permalink)  
Старый 09.01.2023, 12:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

dvbshka,
ваши описания важны, но мне они слабо помогают разобраться, что вы хотите сделать и как это можно сделать, пока без вариантов.
Ответить с цитированием
  #9 (permalink)  
Старый 09.01.2023, 14:20
Интересующийся
Отправить личное сообщение для dvbshka Посмотреть профиль Найти все сообщения от dvbshka
 
Регистрация: 07.05.2020
Сообщений: 17

рони,

Я понимаю, извините, просто сам не могу в голове собрать то, каким методом это сделать.

Хотел, чтобы работало вот так:

Чтобы сверху дата была закреплена при скролле и менялась в зависимости от даты сообщений как в этом видео из телеграмм.

https://cloud.nexofix.ru/index.php/s/YQgW4dGgLB3tQTd

Видео по ссылке, так как здесь нельзя добавлять mp4 файлы.

Последний раз редактировалось dvbshka, 09.01.2023 в 14:29.
Ответить с цитированием
  #10 (permalink)  
Старый 09.01.2023, 14:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

dvbshka,
мысли вслух: нужно сделать отдельный блок, в который будет выводится дата, ближайшего к верху окна сообщения.
и макет бы сделать ...

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Горизонтальный скролл блоков при вертикальном скролле muhuvovu Элементы интерфейса 1 06.10.2022 14:33
Появление изображения при скролле вниз на 200 пикселей Stas1985 Элементы интерфейса 2 07.10.2020 16:00
Вывод сообщения при наведении на фотографию Turok005 Общие вопросы Javascript 4 24.11.2010 16:28
Вывод сообщения при нажатии MCTrane Общие вопросы Javascript 1 15.01.2010 16:09
Вывод данных единожды, при открытии окна? Ggorsh Events/DOM/Window 1 28.04.2009 01:04