How do I get the layers backgroundPosition in pixels?

[OBAFGKM_RNS]

When I added an image to a css layer, to center it horizontally, I
used 50%. Now, in my javascript, I need to be able to determine what
that x position is in pixels. How can I do this?

 

[OBAFGKM_RNS]

Just to clarify, I added an image to a larger layer, and positioned
the image like this:
background-position: 50% 120px;

Now, in my javascript, I would like to find what the x coord is of
that background image.

Thanks.

 

[Thomas 'PointedEars' Lahn]

Just to clarify, I added an image to a larger layer, and positioned
the image like this:
background-position: 50% 120px;

Now, in my javascript, I would like to find what the x coord is of
that background image.

1. Determine the left coordinate of the "larger layer"
(block-level element), taking margins, borders and paddings
and different box models into account.

2. Determine the block-level element's actual client width.

3. Add 50% of (2) to (1).

4. Substract 50% of the background image's width from (3).


HTH

PointedEars

 

[OBAFGKM_RNS]

Thank you for responding, PointedEars.

The problem is, different images will be used for the background
image, and the width of the image will vary from width to width. So,
if there is a way to dynamically determine the current width of the
background image, I can use step 4 of your solution. Otherwise, I need
a way to determine the current pixel location of the left side of the
image.

I've tried getting the x coordinate by using backgroundPositionX, but
that seems to return "50%" (not a pixel value) in IE, and "undefined"
in Firefox.

 

[Thomas 'PointedEars' Lahn]

The problem is, different images will be used for the background
image, and the width of the image will vary from width to width. So,
if there is a way to dynamically determine the current width of the
background image, I can use step 4 of your solution. [...]

There is a way, just not a completely reliable one. Quickhack:

/**
* @see http://pointedears.de/scripts/types.js
*/
function isMethodType(s)
{
return /\b(function|object)\b/i.test(s);
}

function _getComputedStyle(el, pseudoEl)
{
if (isMethodType(typeof getComputedStyle) && getComputedStyle)
{
return getComputedStyle(el, pseudoEl || null);
}
else if (typeof el.currentStyle != "undefined")
{
return el.currentStyle;
}
else
{
return {};
}
}

var compStyle = _getComputedStyle(targetElement);
if (compStyle && typeof compStyle.backgroundImage != "undefined"
&& isMethodType(typeof Image) && Image)
{
var img = new Image();
img.onload = function()
{
window.alert(img.width);
}

img.src =
compStyle.backgroundImage.replace(/(url\(\s*'?|'?\s*\))/gi, "");
}

(There is certainly a better, more standards compliant way for writing a
gCS() wrapper; I'm working on that.)

You can reduce the above to

if (isMethodType(typeof Image) && Image)
{
var img = new Image();
img.onload = function()
{
window.alert(img.width);
}

// feature test required, see dhtml.getStyleProperty()
img.src = targetElement.style.backgroundImage
.replace(/(url\(\s*'?|'?\s*\))/g, "")
}

if the target element's style attribute had been set with a
background-image declaration.

I've tried getting the x coordinate by using backgroundPositionX,

Never heard of that. Thanks.

but that seems to return "50%" (not a pixel value) in IE, and "undefined"
in Firefox.

Because it is MSHTML-only:

http://msdn2.microsoft.com/en-us/library/ms530719.aspx

However, parsing the backgroundPosition property for the first
white-space delimited part would show the same in Firefox.


PointedEars