Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Mar 2009
    Posts
    45
    Thanks
    3
    Thanked 0 Times in 0 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
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    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/javascript-programming/162668-elements-getting-removed-but-theyre-still-way.html#post800234

  • Users who have thanked TinyScript for this post:

    csam0003 (04-03-2009)

  • #3
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    csam, post your script so we can see it.

  • #4
    New Coder
    Join Date
    Mar 2009
    Posts
    45
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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";
    }
    }

  • #5
    New Coder
    Join Date
    Mar 2009
    Posts
    45
    Thanks
    3
    Thanked 0 Times in 0 Posts

    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


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •