jQuery positions

Question

I have a problem I couldn't understand, please help:

I've developed html page with images and made them draggable with jQuery UI help and I set these images position to relative and gave a left and top pixels, here is the link for the page http://ayyashsigns.com/lab/circles.html

I set:

• b1 position: style="left: 180px; top: -334px;..."
• b2 position: style="left: 233px; top: -546px;..."
• b3 position: style="left: 422px; top: -350px;..."
• mainb position: style="left: 93px; top: -330px;..."

The problem is: when I run

• $('span#b1').position().top I get 293
• $('span#b1').position().left I get 180
• $('span#b2').position().top I get 81
• $('span#b2').position().left I get 289
• $('span#b3').position().top I get 277
• $('span#b3').position().left I get 534
• $('span#mainb').position().top I get 297
• $('span#mainb').position().left I get 261

Why is all this difference, I need to access the images programmatically using jQuery. Can anybody explain this to me and how to fix it to give the exact location of the images.

Here is the link again: my page circles

Thanx in advance for any help,

Regards,

Answer 1

Change <p id="monitor"> to <div id="monitor"> and remember to change </p> as well.

Add this to your stylesheet:

body {
    margin: 0;
}

#content {
    position:relative;
}

#b1 {
    top: ##px;
    left: ##px;
    position:absolute;
}

Use position:absolute for all your circle, find the correct top and left px for it. It should start from top left of your screen for top:0px; left: 0px;

Now when you use $('span#b1').position().top it will give you the correct px.

FYI, .position will return the px relative to parent, .offset will return the px relative to the document.

Answer 2

I think it would be best for you in this case, to use position:absolute; on each of the circles, and keep position:relative on #content. That way you will get correct value with position().top and position().left.

Answer 3

You are getting the position of the span, which is not a block element. You want to get the position of the image within the span:

$('span#b1 img').offset().top

Answer 4

"The .position() method allows us to retrieve the current position of an element relative to the offset parent."

If you want to get the actual CSS value you used, Try using :

$('span#b1').css('top');

Shai.