Topic: Ghosts in the machine: Removed nodes still in the way when making another text selection Pages that link to <a href="https://ozoneasylum.com/backlink?for=30945" title="Pages that link to Topic: Ghosts in the machine: Removed nodes still in the way when making another text selection" rel="nofollow" >Topic: Ghosts in the machine: Removed nodes still in the way when making another text selection\
 
Author Thread
racerX
Nervous Wreck (II) Inmate

From: Portland Oregon
Insane since: Jun 2006

 IP logged posted posted 04-06-2009 07:09 Edit Quote

I'm trying to learn a few things about javascript that I've ignored up til this point. Text selection!
So I added a few things to some script i found somewhere that grabs some text and blah blah blah.

So I'm trying to make a script to grab a selection of text and and save that selection along with a reference number.
Then I got the bright idea of adding some images around the selction when you make it and then I wanted to remove them a few seconds later. Well, I thought I was all set after making it work, but I found there are problems when you try to select across a region that has previously been selected and images inserted and removed. It doesn't work in IE right now, but I know IE has different methods anyway, so I'm not concerned about that right now.

I must be doing something wrong, but I've done my best to find a solution before bothering this forum.

So here's an example of the page. Make your first selection, then try to selection part or all of that selection again and you'll see the removed nodes are still getting in the way. Ghosts in the machine!
http://h1.ripway.com/stirfry/javascript/tests/textselection/NewTestCaretImage.html

and some code. Is there a better way to stick some images and text in there and then take it right back out?

code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Selected Text Position</title>
<style>
.red{color:red;}
.orange{color:orange;}
</style>
<script>
var count=0;
//function searchword(){

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;
var workingpic=document.getElementById("workingpic");

workingpic.src="begin.jpg";


var range = window.getSelection().getRangeAt(0);
var range2 = window.getSelection().getRangeAt(0)
//alert(range);
var readout=document.getElementById("readout");

var dummy = document.createElement("span");
dummy.setAttribute('Id','dummy');
range.insertNode(dummy);
var prepic=document.createElement("img");
prepic.setAttribute('Id','prepic');
prepic.src="start.png";

var endpic=document.createElement("img");
endpic.setAttribute('Id','endpic');
endpic.src="end.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

readout.innerHTML+="<span class=red>selection "+count+": </span><span class=orange>"+ range +"</span><br>";
dummy.innerHTML+="<big><big><span class=red>"+count+"</span><big><big>";
dummy.appendChild(prepic);

range.collapse(false);
range.insertNode(endpic); 


setTimeout("removeSpan()",2000)


//alert(x);
//alert(y);

	}

}

function removeSpan()
{
//alert('hi there');
var dummy=document.getElementById("dummy");
var prepic=document.getElementById("prepic");
var endpic=document.getElementById("endpic");
  
prepic.parentNode.removeChild(prepic);
endpic.parentNode.removeChild(endpic);
dummy.parentNode.removeChild(dummy);


/*
dummy.removeChild(prepic);
dummy.parentNode.removeChild(endpic);
dummy.parentNode.removeChild(dummy);

removeChildNodes(dummy);
removeChildNodes(range);
*/
}
function removeChildNodes(parent){
while(parent.hasChildNodes()){
parent.removeChild(parent.childNodes[0])
}
}  
</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="javascript:workingpic.src='ready.jpg';working=true;" alt="Click here to begin"><br>
Hello this is a Javascript function to get the start and end position of highlighted text on a page <br> Click the box to begin. Select text and lift mouse to get information about the start and end position. Watch the status bar.

<div id="readout"></div>

</body>
</html>
DavidJCobb
Nervous Wreck (II) Inmate

From: United States
Insane since: Mar 2009

 IP logged posted posted 04-06-2009 17:14 Edit Quote

I think the problem that's happening is, when you insert the images, Firefox breaks up the text nodes. When the images are rejoined, the text nodes are never reassembled, causing oddities.

Also, window.getSelection().getRangeAt(0).insertNode is broken.

----------------------
Kyle the Feared
Obsessive-Compulsive (I) Inmate

From:
Insane since: Jan 2009

 IP logged posted posted 04-06-2009 17:21 Edit Quote

I haven't looked into your script to see where exactly it's going wrong, but I would guess that it's getting hung up on the extra text nodes created.
Each time your script runs on a text node it's inserting new elements into the DOM splitting the text into 3 separate nodes.
Try calling normalize() on the parent node after removing the inserted elements, it should merge the text nodes together again.
racerX
Nervous Wreck (II) Inmate

From: Portland Oregon
Insane since: Jun 2006

 IP logged posted posted 04-06-2009 17:26 Edit Quote

thank you so much. I'll give that a try. And thanks for explaining what you think the problem is. You're a huge help.
coach
Nervous Wreck (II) Inmate

From:
Insane since: May 2011

 IP logged posted posted 05-31-2011 11:08 Edit Quote
Edit TP: spam removed


Post Reply
 
Your User Name:
Your Password:
Login Options:
 
Your Text:
Loading...
Options:


« Backwards — Onwards »

Show Forum Drop Down Menu