PDA

Click to See Complete Forum and Search --> : how to distinguish where mouse pointer moves

JScriptUser
08-06-2003, 11:39 AM
Hi, everyone!

I have a problem with how long menu items should appear. Basically, I use onmouseout event to fire a function that waits for 3 secs to hide the menu items. The problem is that menu items also disappear in 3 secs when I try to read items and decide what to choose. This happens because of onmouseout event and it does not distinguish whether I try to read the items and want it to stay visible or I want to exit the menu and want it to disappear.

This problem is only the case when I move the mouse to the top. If I move the pointer to any of the items to check out, they will disappear quickly because of onmouseout event on items after I exit them.

Therefore, I could give more time before it hides the items so that I have enough time to look for the item I want. However, it won't work if I move the pointer to the top and it'll stay visible for a long time.

I'd like to know if there is any way to distinguish where mouse pointer moves so that the menu diappears right away when the mouse moves to top. There is one hide function in js file and if I know an event/function that distinguishes which direction it moves, I can simply write another hide function that is executed in shorter time.

If you have solved this problem before, would you please help me out? :confused:

Have a great day, everyone!
SlankenOgen
08-06-2003, 11:45 AM
This is a menu I made some time ago. You may be able to adjust it to your needs.

<HTML>
<HEAD>
<TITLE>::: Menu :::</TITLE>

<script language = "javascript">


var holder = "m1";
var overMenu = false;

function getMenu(mm)
{
overMenu = true;
window.clearTimeout(closeMenu);
document.getElementById([holder]).style.visibility = "hidden";
holder=[mm];
document.getElementById([holder]).style.visibility = "visible";
}

function hideMenu()
{
document.getElementById([holder]).style.visibility = "hidden";
}

function cleanUp()
{
overMenu = false;
setTimeout("closeMenu()", 700);
}

function retainMenu()
{
overMenu = true;
window.clearTimeout(closeMenu);
}

function closeMenu()
{
if(!overMenu)
{
document.getElementById([holder]).style.visibility = "hidden";
}
}

</script>

<STYLE>
#m1{position:absolute;top:28;left:2;visibility:hidden; }
#m2{position:absolute;top:28 ;left:80;visibility:hidden; }
</STYLE>


</HEAD>

<BODY marginheight="2" marginwidth="2" leftmargin="2" topmargin="2" bgcolor="#FFFFFF">

<a href="#", onmouseover="getMenu('m1')", onmouseout="cleanUp()">MENU #01</a>
<a href="#", onmouseover="getMenu('m2')", onmouseout="cleanUp()">MENU #02</a>



<div id=m1>
<a href="#", onmouseover = "retainMenu()", onmouseout="cleanUp()", onmousedown="hideMenu()">AAA</a><br>
<a href="#", onmouseover = "retainMenu()", onmouseout="cleanUp()", onmousedown="hideMenu()">BBB</a><br>
<a href="#", onmouseover = "retainMenu()", onmouseout="cleanUp()", onmousedown="hideMenu()">CCC</a><br>
<a href="#", onmouseover = "retainMenu()", onmouseout="cleanUp()", onmousedown="hideMenu()">DDD</a><br>
<a href="#", onmouseover = "retainMenu()", onmouseout="cleanUp()", onmousedown="hideMenu()">EEE</a><br>

</div>

<div id=m2>

<a href="#", onmouseover = "retainMenu()", onmouseout="cleanUp()", onmousedown="hideMenu()">FFF</a><br>
<a href="#", onmouseover = "retainMenu()", onmouseout="cleanUp()", onmousedown="hideMenu()">GGG</a><br>
<a href="#", onmouseover = "retainMenu()", onmouseout="cleanUp()", onmousedown="hideMenu()">HHH</a><br>
<a href="#", onmouseover = "retainMenu()", onmouseout="cleanUp()", onmousedown="hideMenu()">III</a><br>
<a href="#", onmouseover = "retainMenu()", onmouseout="cleanUp()", onmousedown="hideMenu()">JJJ</a><br>
</div>

</BODY></HTML>
JScriptUser
08-06-2003, 12:27 PM
Hi!

I checked out your menu and it worked good.

The only difference with mine is that your menu and menu items all live in the same page. Whereas mine live in different frames in the same page. This makes it more difficult to implement.

I created a separate hidemenu function for menu and menu items. I could not get them to use the same functions and work.

No matter what, both hidemenu functions are executed. I set the items visible for onmouseover on item to make sure that it stays after onmouseout on menu. However, onmouseout on menu is executed even before onmouseover on item reaches the statement that sets item visible and finishes its execution.

How do you deal with menu with frames?
Also, I found that separate scroll bars are created for every frame. In most of professional web sties, menu and heading always appear in the top and there is only one scroll bar regardless of number of frames they use. Do they normally place menu and heading in every single page? How do they get only one scroll bar to show in multiple frame page?

This is another problem I wanted to figure out. If this is the case, I don't have to worry about passing the parameters to different frames and will make it a lot more simple.

Do you know how they do it?

:confused:
SlankenOgen
08-06-2003, 04:57 PM
You can turn on/off scrolling with

<frame name = "whatever" src = "whatever.html" scrolling = no>

scrolling = yes/no/auto are the three options.
JScriptUser
08-07-2003, 09:49 AM
Hi, Dutch! Oy!

I noticed that you live in Netherlands.

Anyway, the question is that what if the content is long? Without scroll bar, people cannot view all the content.

Here is a good example of multiple frame website with one scroll bar.
http://www.microsoft.com

It has top and left frame and notice that there is only one scroll bar. Click on any of the menu item. Then entire web page is loaded. Do you see how it works?

If I set content frame scroll bar to no, there is no way to see the hidden portion at the bottom.

:)