views:

38

answers:

2

Okay, here is the problem. I have an unordered list with a bunch of items. For each item, there is a corresponding DIV that will drop down when the item is hovered over.

The sample can be found here.

Now, it works fine unless you scroll down the page a bit and then try to hover over the item. Then it slides down further up the page than it is supposed to.

Here is the relevant code from the page linked above:

<script type="text/javascript">

function doOver(num)
{
    $('#s' + num).position({ of: $('#m' + num),
                             my: 'left top',
                             at: 'left bottom' });
    $('#s' + num).slideDown();
}

</script>

...

<ul id="test" style="width: 400px; height: 25px; background-color: red;">
  <li id='m1' onmouseover='doOver(1)'>TestItem1</li>
  <li id='m2' onmouseover='doOver(2)'>TestItem2</li>
  <li id='m3' onmouseover='doOver(3)'>TestItem3</li>
</ul>

<div id='s1' style='width: 100px; height: 50px; position: absolute;'></div>
<div id='s2' style='width: 100px; height: 50px; position: absolute;'></div>
<div id='s3' style='width: 100px; height: 50px; position: absolute;'></div>

...

Any idea why this happens?

+1  A: 

The problem seems to be with the position method of the UI .. the following seems to work fine

function doOver(num)
{
    var $m = $('#m'+num);
    var mPos = $m.position();  // you could you $m.offset() here (depenging on the overall structure)
    var mHeight = $m.outerHeight();
    $('#s' + num).css({ 'top':mPos.top + mHeight, 'left':mPos.left });
    $('#s' + num).slideDown();
}

Demo : http://www.jsfiddle.net/jnUsN/1/

Gaby
+1 Although I found something that worked, your answer was **much** better.
George Edison
Mind if I use this snippet in an open source project?
George Edison
@George of course you can ..
Gaby
@Gaby: Thanks so much! I just integrated into my menu: http://hjmenu.quickmediasolutions.com/
George Edison
A: 

Well, I found something that worked:

[view modified sample]

Relevant code:

function Position(item,parent)
{
    $(item).position({ of: $(parent), my: 'left top', at: 'left bottom' });
}

function doOver(num)
{
    $('#s' + num).css('height','0px');
    $('#s' + num).show();
    Position('#s' + num,'#m' + num);
    $('#s' + num).hide();
    $('#s' + num).css('height','50px');
    $('#s' + num).slideDown();
}

...and because Chrome wouldn't render it right on the first try:

$(function() {
    Position('#s1','#m1');
    Position('#s2','#m2');
    Position('#s3','#m3');
});
George Edison
I know, it's ugly... that's why I like the other answer better.
George Edison