Solved

Javascript pixelLeft and pixelTop are Zero. Why?

Posted on 2003-10-28
8
677 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
  • 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
 

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
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 

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

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Uploading files to the web server has become common part of almost any kind of web application. People use different technologies to solve this, but regardless of the technology used, it is always useful to have some kind of progress indicator shown…
Using SQL Scripts we can save all the SQL queries as files that we use very frequently on our database later point of time. This is one of the feature present under SQL Workshop in Oracle Application Express.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

760 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now