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.