html - JQuery: Show a hidden div at mouse position when a link is clicked -
suppose have 2 links in page , want hidden div appear @ position mouse located (mouse x,y) @ on page when either of links clicked. also, i'd pass in value set title div (see divtitle id).
how can accomplish using jquery?
hidden div:
<div class="boxfaq" id="questionmarkid"> <span id="divtitle"></span> show me! </div>
the below code give thought showing div. proceed requirements , hide accordingly or display message 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 function invoked on clicking of link. function pass message (any number of parameter) link
<a href="#" class="alink" onclick="showtitle('this title')">link 1</a> <a href="#" class="alink" onclick="showtitle('this title')">link 2</a> function
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 event parameter
function showtitle(message, evt) { var e = e || evt || window.event; // ... rest of code } jquery html click mouseevent hidden
No comments:
Post a Comment