By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,480 Members | 1,214 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,480 IT Pros & Developers. It's quick & easy.

Problems

P: n/a
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
Jul 17 '06 #1
Share this Question
Share on Google+
2 Replies


P: n/a
Bundy <bi*******************@vfemail.netwrites:
**********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;
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 - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
Jul 17 '06 #2

P: n/a
Lasse Reichstein Nielsen wrote:
Bundy <bi*******************@vfemail.netwrites:
>**********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;

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
I have changed my script and fixed it.

Thanks

Bundy
Jul 17 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.