getting offsetLeft of a text range

Question

Can anyone tell me why this code is returning undefined.

I was hoping this would give the left coordinate of the user selected text.

function alertRangeObject(){
    var userSelection;

    if(window.getSelection)
    { 
    userSelection = window.getSelection();
    }
    else if (document.selection)
    {
    userSelection = document.selection.createRange();
    }

    var selectedText = userSelection;
    if (userSelection.text)
    {
        selectedText = userSelection.text;
    }

    var rangeObject = getRangeObject(userSelection);

    function getRangeObject(selectionObject)
    {
        if (selectionObject.getRangeAt)
        return selectionObject.getRangeAt(0);
        else { //safari
            var range = document.createRange();
            range.setStart(selectionObject.anchorNode, selectionObject.anchorOffset);
            range.setEnd(SelectionObject.focusNode, selectionObject.focusOffset);
            return range;
              }
        }


       alert(rangeObject.offsetLeft);
   }

The frustrating thing is when you alert(rangeObject) I get the selected text. But I was I thought that if this was a text range I could use the offsetLeft method to get the left coordinates. Can anyone see what I'm doing wrong. Thanks.

You can use [this API](http://code.google.com/p/rangy/) to get all kind of information about the selected range. — Derek 朕會功夫, Aug 20 '11 at 19:47

score 10 · Accepted Answer · answered Aug 20 '11 at 23:20

TextRange objects do indeed have offsetLeft and offsetTop properties, but the code you've posted will throw an error in IE < 9 because the getRangeObject() function returns undefined. I'd suggest alternative code. The following will get you the top left coordinates of the selection relative to the viewport in IE >= 4 and recent versions of other browsers that support the getBoundingClientRect() method of Range, and returns (0, 0) in other browsers.

jsFiddle: http://jsfiddle.net/NkSmn/

Code:

function getSelectionTopLeft() {
    var x = 0, y = 0;
    // Use standards-based method only if Range has getBoundingClientRect
    if (window.getSelection && document.createRange
    && typeof document.createRange().getBoundingClientRect != "undefined") {
        var sel = window.getSelection();
        if (sel.rangeCount > 0) {
            var rect = sel.getRangeAt(0).getBoundingClientRect();
            x = rect.left;
            y = rect.top;
        }
    } else if (document.selection && document.selection.type != "Control") {
        // All versions of IE
        var textRange = document.selection.createRange();
        x = textRange.boundingLeft;
        y = textRange.boundingTop;
    }
    return { x: x, y: y };
}

I'm working on a Range/Selection position module for Rangy at the moment that uses a similar approach to the above. It's a work in progress but works pretty well in most scenarios and browsers. It should make it into version 1.3. Demo here: http://rangy.googlecode.com/svn/trunk/demos/position.html

As an aside, that code looks like it's based on code from PPK's introduction to Ranges page on quirksmode. It's out of date and the code is confusing and not ideal, but there should be some improvement there in the near future.

Thanks Tim, I was indeed using the "intro to ranges page". Thanks for the heads up. I'm going to spend a while getting familiar with Rangy. Also, thanks for the code above. — Jeff, Aug 21 '11 at 04:53
Blink and Webkit never surprise me. When range is collapsed they return rect `0, 0, 0, 0` when testing in contentEditable element. Something always must be wrong with these two engines ;> — Reinmar, Oct 23 '14 at 15:52

getting offsetLeft of a text range

1 Answers1

Linked