Attaching popup to bottom of a div

I am trying to have a clickable div so that when its clicked it appends to the bottom of the div that is clicked. I have it so when i click it appears where the mouse is but i want it to be right below the div that is clicked and is right up against the bottom border.

I tried using $(div).position.left(); but it wasnt placing it in the right place and changed when you resized the screen.

Any idea on how to do what I am looking for?

Thanks,

Craig

Here is 开发者_Python百科the code

$('#clickDetails').click(function(e) {
$('#dcHover')
.css('position', 'absolute')
.css('top', e.pageY + 10)
.css('left', e.pageX - 8)
.css('z-index','2')
.toggle();
//$('#clickDetails').append('<div id="dchover">test</div>');
});

ANd this is the div tag

<div id="clickDetails" style=" width: 10px; background-color:red; padding: 1px 5px 1px 5px; color: white; -moz-border-radius:5px; margin-top:-80px; margin-right:35px; z-index: -1;">!</div>

Try using the .after() function in Jquery

HTML:

<div id="div1" class="d">Click Me</div>
<div id="div3" class="d">Click Me</div>

Javascript

$(".d").click(function(){
    $(this).after("<div id='div2'>Appended</div>");
});

Working Example: http://jsfiddle.net/PeepD/1/

You are applying CSS styles before the element has been appended, therefore they're not being added to dchover

Try rearranging your code like this:

$('#clickDetails').click(function(e) {
$('#clickDetails').append('<div id="dchover">test</div>');
$('#dchover')
.css('position', 'absolute')
.css('top', e.pageY + 10)
.css('left', e.pageX - 8)
.css('z-index','2')
});

It sounds like you actually want to append a new div after the current div.

To do so, use the jQuery after method.

$(function(){

    // handle the click event of the div with id 'clickme'
    $("#clickme").click(function(){

        // this is now the div that has been clicked
        $(this).after("<div class='added'>testing</div>");

    });

});

Then use CSS to reduce or increase the margin between the divs as you require.

Check it out here:

http://jsfiddle.net/Ajbyt/3/