Solved

Javascript pixelLeft and pixelTop are Zero. Why?

Posted on 2003-10-28
8
696 Views
Last Modified: 2012-06-27
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

0
Comment
Question by:rdavis101
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
8 Comments
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 9637314
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
 

Author Comment

by:rdavis101
ID: 9637596
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
 
LVL 15

Accepted Solution

by:
VincentPuglia earned 125 total points
ID: 9637744
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:rdavis101
ID: 9637870
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
 

Author Comment

by:rdavis101
ID: 9637877
Check it out at www.VisionSimulations.com/IndexNew2.htm  Pops up a box giving AnchorName.pixelLeft and AnchorName.offsetLeft
0
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 9637899
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
 

Author Comment

by:rdavis101
ID: 9637956
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
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 9638328
You're welcome
0

Featured Post

Instantly Create Instructional Tutorials

Contextual Guidance at the moment of need helps your employees adopt to new software or processes instantly. Boost knowledge retention and employee engagement step-by-step with one easy solution.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

724 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question