Ghosts in the machine: Removed nodes still in the way when making another text selection — OZONE Asylum, home of the Mad Scientists

DHTML/Javascript

Ghosts in the machine: Removed nodes still in the way when making another text selection

This page's ID: 30945

Edit Post

Who can edit a post?	The poster and administrators may edit a post. The poster can only edit it for a short while after the initial post.

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	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> [/code] Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu