Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 27.05.2014, 02:53
Новичок на форуме
Отправить личное сообщение для DVNSA Посмотреть профиль Найти все сообщения от DVNSA
 
Регистрация: 07.03.2010
Сообщений: 5

всплывающие подсказки - проблема с позиционированием
Уважаемые спецы!
В браузер выводится большая таблица.
Каждая строка содержит img-ссылку ("?"), при нажатии на которую появляется подсказка.
Проблема у меня в том, что при вызове подсказок с нижних позиций (после прокрутки экрана) подсказки эти не видны, так как появляются в начале страницы.
Как сделать, чтобы подсказки появлялись в зоне видимости, я не знаю. Очень прошу Вашей помощи.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Всплывающие подсказки</title>

<script type="text/javascript">
//понадобится 4 функции
// show, чтобы показать всплывающее окно
function show(evt, id) {
    var evt = evt || window.event;
    var o = evt.target || evt.srcElement;
    var f = document.getElementById('cur_popup_note');
    if (f == null) {
        f = document.createElement('div');
        f.setAttribute('id', 'cur_popup_note');
        f.setAttribute('style',
            'progid:DXImageTransform.Microsoft.Alpha(opacity=100); ' +
            'opacity: 1; display: block; top: 0px; left: 0px;' +
            'width:200px; height:auto;');
        f.setAttribute('class', 'popup');
        document.body.appendChild(f);
    }
    f.opacityFilter = 0;
    f.innerHTML = '<img src="http://<?php echo $_SERVER['HTTP_HOST']; ?>/images/img/x.jpg" height="13" width="13" border="0" id="x_image" ' + 'style="cursor:pointer;float:right;" onclick="hide();">' + '<div style="padding: 10px">' + document.getElementById(id).innerHTML + '</div>';
    f.className = 'popup_active';
    f.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + (f.opacityFilter * 100) + ');';
    f.style.opacity = f.opacityFilter;
    f.style.display = 'block';
    var o_coords = getPosition(o);
    var f_coords = getPosition(f);
    var calculatedTop = (f.offsetTop + (o_coords.top - f_coords.top));
    var calculatedLeft = (f.offsetLeft + (o_coords.left - f_coords.left));
    if (calculatedTop + f.offsetHeight > document.body.offsetHeight)
        calculatedTop = document.body.offsetHeight - f.offsetHeight;
    if (calculatedLeft + 200 > document.body.offsetWidth)
        calculatedLeft = document.body.offsetWidth - 220;
    f.style.top = calculatedTop + 'px';
    f.style.left = calculatedLeft + 'px';
    window.setTimeout('animate()', 50);
    evt.cancelBubble = true;
    return false;
}

// hide, чтобы спрятать его
function hide() {
    var div = document.getElementById('cur_popup_note');
    if (div != null) {
        div.className = 'footnote_new';
        div.style.display = 'none';
    }
    return false;
}

// animate, чтобы управлять процессом "всплывания"
function animate() {
    var f = document.getElementById('cur_popup_note');
    f.opacityFilter += 0.05;
    f.style.filter = 'progid:DXImageTransform.Microsoft.Alpha(opacity=' + (f.opacityFilter * 100) + ');';
    f.style.opacity = f.opacityFilter;
    if (f.opacityFilter < 1) window.setTimeout('animate()', 50);
}

// служебная функция getPosition, которая поможет вычислить положение объектов на странице. 
function getPosition(offsetTrail) {
    var offsetLeft = 0;
    var offsetTop = 0;
    while (offsetTrail) {
        offsetLeft += offsetTrail.offsetLeft;
        offsetTop += offsetTrail.offsetTop;
        offsetTrail = offsetTrail.offsetParent;
    }
    return {
        left: offsetLeft,
        top: offsetTop
    }
}
</script>
</head>

<body>
	<table>
		<tr>
			<td>
				<img border="0" onclick="return show(event, 'note1')" 
                src="http://../images/img/q.jpg" alt="" 
            	title="Нажмите здесь для помощи" style="cursor: pointer;">
                    
				<div id='note1' style='display: none'>
					Всплывающий текст подсказки
				</div>
			</td>
		</tr>
                .....
	</table>
</body>
</html>

Последний раз редактировалось Octane, 27.05.2014 в 09:54. Причина: форматирование
Ответить с цитированием
  #2 (permalink)  
Старый 30.05.2014, 14:18
Новичок на форуме
Отправить личное сообщение для DVNSA Посмотреть профиль Найти все сообщения от DVNSA
 
Регистрация: 07.03.2010
Сообщений: 5

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

DVNSA,
Вывод изо в видимой области экрана
Ответить с цитированием
  #4 (permalink)  
Старый 30.05.2014, 14:51
Профессор
Отправить личное сообщение для WorM32 Посмотреть профиль Найти все сообщения от WorM32
 
Регистрация: 11.02.2014
Сообщений: 303

Разбираться в коде не хочется. По этому привожу общий принцип.

<style>
#tooltip {
    display: none;
    position: absolute;
    border: 1px solid #666;
    background-color: #AAA;
}
</style>

<div style="height: 100px"></div>
<button type="button" value="">Показать тултип</button>
<div style="height: 500px"></div>
<button type="button" value="">Показать тултип</button>
<div id="tooltip">Текст текст текст</div>

<script>
var buttons = Array.prototype.slice.call(document.getElementsByTagName('button'));
buttons.forEach(function (button) {
    button.addEventListener('click', onClick, false);
});

var tooltip = document.getElementById('tooltip');
    diffTop = -20,  // смещение по y
    diffLeft = 20; // смещение по х

function onClick(e) {
    var el = e.target,
        top = el.offsetTop,
        left = el.offsetLeft,
        width = el.offsetWidth;
    
    tooltip.style.left = left + width + diffLeft + 'px';
    tooltip.style.top = top + diffTop + 'px';
    tooltip.style.display = 'block';
}
</script>
Ответить с цитированием
  #5 (permalink)  
Старый 30.05.2014, 14:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

WorM32,
Сообщение от DVNSA
Как сделать, чтобы подсказки появлялись в зоне видимости
в вашем примере неувидел
Ответить с цитированием
  #6 (permalink)  
Старый 30.05.2014, 15:10
Профессор
Отправить личное сообщение для WorM32 Посмотреть профиль Найти все сообщения от WorM32
 
Регистрация: 11.02.2014
Сообщений: 303

Сообщение от рони Посмотреть сообщение
WorM32,

в вашем примере неувидел
как я понял основное было это
Цитата:
Проблема у меня в том, что при вызове подсказок с нижних позиций (после прокрутки экрана) подсказки эти не видны, так как появляются в начале страницы.
Это отражено в моем примере. А добавить пару условий на проверку в какую сторону их выбрасывать - это в качестве домашнего задания)
Ответить с цитированием
Ответ


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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Всплывающие подсказки qTip RAULpmk Элементы интерфейса 7 10.07.2013 17:41
Нестандартные всплывающие подсказки. Нужна конструктивная критика! Zuenf Ваши сайты и скрипты 12 10.03.2013 16:42
скрипт всплывающей подсказки kent666 Events/DOM/Window 0 03.11.2011 17:59
Проблема с relative и abolute z-index позиционированием strel (X)HTML/CSS 2 31.12.2009 13:25
Всплывающие подсказки в IE arseniy-at-home Элементы интерфейса 8 27.07.2009 16:13