CODEWITHSUNDEEP
javascriptjquerycss
sveti petar
sveti petar

Reputation: 3787

Javascript - make popup div open below clicked link

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 accomplish this?

Upvotes: 1

Views: 7199

Answers (3)

jamesmillerio
jamesmillerio

Reputation: 3204

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

Upvotes: 2

A.M.K
A.M.K

Reputation: 16795

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

Upvotes: 3

hobberwickey
hobberwickey

Reputation: 6414

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;
}

Upvotes: 1

Related Questions