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

Asked 12/2, 2013 at 5:16 Answered 12/2, 2021 at 19:8

Solved jquery html click mouseevent hidden

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>

Bushing answered 12/2, 2013 at 5:16 Comment(3)

And what have you tried? – Irredentist 12/2, 2013 at 5:19

What part are you having trouble with? – Umber 12/2, 2013 at 5:21

Do you have problems you can tell just over – Tass 12/2, 2013 at 5:22

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
}

Sore answered 12/2, 2013 at 5:29 Comment(4)

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 – Bushing 13/2, 2013 at 3:49

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. – Bushing 13/2, 2013 at 14:45

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 – Sore 13/2, 2013 at 15:44

If you are having trouble normalizing the event for IE, see the javascript example below – Bushing 14/2, 2013 at 15:22

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/

Irredentist answered 12/2, 2013 at 5:26 Comment(1)

jsfiddle is awesome! Great tool. Thank you... I'm going to use this in the future – Bushing 13/2, 2013 at 3:28

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

Bushing answered 13/2, 2013 at 21:7 Comment(1)

Just for your information, when you use === then there is not need to use typeof as === itself means checking the type as well – Sore 14/2, 2013 at 17:26

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

Firecracker answered 12/2, 2021 at 19:8 Comment(0)

Recommended topics

Hot tags