JQuery: Show a hidden div at mouse position when a link is clicked

jquery html click mouseevent hidden

36,606

Solution 1

The below code will give you idea about showing the div. Proceed with your requirements and then hide it accordingly or display message as you need

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">

jQuery(document).ready(function(){
   $('.alink').click(function(e){
    $('#questionMarkId').hide();
    $('#questionMarkId').css({'top':e.pageY-50,'left':e.pageX, 'position':'absolute', 'border':'1px solid black', 'padding':'5px'});
    $('#questionMarkId').show();
   });
});



</script>
</head>

<body>

<div class="boxFAQ" id="questionMarkId" style="display: none;">
  <span id="divTitle"></span>  
  SHOW ME!
</div>


<br /><br /><br /><br />
<a href="#" class="alink">Link 1</a>
<a href="#" class="alink">Link 2</a>


</body>
</html>

UPDATED
create a function which will be invoked on clicking of the link. To this function pass your message (any number of parameter)
So your link will look like this

<a href="#" class="alink" onclick="showTitle('This is the title')">Link 1</a>
<a href="#" class="alink" onclick="showTitle('This is another title')">Link 2</a>

Function will look like this

function showTitle(message)
{
    $('#questionMarkId').hide();
    $('#questionMarkId').css({'top':e.pageY-50,'left':e.pageX, 'position':'absolute', 'border':'1px solid black', 'padding':'5px'});
    $('#questionMarkId').show();
    $('#divTitle').html(message);
}

UPDATED
Functions with event parameter

function showTitle(message, evt)
{
   var e = e || evt || window.event;
   // ... rest of the code
}

Solution 2

With the context you provided, here's a help:

$('#questionMarkId').hide();

$('a').on('click', function(e) {
    e.preventDefault();
    $('#questionMarkId').css( 'position', 'absolute' );
    $('#questionMarkId').css( 'top', e.pageY );
    $('#questionMarkId').css( 'left', e.pageX );
    $('#questionMarkId').show();
});

And the fiddle link: http://jsfiddle.net/m6XPP/

Solution 3

To get ie to find the mouse coordinates, I had to add the following to the function. I'm surprised there isn't a more "Jquery" way to solve this. Thanks again for all your help!

var posx;
var posy;
if (typeof e.pageY === "undefined") 

    {       //will e work here?
    posx = window.event.clientX + document.body.scrollLeft 
    + document.documentElement.scrollLeft; 
    posy = window.event.clientY + document.body.scrollTop 
    + document.documentElement.scrollTop; 

    alert("was undefined!");
    } 
else{ 


    posx = e.pageX; 
    posy = e.pageY; 
    alert("was NOT undefined!");

    }
alert("posy:" + posy);
alert("posX:" + posx);

Solution 4

Maybe help someone in the future as i landed on this page just now - but here is my solution

$(document).ready(function() {
        $('.hider').hide();
        $(document).mousemove(function(event) {
            var x = event.pageX;
            var y = event.pageY;
                //output mouse movements
                //console.log(x + y);
            $('h3').html("X="+x+"Y="+y+"");
        
    
        $(document).on('click',function(event) {
            $('.hider').show();
            $('.hider').css({'background-color' : 'red','width' : '250px','height' : '250px','position' : 'absolute','top': y,'left' : x});
        });
        });
    });

Working codepen https://codepen.io/desjardins2019/pen/XWNpmXL

View more solutions

36,606

Author by

E Paiz

Updated on July 26, 2022

Comments

E Paiz almost 2 years
Suppose I have 2 links in my page and I want a hidden div to appear at the position the mouse is located (mouse x,y) at on the page when either of links is clicked. Also, I'd like to pass in a value to set the title for the div (see divTitle id).

How can I accomplish this using jQuery?

Hidden Div:
```
<div class="boxFAQ" id="questionMarkId">
  <span id="divTitle"></span>  
  SHOW ME!
</div>
```
E Paiz over 11 years

jsfiddle is awesome! Great tool. Thank you... I'm going to use this in the future
E Paiz over 11 years

asifisid88, thank you! This was a great example. My next question is this, this will work when someone clicks a link with a class of alink. How can I morph this so it is something I can pass paramters to on the onclick? I wanna be able to pass 'This is the title' and set that as the innerHTML of the span with the id of divTitle
E Paiz over 11 years

asifisid88, again thank you. Your help has been fantastic for a Jquery rookie like myself. Is there anything that you need to do to get IE to recoginze the mouse coordinates? This works in Chrome and Firefox (meaning the div shows at the mouse click) but in IE the div shows where it is coded on the page.
asifsid88 over 11 years

This is because of e.pageY and e.pageX, in your function pass one more parameter event.. so function call would become showTitle('msg', event) and function would become function showTitle(message, evt), then normalize the event method in it
E Paiz over 11 years

If you are having trouble normalizing the event for IE, see the javascript example below
asifsid88 over 11 years

Just for your information, when you use === then there is not need to use typeof as === itself means checking the type as well