Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.04.2020, 11:39
Новичок на форуме
Отправить личное сообщение для Daniil464 Посмотреть профиль Найти все сообщения от Daniil464
 
Регистрация: 16.04.2020
Сообщений: 3

Мерцает элемент при расчете позиционирования
Добрый день! Устал уже, мерцает элемент. Пытаюсь сделать всплывающую подсказку для всех картинок на странице. В js разбираюсь не особо, но вроде бы то что сделал должно работать по моей логике, но похоже логика js'а конфликтует, или это вообще невозможно сделать. Картинок будет много и много одинаковых, каждым прописывать класс или айди нет желания, поэтому таргетом для подсказок сделал атрибут(src путь к картинке).

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

Вот ссылка на мой г**код https://jsfiddle.net/Daniil464/vgnwj9q1/28/

Вызов через jQuery вместо $, потому что пишу для wordpress.

Последний раз редактировалось Daniil464, 16.04.2020 в 12:15.
Ответить с цитированием
  #2 (permalink)  
Старый 16.04.2020, 12:32
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

Если ваш движок уже использует Bootstrap, то в нем уже есть готовые подсказки, нужно их только подключить к объектам. Как это делается и какие параметры можно задавать им, все это в документации Bootstrap есть.
Ответить с цитированием
  #3 (permalink)  
Старый 16.04.2020, 12:53
Новичок на форуме
Отправить личное сообщение для Daniil464 Посмотреть профиль Найти все сообщения от Daniil464
 
Регистрация: 16.04.2020
Сообщений: 3

Спасибо за ответ, Booststrap есть, но его функционал меня не устраивает. Мне нужно выводить в подсказки куски кода в том числе. Плюс к этому, приписывать каждой подсказку и добавлять всем картинкам\иконкам класс, скажем которых может быть более 1000 на странице, абсолютно никакого желания. В целом мой костыль уже написан и работает, но с отступом от краев окна как то посолидней будет, вот и ломаю голову. Видимо в логике где то ошибся и скрипт циклически вычисляет свое положение относительно низа страницы, или что то в этом роде. По ссылке в коде расписал комментариями что и как.
Ответить с цитированием
  #4 (permalink)  
Старый 16.04.2020, 13:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

Daniil464,
mousemove: function(e){
let all = jQuery(window).height();
let height = jQuery('#hint').outerHeight(true) + 30;
let offset = all - (e.clientY + height);
let pagetop = e.pageY;
if (offset < 0) pagetop = e.pageY + offset;
hint.css({top: pagetop, left: e.pageX});
    }
Ответить с цитированием
  #5 (permalink)  
Старый 16.04.2020, 13:17
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,989

Сообщение от Daniil464
Плюс к этому, приписывать каждой подсказку и добавлять всем картинкам\иконкам класс
Это не требуется, это как раз можно через JS сделать, добавлять подсказку по событию. А в Booststrap много всяких плюшек, в которые можно выводить любое содержимое.
Ответить с цитированием
  #6 (permalink)  
Старый 16.04.2020, 13:20
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

Daniil464,
в пределах видимости
Ответить с цитированием
  #7 (permalink)  
Старый 16.04.2020, 13:44
Новичок на форуме
Отправить личное сообщение для Daniil464 Посмотреть профиль Найти все сообщения от Daniil464
 
Регистрация: 16.04.2020
Сообщений: 3

Огромнейшее спасибо!
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как добавить класс при удержание нажатия на элемент ethereal Элементы интерфейса 1 05.08.2019 05:15
Как сделать чтобы при прокрутке элемент изменялся Zombie_Killer Общие вопросы Javascript 7 03.11.2017 07:37
Действия при наведении на элемент Garik Элементы интерфейса 6 24.08.2010 20:11
Как создать элемент при нажатии мышки? Арсений Элементы интерфейса 4 03.07.2010 15:00
Закрыть элемент при клике вне его masterm Общие вопросы Javascript 3 31.07.2009 11:27