Javascript pixelLeft and pixelTop are Zero. Why?

Please check www.VisionSimulations.com/IndexNew2.htm    I am now coding the dropdown menus, but I'm missing something. Just want to make a DIV appear whenever the user mouses over a link on the menubar.

Each menubar anchor is structured like this:

<A href="#" onmouseenter="ShowMenu('Menu1',this)">MenuBarText</A>

This much works...it calls the javascript function below, which should show the DIV.

-----------
function ShowMenu(Divname, AnchorName) {

  document.all.Menu1.style.visibility="hidden";
  document.all.Menu2.style.visibility="hidden";
  document.all.Menu3.style.visibility="hidden";
  document.all.Menu4.style.visibility="hidden";
  document.all.Menu5.style.visibility="hidden";
  document.all.Menu6.style.visibility="hidden";
  document.all.Menu7.style.visibility="hidden";
  document.all.Menu8.style.visibility="hidden";
  document.all.Menu9.style.visibility="hidden";

  iLeft=AnchorName.style.pixelLeft;
  iTop=AnchorName.style.pixelTop + AnchorName.style.pixelHeight;

  alert('Left ' + AnchorName.style.pixelLeft + '  Top  ' + AnchorName.style.pixelTop);

  document.getElementById(Divname).style.top=iTop;
  document.getElementById(Divname).style.left=iLeft;

  document.getElementById(Divname).style.visibility="visible" ;
}
-----------
But the Alert box keeps telling me that pixelLeft and pixelTop are 0. pixelTop should be 0, but pixel left shouldn't be.

The CSS for each anchor in the menubar is:

#MenuDIV A{
position:relative;
font-family:Arial;
font-size:12px;
text-decoration:none;
border-right:1px solid #285174;
padding:8px;
float:left;
vertical-align: middle;
color:#1A3348;
background:#7D9AA7;
}

It's set position:relative, so it should take on a pixelLeft and pixelTop value, right?

What's going on?

Roger

rdavis101Asked:
Who is Participating?
 
VincentPugliaConnect With a Mentor Commented:
This what you want?

function ShowMenu(DivID, AnchorName) {

  for (var i = 1; i < 10; i++)
     document.all['Menu' + i].style.visibility = 'hidden';

  iLeft=AnchorName.offsetLeft;
  iLeft=AnchorName.style.pixelLeft;
  iTop=AnchorName.offsetTop + AnchorName.style.pixelHeight;

  document.getElementById(DivID).style.top=iTop;
  document.getElementById(DivID).style.left=iLeft;

  document.getElementById(DivID).style.visibility="visible" ;
}

Vinny
0
 
VincentPugliaCommented:
Hi,

  you are sending the divID & the href

so,

Anchorname.style.... equates to 'index1.htm'.style....

you should be saying:

document.all[Divname].style.....

Vinny
0
 
rdavis101Author Commented:
I'm not having a problem turning the DIVs off and on, I'm having a problem calculating the Top and Left of the anchor tag that's moused over.

My understanding is that using "THIS" passes the entire object, not just it's href or a particular property.

If you can get the code to work, I'm happy to admit I'm wrong, though. ;)

Roger
0
The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

 
rdavis101Author Commented:
Something like that, but AnchorName.offsetLeft is undefined, whereas AnchorName.pixelLeft is always 0.  Must have something to do with CSS positioning, but I'll be damned if I know what.

Roger
0
 
rdavis101Author Commented:
Check it out at www.VisionSimulations.com/IndexNew2.htm  Pops up a box giving AnchorName.pixelLeft and AnchorName.offsetLeft
0
 
VincentPugliaCommented:
put the following within your code:

for (i in AnchorName)
alert(i + ' = ' + AnchorName[i])

the code shows all of the properties/attributes/methods (i) in the object (AnchorName)
get ready for some long hitting of returns;  

you can say document.formName.pixelLeft and it will come out with '0'  -- not because there is such a property, but because you are 'appending' it.

Vinny
0
 
rdavis101Author Commented:
Dude, thanks sooooo much. I read your earlier post wrote and was coding the offsetLeft property as AnchorName.style.offsetLeft, and it should be just AnchorName.offsetLeft. Through your last post, I discovered that I should be using clientHeight to get the height. And that's a cool trick for getting all the properties, I'll use that in the future. :)  Thanks again,

Roger


0
 
VincentPugliaCommented:
You're welcome
0
All Courses

From novice to tech pro — start learning today.