5 replies [Last post]
velo
velo's picture
Offline
Enthusiast
Fayettenam
Last seen: 11 years 20 weeks ago
Fayettenam
Timezone: GMT-5
Joined: 2004-11-11
Posts: 181
Points: 0

Not sure if this question is wholly appropriate for this forum as CSS is only loosely related to the problem I am having but.....well, here goes. If this should be nuked, just let me know.....

Have a VERY simple page and a VERY simple external stylesheet. There is a layered <div> that holds a single static image.

I want to reference the positions of 2 elements- 1) the layered <div> and 2)the uppermost/leftmost image in a table cell.

I want to have the <div>'s position be relative to the reference image so that it always appears X number of pixels to the right of the reference point. I need to do it this way as the main table that holds the images and content is centered so I need to account for different resolutions.

Here is some testing code I am using to try and sort my issue. The floatingTree id refers to the latered <div> and the "positionReference" id is for the reference image. Very simply, referencePic.style.top seems to return nothing. The alert box (just for testing) that should show referencePic.style.left is always blank and alert(picDiv.style.left) always shows only the number I tried to add to the reference position.

var picDiv=document.getElementById("floatingTree");
var referencePic=document.getElementById("positionReference");
picDiv.style.top = referencePic.style.top;
picDiv.style.left = referencePic.style.left + 400; 
alert(picDiv.style.left);//is always 400 (when I am adding 400 in the previous line) 
alert(referencePic.style.left);//always blank

I've even tried referencePic=parseInt(referencePic, 10); to typecast the (nonexistent?) value to an integer and that didn't work. I would still get NaN returned...

What simple thing am I missing that is causing the one id to not show a style.left value? I have even moved the id parameter into the table cell and main table tag to see if that worked.....nada

thanks all

Give a man a fire and he will be warm for a while. Set a man on fire and he will be warm for the rest of his life.

Tags:
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 9 hours 31 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

getElementById working for one element but not another

Hi velo,
To get the value set by the browser or not explicitly set by your code you need to call different functions.

var lft; 
		var ele=document.getElementById("positionReference"); 
		if(document.currentStyle){ //IE 
			lft=ele.currentStyle.left 
		}else{ //DOM 
			lft=getComputedStyle(ele, "").getPropertyValue("left"); 
		} 
		alert("left: "+lft );

Hope that helps

velo
velo's picture
Offline
Enthusiast
Fayettenam
Last seen: 11 years 20 weeks ago
Fayettenam
Timezone: GMT-5
Joined: 2004-11-11
Posts: 181
Points: 0

getElementById working for one element but not another

Using that code the currentStyle.left property returns "auto" to the alert box.

I've even tried setting the position of the table as I have read some articles that state you have to explicitly set the position parameters of an element before you can get them....still not usable as a number.

This is incredibly frustrating as i have other pages where this works!!!

Give a man a fire and he will be warm for a while. Set a man on fire and he will be warm for the rest of his life.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 9 hours 31 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

getElementById working for one element but not another

Hi velo,
Make it easy for us and provide a link. Shock

velo
velo's picture
Offline
Enthusiast
Fayettenam
Last seen: 11 years 20 weeks ago
Fayettenam
Timezone: GMT-5
Joined: 2004-11-11
Posts: 181
Points: 0

Link

Quote:
Hi velo,
Make it easy for us and provide a link.

Indeed, should have done that at first. FYI- the <div> is currently hidden cuz it was literally getting in the way.

Here there be frustration.

Give a man a fire and he will be warm for a while. Set a man on fire and he will be warm for the rest of his life.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 9 hours 31 min ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

getElementById working for one element but not another

Hi velo,
auto is the initial or default value for left.
Unless you set the left value somewhere auto is what will be returned.

var lft; 
      var ele=document.getElementById("positionReference"); 
      if(document.currentStyle){ //IE 
         lft=ele.currentStyle.left 
      }else{ //DOM 
         lft=getComputedStyle(ele, "").getPropertyValue("left"); 
      } 
     lft=(parseInt(lft) > 0 ?parseInt(lft): 0 ); 
     ele.style.left=lft+400+"px" ;  
      alert("left: "+lft ); 

For positioning to work you also need to set the element to position absolute or relative.

Hope that helps