Menu
How do I position a div next to a mouse click using JQuery?
Thanks
247
jQuery position() MethodThe position() method returns the position (relative to its parent element) of the first matched element. This method returns an object with 2 properties; the top and left positions in pixels.
Difference between offset() and position() Method:The jQuery UI offset() is relative to the document. The jQuery UI position() is relative to the parent element. When you want to position a new element on top of another one which is already existing, its better to use the jQuery offset() method.
The answer is definitely yes, but you will need to write javascript code for it. We can use a click handler on the div element to make it clickable.
Using the mousedown() method: The mousedown() method in jQuery can be used to bind an event handler to the default 'mousedown' JavaScript event. This can be used to trigger an event. The event object's 'which' property can then used to check the respective mouse button.
You can try:
$( "td").click( function(event) { $("#divId").css( {position:"absolute", top:event.pageY, left: event.pageX}); }); After additional question was asked in the comment:
$( "td").click( function(event) { var div = $("#divId"); div.css( { position:"absolute", top:event.pageY, left: event.pageX}); var delayTimer = setTimeout( function( ) { $that.fadeIn( "slow"); }, 100); div.mouseover( function( event) { if (delayTimer) clearTimeout( delayTimer); }).mouseout( function(){ if (delayTimer) clearTimeout( delayTimer); var $that = $(this); delayTimer = setTimeout( function( ) { $that.fadeOut( "slow"); }, 500) }); }); If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
