Question

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

Answer 1

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/