Menu
I would like to absolute-position a div on either the initial or terminal corner of a text selection, as the user drags their mouse along. Unfortunately, Range only provides the index position, not the x/y coordinates. I think there might be a way to do this with range.insertNode, but only for one side. (This might also help someone position an auto-complete box under a contenteditable.)
How can I get the x/y coordinates of a text selection, or of the text cursor?
646
Works in chrome/webkit, positioning the div after the last-selected letter. Usually.
<html><head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script>
var $div;
var last;
function find() {
var selection = window.getSelection();
var text = selection.toString();
if (last==text) return; else last=text; // prevent needless computations if no changes to selection
if (selection.rangeCount==0) return;
var range = selection.getRangeAt(0);
var $span= $("<span/>");
newRange = document.createRange();
newRange.setStart(selection.focusNode, range.endOffset);
newRange.insertNode($span[0]); // using 'range' here instead of newRange unselects or causes flicker on chrome/webkit
var x = $span.offset().left;
var y = $span.offset().top;
$div.text(x+" "+y);
$div.css({left:x,top:y+($div.height())});
$span.remove();
}
$(window).load(function() {
$("body").keydown(function(e) {
//find();
setTimeout(find,0);
});
$("body").mousemove(function(e) {
//find();
setTimeout(find,0);
});
$div=$("<div style='border:1px solid red;background:white; position:absolute;'>").appendTo($("body"));
});
</script>
</head>
<body><p>the quick brown fox</p><ul><li>jumps <i>over</i></li></ul><p>the lazy dog</p></body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With