...

View Full Version : get highlighted text and remove span tags- urgent!



csam0003
04-03-2009, 06:54 PM
hi all!

I really need help and its urgent.

let me give a brief description...

When the user highlights text on a webpage, I create a set of span tags around that selected text. (This I have done already). When the user hovers over that text, it changes color and a button appears. When the user clicks on that button,the surrounding span tags should be removed.
My questions:
1) how can I get the selected text when clicking on the butoon?
2) how can I remove the tags I created when clicking the button?

My main issue is getting the selected text.

If anyone is eager to help, maybe I can give a better description.

thank you for your time and patience

Regards

Chris

TinyScript
04-03-2009, 08:35 PM
there's a script in here doing almost exactly what you want.

I'm sorry the links don't work to the example page. My free host account was canceled because I uploaded some php files and apparently set off some warning flags. Who knew? the site says you can use php files.

anyway, there's a script in here
http://www.codingforums.com/showthread.php?p=800234

TinyScript
04-03-2009, 11:52 PM
csam, post your script so we can see it.

csam0003
04-04-2009, 11:19 AM
Here is my code. Basically a user selects some text and the clicks on a button on the custom toolbar which calls function wraptext(). If the js script, input button,list menu, and css have not been embedded in the web page, it calls inputHTMLelementObjectScript() else if they do exist already it wraps the span tags around the highlighted text. everything works fine. As you can see, the button displays the css menu list. On this list, I have a Delete item where if clicked I want to remove the tags I created around that selected text. Thanks alot for your time and patience.

function inputHTMLelementObjectScript()
{
var headID = content.document.getElementsByTagName("head")[0];

var newScript = content.document.createElement('script'); //append javascript
newScript.id = "ShareNotes_JavaScript_Id";
newScript.type = 'application/x-javascript';
newScript.src = 'chrome://sharenotes/content/sharenotes.js';
headID.appendChild(newScript);

var cssNode = content.document.createElement('link'); //append css script
cssNode.id = "ShareNotes_CssStyleSheet_Id";
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = 'chrome://sharenotes/content/cssStyleSheetMenuList.css';
headID.appendChild(cssNode);

var bodyID = content.document.getElementsByTagName("body")[0]; //create input button

var newInput = document.createElement('input');
newInput.setAttribute("id", "ShareNotes_InputButton_Id");
newInput.setAttribute("type", "image");
newInput.setAttribute("src","chrome://sharenotes/content/Image.png");
newInput.setAttribute("onclick","toggle()");
newInput.setAttribute("style","display: none;position: absolute");
newInput.setAttribute("onMouseOver","this.style.display='block'");
newInput.setAttribute("onMouseout","this.style.display='none'");
bodyID.appendChild(newInput);
var newDiv = content.document.createElement('div'); //create div menu list

newDiv.setAttribute("id", "ShareNotes_MenuList_Id");
newDiv.setAttribute("style","display:none");
newDiv.setAttribute("onMouseOver","this.style.display='block'");
newDiv.setAttribute("onMouseout","this.style.display='none'");
var code = "<ul><li><a onclick= \"getValue()\">Delete</a></li></ul><ul><li><a>View MY Comments</a><ul><li><textarea id=\"ShareNotesContentTextBox\"></textarea></li></ul></li></ul><ul><li><a>View Others Comments</a><ul><li>testing</li></ul></li></ul>";
newDiv.innerHTML = code;
bodyID.appendChild(newDiv);
}

function wrapText() // Wrap span tags including functions and style properties around highlighted text
{

if (content.document.getElementById("ShareNotes_InputButton_Id") == null) //check if HTML elements/objects and scripts have been inputted already
{
inputHTMLelementObjectScript();
}

var workArea = "";
workArea = content.document.getElementsByTagName('body')[0];
var openTag = '<span style="background-color:yellow" onMouseOver = "ShowHideButton(true,this)" onMouseOut = "ShowHideButton(false,this)">'; //this.style.color = \'Red\'"; //ShowHideButton(true,this);" onMouseOut = "this.style.color = \'#000000\';ShowHideButton(false,this);">'
var closeTag = '</span>';

if (!document.selection)
{
//mozilla
workText = content.getSelection().getRangeAt(0);
}
else
{
//explorer
workText = document.selection.createRange().text;
}
if (workText == "")
{
return;
}
var currReplace = new RegExp("("+workText+")");
//undoInfo = workArea.innerHTML;
workArea.innerHTML = workArea.innerHTML.replace(currReplace, openTag+"$1"+closeTag);

}


// ******************** Button, Listbox and setting position ********************

function setPositionAbsolute(anything,anything2)
{ //set position of button and menu on top of annotated text

document.getElementById("ShareNotes_InputButton_Id").style.left= anything+"px";
document.getElementById("ShareNotes_InputButton_Id").style.top = anything2+"px";
document.getElementById("ShareNotes_InputButton_Id").style.display = "block";

document.getElementById("ShareNotes_MenuList_Id").style.position="absolute";
document.getElementById("ShareNotes_MenuList_Id").style.left= anything+"px";
document.getElementById("ShareNotes_MenuList_Id").style.top = anything2+"px";
document.getElementById("ShareNotes_MenuList_Id").style.display = "none";
}

function toggle() //display/hide the menu, when the button is clicked
{

var ele = document.getElementById("ShareNotes_MenuList_Id");

if(ele.style.display == "block")
{
ele.style.display = "none";

}
else
{
ele.style.display = "block";
}
}

function ShowHideButton(check,el)
{ //display/hide button when text is hovered over

var something = check;

if (something == true)
{
var posX = el.offsetLeft;
var posY = el.offsetTop;
while(el.offsetParent)
{
if(el==document.getElementsByTagName('body')[0])
{
break
}
else
{
posX=posX+el.offsetParent.offsetLeft;
posY=posY+el.offsetParent.offsetTop;
el=el.offsetParent;


}
}

setPositionAbsolute(posX,posY-13);
}
else
{
document.getElementById("ShareNotes_InputButton_Id").style.display = "none";
}
}

csam0003
04-06-2009, 12:36 PM
Hi,

All though i pasted the script (on top) I kind of figured out what I actually need.
Basically when I highlight text and click a button, i insert a set of span tags around the selected text.In these span tags I include the text color background so the highlighted text changes color.
I wish that when the user hovers over that selected text, the text is highlighted (but not in colour blue but transparent). This way i can use the getselection once again.

any ideas? I can explain a bit better if someone would be eager to help.

Kind regards

Chris



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum