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

    Position of getSelection()

    Hi all,

    How can I get the position (co-ordinates) of the first letter of the selected text using the getSelection method(). I am developing in firefox.

    thanks

  • #2
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Code:
    var range = window.getSelection().getRangeAt(0);
    alert(range.startOffset);

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

    but how can I get the screen x and y co-ordinates as I wish to insert a button just on top of the first letter of the selected text?

    Thank you

  • #4
    jkd
    jkd is offline
    Senior Coder jkd's Avatar
    Join Date
    May 2002
    Location
    metro DC
    Posts
    3,163
    Thanks
    1
    Thanked 18 Times in 18 Posts
    Now you're talking:
    Code:
    var range = window.getSelection().getRangeAt(0);
    var dummy = document.createElement("span");
    range.insertNode(dummy);
    var box = document.getBoxObjectFor(dummy);
    var x = box.x, y = box.y;
    dummy.parentNode.removeChild(dummy);
    Alternatively, if you're trying to place a button in the front of the selection, you could just remove the box object stuff and use insertNode() by itself.

  • #5
    Regular Coder
    Join Date
    Mar 2009
    Location
    Portland Oregon
    Posts
    690
    Thanks
    44
    Thanked 63 Times in 62 Posts
    JKD, I took your suggestion and I tried it, but there's one thing i can't figure out how to do.
    In the script, you click on a box to begin. You get the selection of text and when you mouseup the script runs. There are a few alerts for debugging, but I have it almost working. I need to figure out how to draw the second arrow at the end of the selection .
    I have searched for some way, but I can't find anything. I've tried several things from sticking the pic into the parentNode and that worked, but it always drew the image at the end of the line. Do you know of a way? I don't know how to put a node at the end of the range

    Code:
    <html>
    <head>
    <title>Selected Text Position</title>
    <script>
    var count=0;
    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;
    document.workingpic.src="begin.jpg";
    
    
    var range = window.getSelection().getRangeAt(0);
    alert(range);
    var dummy = document.createElement("span");
    range.insertNode(dummy);
    var prepic=document.createElement("img");
    prepic.src="http://i43.tinypic.com/30ma9mb.png";
    var endpic=document.createElement("img");
    endpic.src="http://i43.tinypic.com/30ma9mb.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
    
    dummy.innerHTML+="<big><big><font color='red'>"+count+"</font><big><big>";
    dummy.appendChild(prepic);
    
    dummy.appendChild(endpic);
    
    /* this works too, but  just the insertNode part probably
    var range2 = document.createRange();
    range2.setStart(dummy, 0);
    range2.setEnd(dummy, 0);
    range2.insertNode(prepic);
    
    var range3 = document.createRange();
    range3.setStart(dummy, 0);
    range3.setEnd(dummy, 0);
    range3.insertNode(endpic);
    */
    
    alert(x);
    alert(y);
    
    }
    }
    </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="document.workingpic.src='ready.jpg';working=true;" alt="Click here to begin"><br>
    <span>Hello this is a Javascript function to get the start and end position of highlighted text on a page</span> <br> Click the box to begin. Select text and lift mouse to get information about the start and end position. Watch the status bar.
    
    
    </body>
    </html>
    Last edited by TinyScript; 03-29-2009 at 06:00 AM.


  •  

    Posting Permissions

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