...

View Full Version : Position of getSelection()



csam0003
03-24-2009, 03:54 AM
Hi all,

How can I get the position (co-ordinates) of the first letter of the selected text using the getSelection method(). I am developing in firefox.

thanks

jkd
03-24-2009, 12:21 PM
var range = window.getSelection().getRangeAt(0);
alert(range.startOffset);

csam0003
03-26-2009, 12:54 PM
thanks alot

but how can I get the screen x and y co-ordinates as I wish to insert a button just on top of the first letter of the selected text?

Thank you

jkd
03-26-2009, 11:14 PM
Now you're talking:


var range = window.getSelection().getRangeAt(0);
var dummy = document.createElement("span");
range.insertNode(dummy);
var box = document.getBoxObjectFor(dummy);
var x = box.x, y = box.y;
dummy.parentNode.removeChild(dummy);


Alternatively, if you're trying to place a button in the front of the selection, you could just remove the box object stuff and use insertNode() by itself.

TinyScript
03-29-2009, 06:54 AM
JKD, I took your suggestion and I tried it, but there's one thing i can't figure out how to do.
In the script, you click on a box to begin. You get the selection of text and when you mouseup the script runs. There are a few alerts for debugging, but I have it almost working. I need to figure out how to draw the second arrow at the end of the selection .
I have searched for some way, but I can't find anything. I've tried several things from sticking the pic into the parentNode and that worked, but it always drew the image at the end of the line. Do you know of a way? I don't know how to put a node at the end of the range



<html>
<head>
<title>Selected Text Position</title>
<script>
var count=0;
var working=false;
function searchword(evt) {
if (working==true){
if (!evt) { evt = window.event; }
var srcText = null;
if (navigator.appName!='Microsoft Internet Explorer') {
var t = document.getSelection();
srcText = evt.target.innerHTML;
findPos(srcText, t);
}
else {
srcText = evt.srcElement.innerHTML;
var t = document.selection.createRange();
if(document.selection.type == 'Text' && t.text>'') {
document.selection.empty();
findPos(srcText, t.text);
}
}
}
function findPos(srcText, text) {
var spos = srcText.indexOf (text);
var epos = spos + text.length -1;
window.status = 'Start Position ' + spos + ' End Position ' + epos;
alert ('Start Position ' + spos + '\n End Position ' + epos);
working=false;
document.workingpic.src="begin.jpg";


var range = window.getSelection().getRangeAt(0);
alert(range);
var dummy = document.createElement("span");
range.insertNode(dummy);
var prepic=document.createElement("img");
prepic.src="http://i43.tinypic.com/30ma9mb.png";
var endpic=document.createElement("img");
endpic.src="http://i43.tinypic.com/30ma9mb.png";

var box = document.getBoxObjectFor(dummy);
var x = box.x, y = box.y;
var endx=box.x+(epos);
var endy=box.y+(epos);
count+=1

dummy.innerHTML+="<big><big><font color='red'>"+count+"</font><big><big>";
dummy.appendChild(prepic);

dummy.appendChild(endpic);

/* this works too, but just the insertNode part probably
var range2 = document.createRange();
range2.setStart(dummy, 0);
range2.setEnd(dummy, 0);
range2.insertNode(prepic);

var range3 = document.createRange();
range3.setStart(dummy, 0);
range3.setEnd(dummy, 0);
range3.insertNode(endpic);
*/

alert(x);
alert(y);

}
}
</script>
</head>
<body onmouseup="searchword(event);">
<h1>Selected Text Position </h1><br><p>Use the select box to begin selection counting. <br>The readout will follow when you lift the mouse.</p>
<img id="workingpic" src="begin.jpg" onclick="document.workingpic.src='ready.jpg';working=true;" alt="Click here to begin"><br>
<span>Hello this is a Javascript function to get the start and end position of highlighted text on a page</span> <br> Click the box to begin. Select text and lift mouse to get information about the start and end position. Watch the status bar.


</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum