CODEWITHSUNDEEP
javascriptjquery
riv
riv

Reputation: 7324

Getting element position/offset

I have a table with images, and I need to add an icon to the corner of each image (so that the center of the icon matches the corner). I managed to do that with css relative position, but since the icons are partially outside cells, they mess up the table.

Now I'm trying to add the icons outside the table, and set their position from there. However, I'd like to avoid hardcoding the positions of the images, and determine it on the fly. But using .offsetLeft and jQuery's offset() both return 0, apparently because the elements are positioned automatically. Is there really no way to determine the element's exact position in this case?

Upvotes: 0

Views: 55

Answers (1)

Momo1987
Momo1987

Reputation: 544

to make it with js it's longer and complicated, i advice you to make it with css and for the problem of the icons you can use overflow:hidden so that the icons don't be shown outside of the cells

For example here: http://jsfiddle.net/CdLEm/

<div id="container">
    <div id="corner"></div>
</div>


#container {
    overflow:hidden;
    position:relative;
    height:200px;
    width:200px;
    border:1px solid #222;
}
#corner {
    position:absolute;
    left: -13px;
    top:-13px;
    border-radius:50%;
    background:#FF0000;
    width:30px;
    height:30px;
}

Upvotes: 1

Related Questions