среда, 17 марта 2010 г.

Попасть всплывающим окном в монитор

Задача. Показать пользователю окно рядом с местом, куда он щёлкнул мышкой. Если щёлкнул в середине или вверху экрана — показать окно чуть ниже щелчка. Если щёлкнул в самом низу экрана — наоборот, показать выше щелчка, чтобы оно не спряталось внизу.

Вот кусок живого кода (тестировалось в О9.64, ФФ3.6,ИЕ8 и S4:

// Показывает окно с предложением выбрать путь
function pickPath (pathVar, path, event, obj) {
// Прокрученное пользователем сверху расстояние
var scrY = getScrollXY()[1];
// Расстояние от верха окна браузера
var offY = getMouseXY(event)[1] - scrY;
// Высота окна браузера
var cH = document.body.clientHeight;
if ((offY + 100) < cH)
y = offY + 20 + scrY;
else
y = offY + scrY - 90;
document.getElementById('winPs').style.top = y;
document.getElementById('winPs').style.left = 22;
document.getElementById('winPs').style.display = 'block';
document.getElementById('fieldPs').value = path;
}

// Возвращает абсолютные координаты курсора мыши
function getMouseXY(event) {
if (event.pageX || event.pageY) {
mouseX = event.pageX;
mouseY = event.pageY;
} else {
mouseX = event.clientX + document.body.scrollLeft;
mouseY = event.clientY + document.body.scrollTop;
}
return [mouseX, mouseY];
}

// Возвращает прокрутку экрана
function getScrollXY() {
var scrOfX = 0, scrOfY = 0;
if( typeof( window.pageYOffset ) == 'number' ) {
//Netscape compliant
scrOfY = window.pageYOffset;
scrOfX = window.pageXOffset;
} else if( document.body && ( document.body.scrollLeft || document.body.scrollTop ) ) {
//DOM compliant
scrOfY = document.body.scrollTop;
scrOfX = document.body.scrollLeft;
} else if( document.documentElement && ( document.documentElement.scrollLeft || document.documentElement.scrollTop ) ) {
//IE6 standards compliant mode
scrOfY = document.documentElement.scrollTop;
scrOfX = document.documentElement.scrollLeft;
}
return [scrOfX, scrOfY];
}


Примечания.

1. Вначале я определял положение курсора в одну строчку, но та функция не заработала в Опере.

2. Если нужно получить координаты внутри, например, картинки, надо использовать конструкцию типа такой:

y = y - obj.offsetTop;
x = x - obj.offsetLeft;

3. Функцию определения скроллинга я целиком позаимствовал вот отсюда: ссылка. В другом месте видел таблицу, из которой следует, что сократить конструкцию будет непросто.

4. Функцию определения позиций мыши снянул у Дейва: ссылка. По пути копи-паста функция сократилась в три раза, так что, возможно, в ней что-то испортилось.

Комментариев нет:

Отправить комментарий

Архив блога