26

How do I position a div next to a mouse click using JQuery?

Thanks

Nasir
  • 4,785
  • 10
  • 35
  • 39
  • 1
    Could you add a little more specifics? – XstreamINsanity Aug 19 '10 at 11:28
  • @XstreamINsanity ...OK I have a table & when you click a certain cell it loads something into a DIV. What I want to do is display this DIV where I just clicked. Let me know if this makes sense? – Nasir Aug 19 '10 at 11:31
  • Do you want to display mouse pointer location where click on DIV or do function when click on DIV? – PPShein Aug 19 '10 at 11:41
  • So you want to fill the cell with a DIV tag you've already created? Is this DIV already nested somewhere else on the page or just in the code? – XstreamINsanity Aug 19 '10 at 11:46
  • @Nasir Do you want to create a context menu using a div? I'm trying to solve the same problem myself. – Anderson Green Dec 14 '12 at 20:29
  • @Nasir If you want to use a div as a context menu, you can refer to this question here: http://stackoverflow.com/questions/4495626/making-custom-right-click-context-menus-for-my-web-app – Anderson Green Dec 14 '12 at 20:35

2 Answers2

37

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)         
  });
});
Artem Barger
  • 40,769
  • 9
  • 59
  • 81
  • 2
    Great thanks a trillion it worked...Do you know how I can stop the DIV displaying out of this table I'm clicking in? – Nasir Aug 19 '10 at 12:01
  • Here's the concept I'm thinking of: if($('#DayInfo'). is outside of $('#holiday-planner-table')) { display $('#DayInfo') with minus co-ordinates } else{ do your code } – Nasir Aug 19 '10 at 12:11
  • Consider open new thread with new question describing your additional problem. – Artem Barger Aug 19 '10 at 12:18
  • Can you post a jsfiddle demo for this example? It would be useful to have a working demo of this script. – Anderson Green Dec 14 '12 at 19:47
  • 4
    Here is a jsfiddle for those Who need it -------------> JSFIDDLE - - - - - -> http://jsfiddle.net/pratik24/aFACA/ – patz Sep 23 '13 at 17:09
  • doesn't work with long pages with scroll bar. I used `position:fixed` to display content. – Max Mar 30 '15 at 18:13
  • this works great. however what if I have a `.draggable` jquery UI component. and I have defined a snap grid, how would I make this draggable snap to the closest pageX of the snap grid I've defined? – Akin Hwan Jan 17 '18 at 17:36
2

Something like:

$('#cell').bind('click',
    function(e){
        $('#div').css('left',e.pageX + 'px' );
        $('#div').css('top',e.pageY + 'px' ); });

The div's position should be set to absolute.

A. M.
  • 580
  • 1
  • 8
  • 21