Web Analytics Made Easy -
StatCounter get highlighted text and remove span tags- urgent! - CodingForum

Announcement

Collapse
No announcement yet.

get highlighted text and remove span tags- urgent!

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • get highlighted text and remove span tags- urgent!

    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

  • #2
    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.codingforum.net/showthread.php?p=800234

    Comment


    • #3
      csam, post your script so we can see it.

      Comment


      • #4
        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";
        }
        }

        Comment


        • #5
          Please help!

          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

          Comment

          Working...
          X