JQuery: Show a hidden div at mouse position when a link is clicked
Question
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>
4 answers
solution1
11 ACCPTED 2013-02-12 05:29:52
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
}
solution2
9 2013-02-12 05:26:19
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/
solution3
2 2013-02-13 21:07:33
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);
solution4
0 2021-02-12 19:08:15
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.