Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   Позиционировать сообщение относительно курсора. (https://javascript.ru/forum/misc/83586-pozicionirovat-soobshhenie-otnositelno-kursora.html)

Ubivectel 17.01.2022 15:02

Позиционировать сообщение относительно курсора.
 
Hello, world!

Имеем элемент .K_copy при клике на который копируется содержимое дива. Добавил код который выводит сообщение "скопировано" вот скрипт:

$("#K_copy").show(400, function () {
            setTimeout(function () {
                $("#K_copy").hide(300);
            }, 800);
        });


Единственное чего не хватает для счастья, что бы сообщение выводилось рядом с курсором или точнее в том месте где был клик, сейчас пришлось задать абсолютное позиционирование, но как-то это не по феншую :help:

ksa 17.01.2022 15:04

Ubivectel, оно?
https://ru.stackoverflow.com/questio...урсором

Ubivectel 17.01.2022 15:17

Оно самое, только хоть убей пока не пойму как и куда это вписать, синтаксис мое очень слабое место )))

ksa 17.01.2022 15:29

Цитата:

Сообщение от Ubivectel
только хоть убей пока не пойму как и куда это вписать

В обработку клика...
Там есть событие мыши - можно узнать координаты курсора. Далее создается элемент, вставляется в нужного родителя, позиционируется по тем координатам и в него выводится нужное содержимое.

рони 17.01.2022 15:31

Цитата:

Сообщение от Ubivectel
в том месте где был клик,

https://javascript.ru/forum/events/6...tml#post447668

Ubivectel 18.01.2022 17:06

На исходе второй день мозголомки, хоть убей не получается корректно вписать ни первый ни второй пример, либо ломаю код, либо не работает, если я правильно понял это:

if (e.pageX + hint.offsetWidth < document.body.offsetWidth) {
    hint.style.top = e.pageY + 10 + 'px';
    hint.style.left = e.pageX + 10 + 'px';
} else {
    hint.style.top = e.pageY + 10 + 'px';
    hint.style.left = e.pageX - hint.offsetWidth - 10 + 'px';
}


Нужно как-то вписать вот в это:

document.addEventListener("click", ({ target }) => {
    if (target = target.closest('.K_copy')) {
        target = target.closest('.KIDE_msg_top')
        let clon = target.cloneNode(true);
        clon.querySelectorAll(".KIDE_quote").forEach(el => el.remove()); 
        let text = clon.textContent; 
        navigator.clipboard.writeText(text);

        $("#K_copy").show(400, function () {

            setTimeout(function () {
                $("#K_copy").hide(300);
            }, 800);
        });
    }
});


Как только не перепробовал, очень хотелось справиться самому :cray:

рони 18.01.2022 17:28

Ubivectel,
сделайте минимальный макет или ждите телепатов.

Ubivectel 18.01.2022 17:42

Понял, вот кнопочка:

<i class="fa fa-clipboard K_copy" title="Копировать" aria-hidden="true"></i>


Вот то что она копирует, хотя это наверное не нужно:

<div id="KIDE_id_526841" class="KIDE_msg_top"><span class="KIDE_msg_hour"> 19:11 -</span> <span style="cursor: pointer" title="18-1 19:11:07" oncontextmenu="event.preventDefault();kide.mensaje('nikname',0,526841,'','18-1 19:11:07','4f0cd4f2e29c3de4a13ef858f2e0b7e0',3,'http://www.gravatar.com/avatar/438c755fdaef894d49d469da93a7e479?s=50&amp;d=wavatar')" class="KIDE_guest"><span style="cursor: pointer" title="18-1 19:11:07" onclick="kide.insertSmile('Оляпка_4454, ')" class="KIDE_guest">hikname</span>: <span class="KIDE_dc_guest KIDE_msg"> Текст сообщения </span>
</span></div>


Вот HTML самого сообщения:

<noindex class="K-copy">
    <div id="K_copy" style="display: none;">
        Скопировано!
    </div>
</noindex>

voraa 18.01.2022 17:45

Цитата:

Сообщение от Ubivectel
 navigator.clipboard.writeText(text);

На http работать не будет.

Ubivectel 18.01.2022 17:49

Цитата:

Сообщение от voraa (Сообщение 543116)
На http работать не будет.

На https работает )))


Часовой пояс GMT +3, время: 14:39.