Sorry for the unclear title, I can't formulate a better concise explanation.

I have a list, and within each list item is a link which opens an othersiwse hidden <div> using the following jQuery:

$('a.showreranks').click(function () {
        $('body').append('<div class="overlay"></div>');
        $('#rerank_details').slideToggle(300);
        return false;
      });

rerank_details being the id of the div and showreranks being the class of all the links.

This is the CSS of the div:

#rerank_details {
display: none;
background: white;
position: absolute;
border: 1px solid black;
border-radius: 6px;
width: 305px;
padding: 15px;
overflow: hidden;
top: 50%;
left: 50%;
height: 200x;
text-shadow: none;
z-index: 50;
}

So, you see, the opened div is centered when it's opened. It is then populated with info relating to the list item that was clicked but you don't need to worry about that. What I need help with is the following - I don't want the div to be centered on the screen. Instead I'd like it to be positioned right below the link that was clicked. Note that there could be a lot of links on the page, one below the other and the vertical distances could be irregular. How do I acplish this?

Sorry for the unclear title, I can't formulate a better concise explanation.

I have a list, and within each list item is a link which opens an othersiwse hidden <div> using the following jQuery:

$('a.showreranks').click(function () {
        $('body').append('<div class="overlay"></div>');
        $('#rerank_details').slideToggle(300);
        return false;
      });

rerank_details being the id of the div and showreranks being the class of all the links.

This is the CSS of the div:

#rerank_details {
display: none;
background: white;
position: absolute;
border: 1px solid black;
border-radius: 6px;
width: 305px;
padding: 15px;
overflow: hidden;
top: 50%;
left: 50%;
height: 200x;
text-shadow: none;
z-index: 50;
}

So, you see, the opened div is centered when it's opened. It is then populated with info relating to the list item that was clicked but you don't need to worry about that. What I need help with is the following - I don't want the div to be centered on the screen. Instead I'd like it to be positioned right below the link that was clicked. Note that there could be a lot of links on the page, one below the other and the vertical distances could be irregular. How do I acplish this?

• javascript
• jquery
• css

• Can you set up a jsFiddle? It will make this a lot easier to troubleshoot. – technoTarek Commented Jun 21, 2012 at 16:42
• Actually here it is: jsfiddle/bt4sa - see how the div opens up in the same spot every time, and I want it to open up below the link that was clicked. – sveti petar Commented Jun 21, 2012 at 16:50

3 Answers 3

I think that this is what you are trying to do: http://jsfiddle/SO_AMK/r7ZDm/

The answer has already been accepted, but perhaps this is a cleaner version. The animations are all fixed.

if it doesn't have to be within the normal flow of the DOM just use absolute positioning and the event object.

function(event){
  var box = //get a handle to box
  box.style.position = 'aboslute';
  box.style.left = event.page.x; 
  box.style.top = event.page.y;
}