Velocity Reviews

Velocity Reviews (http://www.velocityreviews.com/forums/index.php)
-   Javascript (http://www.velocityreviews.com/forums/f68-javascript.html)
-   -   Trying to find image position in IE. (http://www.velocityreviews.com/forums/t936507-trying-to-find-image-position-in-ie.html)

Paul 07-15-2008 02:46 PM

Trying to find image position in IE.
 
Hi,

I'm trying to find the left and top position of an image in MSIE. In
HTML the image is

<img border=0 src="image.png" id="myimage" style="position:relative;" /
>


The javascript is

///////
var myvar;
var xpos;
document.onmousemove = getCoordinate;
function getCoordinate(e) {
myvar = document.getElementById('myimage');
xpos = myvar.style.left;
displayvar(xpos); // function to display a value
}
///////

The myvar.style.left is empty. Also I've tried

xpos = myvar.style.pixelLeft

which is always set to zero regardless of the images left position.

Any ideas how to read the x,y position of an image? The above works if
the html style tag in the img tag is

style="position:relative; left:400px"

So the javascript reads the left position as 400, but I don't want to
manually fix the position of the image.


Any help is greatly appreciated.
Paul

Joost Diepenmaat 07-15-2008 02:49 PM

Re: Trying to find image position in IE.
 
Paul <energymover@gmail.com> writes:

> Any ideas how to read the x,y position of an image?


Take a look at the "offset" section of this page:

http://www.quirksmode.org/dom/getstyles.html

--
Joost Diepenmaat | blog: http://joost.zeekat.nl/ | work: http://zeekat.nl/

Paul 07-15-2008 04:21 PM

Re: Trying to find image position in IE.
 
On Jul 15, 7:49 am, Joost Diepenmaat <jo...@zeekat.nl> wrote:
> Paul <energymo...@gmail.com> writes:
> > Any ideas how to read the x,y position of an image?

>
> Take a look at the "offset" section of this page:
>
> http://www.quirksmode.org/dom/getstyles.html
>
> --
> Joost Diepenmaat | blog:http://joost.zeekat.nl/| work:http://zeekat.nl/



That worked. Thanks, you're a life saver! The new code is

xpos = myvar.offsetLeft

I guess it's not part of the "style" since it is not xpos =
myvar.style.offsetLeft. Also note that if the image is inside say a
"div" then the offsetLeft is *relative* to the div, so in that case
one would read the offsetLeft of the "div."

Regards,
Paul

Paul 07-15-2008 04:49 PM

Re: Trying to find image position in IE.
 
On Jul 15, 9:21*am, Paul <energymo...@gmail.com> wrote:
> On Jul 15, 7:49 am, Joost Diepenmaat <jo...@zeekat.nl> wrote:
>
> > Paul <energymo...@gmail.com> writes:
> > > Any ideas how to read the x,y position of an image?

>
> > Take a look at the "offset" section of this page:

>
> >http://www.quirksmode.org/dom/getstyles.html

>
> > --
> > Joost Diepenmaat | blog:http://joost.zeekat.nl/|work:http://zeekat.nl/

>
> That worked. Thanks, you're a life saver! The new code is
>
> xpos = myvar.offsetLeft
>
> I guess it's not part of the "style" since it is not xpos =
> myvar.style.offsetLeft. Also note that if the image is inside say a
> "div" then the offsetLeft is *relative* to the div, so in that case
> one would read the offsetLeft of the "div."
>
> Regards,
> Paul



Here's some that will find the left position of an image regardless,
at least on MSIE7, not sure about other browser. Again it uses
offsetLeft, but it drills down to each parent summing up the offsets.

myObj = document.getElementById('myImgID');
ImgXPos = calcLeftPosition(bla1);
function calcLeftPosition(obj) {
var curleft = 0;
if(obj.offsetParent) {
while(1) {
curleft+=obj.offsetLeft;
if(!obj.offsetParent) {
break;
}
obj=obj.offsetParent;
}
} else if(obj.x) {
curleft+=obj.x;
}
return curleft
}


And for the top position,

function calcTopPosition(obj){
var curtop = 0;
if (obj.offsetParent) {
while (1) {
curtop+=obj.offsetTop;
if (!obj.offsetParent) {
break;
}
obj=obj.offsetParent;
}
} else if (obj.y) {
curtop+=obj.y;
}
return curtop;
}

Regards,
Paul

Gregor Kofler 07-15-2008 05:11 PM

Re: Trying to find image position in IE.
 
Paul meinte:

> Here's some that will find the left position of an image regardless,
> at least on MSIE7, not sure about other browser. Again it uses
> offsetLeft, but it drills down to each parent summing up the offsets.


[snip]

It works in all(?) current browsers, too. However it's a bit clumsy:

function getAbsPos(elem) {
var pos = {x: 0, y: 0};
while((elem = elem.offsetParent)) {
pos.x += elem.offsetLeft;
pos.y += elem.offsetTop;
}
return pos;
}

does both coordinates with half the LOC.

scrollTop and scrollLeft of containers might be an issue though.

Gregor

--
http://photo.gregorkofler.at ::: Landschafts- und Reisefotografie
http://web.gregorkofler.com ::: meine JS-Spielwiese
http://www.image2d.com ::: Bildagentur für den alpinen Raum

Paul 07-15-2008 06:00 PM

Re: Trying to find image position in IE.
 
On Jul 15, 10:11 am, Gregor Kofler <use...@gregorkofler.at> wrote:
> Paul meinte:
>
> > Here's some that will find the left position of an image regardless,
> > at least on MSIE7, not sure about other browser. Again it uses
> > offsetLeft, but it drills down to each parent summing up the offsets.

>
> [snip]
>
> It works in all(?) current browsers, too. However it's a bit clumsy:
>
> function getAbsPos(elem) {
> var pos = {x: 0, y: 0};
> while((elem = elem.offsetParent)) {
> pos.x += elem.offsetLeft;
> pos.y += elem.offsetTop;
> }
> return pos;
>
> }
>
> does both coordinates with half the LOC.
>
> scrollTop and scrollLeft of containers might be an issue though.
>
> Gregor




Thanks. You're correct, that code was very sloppy. I merely grabbed
the code from a forum and added the tabbed indenting.

Although there's one thing missing in the code.

Instead of,

var pos = {x: 0, y: 0};

it should be,

var pos = {x: elem.offsetLeft, y: elem.offsetTop};

Otherwise it will miss one element.

Regards,
Paul

Gregor Kofler 07-15-2008 09:34 PM

Re: Trying to find image position in IE.
 
Paul meinte:

[snip]

> Although there's one thing missing in the code.
>
> Instead of,
>
> var pos = {x: 0, y: 0};
>
> it should be,
>
> var pos = {x: elem.offsetLeft, y: elem.offsetTop};


You're right, my bad. It was sloppy cut and paste from my library, where
it is

var pos = new Coord(elem.offsetLeft, elem.offsetTop);

Gregor


--
http://photo.gregorkofler.at ::: Landschafts- und Reisefotografie
http://web.gregorkofler.com ::: meine JS-Spielwiese
http://www.image2d.com ::: Bildagentur für den alpinen Raum

dhtml 07-16-2008 12:00 AM

Re: Trying to find image position in IE.
 
On Jul 15, 11:00*am, Paul <energymo...@gmail.com> wrote:
> On Jul 15, 10:11 am, Gregor Kofler <use...@gregorkofler.at> wrote:


>
> Although there's one thing missing in the code.


What about the border-widths of the offsetParents?

What are offsetTop and offsetParent?

> Regards,
> Paul




All times are GMT. The time now is 12:49 AM.

Powered by vBulletin®. Copyright ©2000 - 2014, vBulletin Solutions, Inc.
SEO by vBSEO ©2010, Crawlability, Inc.