Javascript.RU

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

Проверить доступную высоту страницы и показать блок со свободной стороны
Привет. Есть следующая реализация кастомного тултипа.
<a href="#" class="custom_tooltip">{text}
<div>Тултип</div>
</a>
<style>	.custom_tooltip {
		display: inline-block;
		position: relative;
	}
	.custom_tooltip div {
		display: none;
		position: absolute;
		top: 15px;
		left: 0px;
		z-index:9999;
                width: 100px;
                height: 320px;
	}
	.custom_tooltip:hover div {
		display: block;
	}
 </style>

Размеры <div> известны и сейчас он всегда показывается снизу от ссылки (так как это прописано в CSS). Подскажите, как на JS реализовать проверку доступного места на странице и показывать <div> со свободной стороны.
Ответить с цитированием
  #2 (permalink)  
Старый 28.02.2018, 22:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,043

BZDR,
http://jqueryui.com/tooltip/#custom-content
Ответить с цитированием
  #3 (permalink)  
Старый 28.02.2018, 22:56
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

el.getBoundingClientRect() - даст вам все необходимые цифры

https://developer.mozilla.org/ru/doc...dingClientRect
Ответить с цитированием
  #4 (permalink)  
Старый 28.02.2018, 22:56
Новичок на форуме
Отправить личное сообщение для BZDR Посмотреть профиль Найти все сообщения от BZDR
 
Регистрация: 28.02.2018
Сообщений: 4

Сообщение от рони Посмотреть сообщение
BZDR,
http://jqueryui.com/tooltip/#custom-content
А на чистом JS есть реализация?
Ответить с цитированием
  #5 (permalink)  
Старый 28.02.2018, 23:06
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,043

BZDR,
возможно есть, искать надо или переделать jQuery.fn.center на js
из примера ниже или разработать свой алгоритм.
https://javascript.ru/forum/jquery/4...tml#post276809
Ответить с цитированием
  #6 (permalink)  
Старый 28.02.2018, 23:27
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

рони,
Пример морально устарел =(
Ответить с цитированием
  #7 (permalink)  
Старый 01.03.2018, 00:13
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,043

j0hnik,
Сообщение от рони
или разработать свой алгоритм.
Ответить с цитированием
  #8 (permalink)  
Старый 01.03.2018, 00:17
Новичок на форуме
Отправить личное сообщение для BZDR Посмотреть профиль Найти все сообщения от BZDR
 
Регистрация: 28.02.2018
Сообщений: 4

рони,
Проблема в том, что я js абсолютный ноль
Ответить с цитированием
  #9 (permalink)  
Старый 01.03.2018, 00:27
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

рони,
ок, но все же поправь протокол чтобы там тоже работал.
Ответить с цитированием
  #10 (permalink)  
Старый 01.03.2018, 00:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 29,043

BZDR,
https://javascript.ru/forum/dom-wind...tml#post449378
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как проверить сайт клиента на установленный блок Alexmad Серверные языки и технологии 10 02.04.2015 20:03