Connecting Tech Pros Worldwide Help | Site Map

Problems

  #1  
Old July 17th, 2006, 02:55 PM
Bundy
Guest
 
Posts: 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
  #2  
Old July 17th, 2006, 03:05 PM
Lasse Reichstein Nielsen
Guest
 
Posts: n/a

re: Problems


Bundy <bigbadbundyREMOVETHIS@vfemail.netwrites:
Quote:
**********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 - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'
  #3  
Old July 17th, 2006, 11:55 PM
Bundy
Guest
 
Posts: n/a

re: Problems


Lasse Reichstein Nielsen wrote:
Quote:
Bundy <bigbadbundyREMOVETHIS@vfemail.netwrites:
>
Quote:
>**********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
Closed Thread


Similar Threads
Thread Thread Starter Forum Replies Last Post
Problems with the Process.Start() Sergistm@gmail.com answers 0 April 6th, 2006 05:25 PM
1,596 problems in .Net 1.1 Jim Hubbard answers 14 November 22nd, 2005 07:16 PM
recompiling VS NET WinForms app with VS NET 2003 causing serious problems. BBFrost answers 10 November 15th, 2005 09:31 PM
DATE function problems Corky answers 5 November 12th, 2005 05:59 AM
Installation and Deployment Problems of Web Application 3f answers 1 July 22nd, 2005 02:45 AM