Problems

Hi

I am trying to learn Javascript by creating small projects. I am trying
to create a drop down menu but I am having problems hiding the <div>
when the mouse is no longer on the <div>.

Your help will be appreciated. Please keep it simple.

<script type="text/javascript">
function mouse_over (var1, var2)
{
var left_position = parseInt(document.getElementById(var2).offsetLeft) ;
var top_position =
parseInt(document.getElementById(var2).offsetParen t.offsetTop);
var height_position =
parseInt(document.getElementById(var2).offsetParen t.offsetHeight);
document.getElementById(var1).style.left = left_position;
document.getElementById(var1).style.top = top_position+height_position;

}
**********Problem with this function*******************
function mouse_out (var1, var2)
{
if(event.toElement !=var2 )
{
document.getElementById(var1).style.left = -1000;
document.getElementById(var1).style.top = -1000;
}
}



</script>

<style>

..hide_menu{
position:absolute;
left:-1000px;
top:-1000px;
z-index: 100;
}

</style>



<div id="menu1" class="hide_menu" ><table width="100" border="1"
class="calendar_table" >
<tr>
<td width="100">
first line
</td>
</tr>
<tr>
<td width="100">
second line
</td>
</tr>
<tr>
<td width="100">
third line
</td>
</tr>
</table>
</div>

<table width="300" border="1" bordercolor="#000000" class="drop_headings">
<tr>
<td id="1" width="100" onmouseover="return mouse_over('menu1','1')"
onmouseout="return mouse_out('menu1','1')">one</td>
<td id="2" width="100" onmouseover="return mouse_over('menu2','2')"
onmouseout="return mouse_out('menu2','2')" >two</td>
<td width="100">three</td>
</tr>
</table>


Regards

Bundy

Bundy <bigbadbundyREMOVETHIS@vfemail.netwrites:
Two problems:
- Moving a div off the screen is not the best way to make it invisible.
Making it invisible is:
document.getElementById(var1).style.visibility = "hidden";
// "visible" is the opposite.

- You are setting CSS properties incorrectly. CSS requires a unit on
all lengths (except 0, and it doesn't hurt there either), so even if
this was what you wanted to do, it should be:
var elem = document.getElementById(var1);
elem.style.left = -1000 + "px";
elem.style.top = -1000 + "px";

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

Lasse Reichstein Nielsen wrote:I have changed my script and fixed it.

Thanks

Bundy