Menu
Hello, I’m an old coder who thought he’d come back and try his hand at DHTML. I was never really too into JavaScript or OOP at all, but I’ve always wanted to pick up some fundamental skills for it. I thought I’d do this by trying to write another cliche drop down menu. Not for the masses, just as a learning experience for myself. And while I’ve read massive tutorials and seen so many examples, they are all so bloated, and I’d much rather tangle with a smaller beast to begin with, and to get the hang of it again. Coding is a lot like riding a bike.
I always get stuck trying to figure out a way to have the menu close after a mouse out, or what have you. Mousing out of certain areas needs to fire the closing function, but what if the mouse in that short timeout before close, rolls over a part of the menu again? I’ve seen many examples of this using the DOMs bubbling phase, but I don’t really like that way.
I figured it would theoretically be possible to just assign a variable on mouseovers of those certain areas, so that after the setTimeout is fired, when the function is finally ran, the variable will be checked first. If the variable is true (meaning that in that timeout time, the mouse is again over a menu area) then the function will not fire. Otherwise, it will, and the menu closes.
However, I’m experiencing a few issues. One is that the setTimeout doesn’t seem to be firing. I’m sure its something small and stupid I’ve done, yet overlooked. But I’ve looked many times. The function fires, but immediately, with no timeout.
Another issue I’ve had is that when the function does fire, it fires and fires and fires again. I noticed this, because instead of having the menu close, I put an alert in the function for the closing menu, for troubleshooting reasons. The alert pops up many times.
I don’t really know where else to turn, as I’m completely confused and new to this (in some ways). As I said, I have some coding experience, but it has been a while. I’ve looked through resources and decided my only option is to get a bit of human interaction. Any help or information you can provide would be great. In fact, if you know of any nice resources out there that show the concepts of this in a simple way, I’d love that too. Maybe there is one I’ve missed.
Again, I suppose this isn’t too urgent in a way. I’d just like to learn it myself, and don’t know where else to turn. Sorry this post turned out to be so long, but thank you for any help.
Here is the code. The getObj, and findPos functions are from quirksmode. A very handy resource that has taught me quite a bit. Its a bit messy and unformatted, but thats because I planned to spruce up the looks of things at a later time. Also, keep in mind that some of the code is written with troubleshooting in mind, like the alerts. For example, overFalse() has a setTimeout that will eventually execute closeMenu() but for now it executes giveAlert() so I can see if it fires after the timeout. It does not.
[CODE]<script language=”JavaScript” type=”text/javascript”>
function getObj(name)
{
if (document.getElementById)
{
this.obj = document.getElementById(name);
this.style = document.getElementById(name).style;
}
else if (document.all)
{
this.obj = document.all[name];
this.style = document.all[name].style;
}
else if (document.layers)
{
this.obj = document.layers[name];
this.style = document.layers[name];
}
}
function findPosX(obj)
{
var curleft = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curleft += obj.offsetLeft
obj = obj.offsetParent;
}
}
else if (obj.x)
curleft += obj.x;
return curleft;
}
function findPosY(obj)
{
var curtop = 0;
if (obj.offsetParent)
{
while (obj.offsetParent)
{
curtop += obj.offsetTop
obj = obj.offsetParent;
}
}
else if (obj.y)
curtop += obj.y;
return curtop;
}
function showMenu(MenuName, TitleName) {
mouseIsOver = true;
var menuObj = new getObj(MenuName);
var titleObj = new getObj(TitleName);
var newX = findPosX(titleObj.obj);
var newY = findPosY(titleObj.obj);
newY = newY + 15;
menuObj.style.top = newY + ‘px’;
menuObj.style.left = newX + ‘px’;
menuObj.style.display=’inline’;
mouseIsOver = true;
}
function overTrue() {
mouseIsOver = true;
clearTimeout(s);
}
function overFalse(MenuName) {
mouseIsOver = false;
var t=setTimeout(“giveAlert();”,5000);
}
function giveAlert() {
alert(‘MenuName’);
}
function closeMenu(MenuName) {
mouseOver = true;
if (mouseIsOver == false) {
var menuObj = new getObj(MenuName);
menuObj.style.display=’none’;
}
else {
}
}
</script>
<span ID=”tiManage” onMouseOver=”showMenu(‘nmManage’,’tiManage’)”>Manage</span>
<div ID=”nmManage” style=”display: none; background-color: black;position:absolute;” onmouseover=”overTrue()” onMouseOut=”overFalse(‘nmManage’)”>
Here is where the testing stuff goes. Hoooray.
</div>