Координаты елемента после прокрутки страницы
Здавствуйте.
Помогите, пожалуйста, со скриптом. Мне надо: когда подвести мышку под ссылку, то под ней должен появится блок div (типа под-меню). Вот что сделал:
function getElementPosition(elemId)
{
var elem = document.getElementById(elemId);
var w = elem.offsetWidth;
var h = elem.offsetHeight;
var l = 0;
var t = 0;
while (elem)
{
l += elem.offsetLeft;
t += elem.offsetTop;
elem = elem.offsetParent;
}
return {"left":l, "top":t, "width": w, "height":h};
}
function list_over(el)
{
pos = getElementPosition(el);
var left = pos.left;
var height = pos.height;
var top = pos.top;
document.getElementById('blok_1').style.left = left;
document.getElementById('blok_1').style.top = top+height-3;
document.getElementById('blok_1').style.visibility = 'visible';
}
function l_over()
{
document.getElementById('blok_1').style.visibility = 'visible';
}
function list_out()
{
document.getElementById('blok_1').style.visibility = 'hidden';
}
Есть сслыка под которой надо вывести блок (div):
<a href="#" id="menu1" onmouseover="list_over('menu1')" onmouseout="list_out()">Ссылка первая</a>
Сам div: <div id="blok_1" onmouseover="l_over()" onmouseout="list_out()" class="podmenu"> - <a href="1" class="url_none">111111</a><br> - <a href="2" class="url_none">2222222</a><br> - <a href="3" class="url_none">333333333</a> </div> Стиль div’a:
div.podmenu{
border: 1px solid olive;
padding: 7px;
visibility: hidden;
position: fixed;
_position: absolute;
background: white;
}
Все это работает нормально во всех "основных" браузерах, НО когда прокрутить страницу вниз, то в Мозиле блок div остается на том же месте (в ИЕ все нормально), то-есть не появляется под ссылкой. Вопрос: как сделать, чтоб в Мозиле этот div появился именно под ссылкой не зависимо от того, прокрутили мы страницу вниз или нет? Возможно проблема даже не в яваскрипте, а в css, помогите разобраться, плиз... |
peter888, ты покажи полный пример... Не кусками.
|
Вариант ... добавлен scroll и px
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
div.podmenu{
border: 1px solid olive;
padding: 7px;
visibility: hidden;
position: fixed;
_position: absolute;
background: white;
}
</style>
<script type="text/javascript">
function getElementPosition(elemId)
{
var elem = document.getElementById(elemId);
var w = elem.offsetWidth;
var h = elem.offsetHeight;
var l = 0;
var t = 0;
while (elem)
{
l += elem.offsetLeft;
t += elem.offsetTop;
elem = elem.offsetParent;
}
return {"left":l, "top":t, "width": w, "height":h};
}
function getWindow(doc) {
return doc.parentWindow || doc.defaultView;
}
function getDocumentScroll(doc) {
doc = doc || document;
var win = getWindow(doc);
return [
win.pageXOffset || doc.documentElement.scrollLeft || doc.body.scrollLeft || 0,
win.pageYOffset || doc.documentElement.scrollTop || doc.body.scrollTop || 0
];
}
function list_over(el)
{
pos = getElementPosition(el);
var left = pos.left;
var height = pos.height;
var top = pos.top;
var scroll = getDocumentScroll();
var scrollLeft = scroll[0];
var scrollTop = scroll[1];
document.getElementById('blok_1').style.left = left+"px";
document.getElementById('blok_1').style.top = top+height-scrollTop+"px";
document.getElementById('blok_1').style.visibility = 'visible';
}
function l_over()
{
document.getElementById('blok_1').style.visibility = 'visible';
}
function list_out()
{
document.getElementById('blok_1').style.visibility = 'hidden';
}
</script>
</head>
<body>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a href="#" id="menu1" onmouseover="list_over('menu1')" onmouseout="list_out()">Ссылка первая</a>
<div id="blok_1" onmouseover="l_over()" onmouseout="list_out()" class="podmenu">
- <a href="1" class="url_none">111111</a><br>
- <a href="2" class="url_none">2222222</a><br>
- <a href="3" class="url_none">333333333</a>
</div>
<br /><br /><br /><br /><br />
</body>
</html>
|
position: fixed; Попробуй поставить значение absolute |
Цитата:
Спасибо и тебе, рони. |
Такие задачи (вывод всплывающих хинтов, выпадающих списков и прочее), корректнее решать спомощью css, использую псевдоклас :hover. Так гораздо удобнее, подобные же решения "в лоб" слишком много сил требуют.
|
| Часовой пояс GMT +3, время: 20:21. |