Форум

peter888 · #1 (**permalink**) 22.02.2011, 13:09

Здавствуйте.
Помогите, пожалуйста, со скриптом.
Мне надо: когда подвести мышку под ссылку, то под ней должен появится блок 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, помогите разобраться, плиз...

ksa · #2 (**permalink**) 22.02.2011, 14:38

peter888, ты покажи полный пример... Не кусками.

рони · #3 (**permalink**) 22.02.2011, 15:00

Вариант ... добавлен 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>

walik · #4 (**permalink**) 22.02.2011, 15:06

position: fixed;

Попробуй поставить значение absolute

peter888 · #5 (**permalink**) 22.02.2011, 17:22

Сообщение от walik

position: fixed;

Попробуй поставить значение absolute

Да, действительно сработало. Спасибо.
Спасибо и тебе, рони.

da_ff · #6 (**permalink**) 25.02.2011, 12:10

Такие задачи (вывод всплывающих хинтов, выпадающих списков и прочее), корректнее решать спомощью css, использую псевдоклас :hover. Так гораздо удобнее, подобные же решения "в лоб" слишком много сил требуют.

Форум

Справочник

Discord чат

Курсы javascript