Calculating CSS position values

[griffinmt]

This could be entered into this forum or CSS forum I suppose.I want to be able to dynamically place a 'block' of html output (such as a small table or image) adjacent to and below another block. In fact there are several 'moveable' blocks and there are several 'target' blocks. When a moveable block is selected, I wish to set its position to absolute, set its left and top pixal value, set its zindex, then set it as display:block;I am not having trouble with the code to do this, but I AM having trouble determining the absolute position values of the target block bottom right corner. As defined, these targets temselves are 'floating' as relative blocks in their own parents space.If this is not clear, I will try to explain in another way perhaps.Anyone know how to get the absolute position (and dimensions) of any named block??

[scott100]

I am not having trouble with the code to do this, but I AM having trouble determining the absolute position values of the target block bottom right corner. As defined, these targets temselves are 'floating' as relative blocks in their own parents space.If this is not clear, I will try to explain in another way perhaps.Anyone know how to get the absolute position (and dimensions) of any named block??

To get positions you would use:

var getTop=document.getElementById("blah").style.top;

use the same for left, width and height.To get the bottom right corner you would need to add the top + height then left + width. You might run into some trouble though as im sure .style.blah returns values with px appended so there actually strings not numbers, you would need to chop px off the end (split()) then convert what's left into a true number (parseInt()).Good luck

[griffinmt]

To get positions you would use:use the same for left, width and height.To get the bottom right corner you would need to add the top + height then left + width. You might run into some trouble though as im sure .style.blah returns values with px appended so there actually strings not numbers, you would need to chop px off the end (split()) then convert what's left into a true number (parseInt()).Good luck

The problem with that approach is two-fold:

1. if the target block wasn't defined with a style that contains a top or left value, you can't retrieve the default placement values.
2. if you did get any values returned (minus the px), they would be relative to IT'S parent, not absolute for the window. The moveable block is completely distinct from any of that lineage.

[Chocolate570]

Check this page out.http://msconline.maconstate.edu/tutorials/...sdhtml15-03.htmI think that's what you want?

[griffinmt]

Check this page out.http://msconline.maconstate.edu/tutorials/...sdhtml15-03.htmI think that's what you want?

On first observation, I think I can use this link to help solve my problem. But won't be able to work on this till Sunday Afternoon.Thanks for the help, I'll let you know if I get it working.

[griffinmt]

After doing some more digging and reading (and testing), the previously mentioned link did not do the job for me as needed.But what does work are the object properties:.offsetHeight.offsetWidth.offsetlLeft.offsetTop.offsetParentusing these to accumulate current relative positions in reference to each subsequent parent object lets you iterate up the chain to determine the actual absolute values of any object. Then a moveable object can be placed using that info in the calculation.Not sure if any of this works in other browsers, but since my audience is (should be) IE6+, that is fine with me.Thanks,

[Webworldx]

Hi Martyn,Just following up on that - QuirksMode has always provided me with the best object position finder: http://www.quirksmode.org/js/findpos.html, along with what works in each browsers. Very informative

[reportingsjr]

Scott, I actual triec this before with something. I beleive I was making something move left or right, and up or down.I think.. (just think, not positive) that you can use int(var_name) and it will only return the number.. You might want to check up on this though.

[aspnetguy]

I think the function you are refering to is parseInt()

[Chocolate570]

Aspnetguy's right: It's parseInt(string,base). The base allows you to convert the string into a number, and then format it according to the base---for example,parseInt('077',10) is 77, because 077 in base 10 is 77.