I'm working on a website that's basically a forum software, but with a different arrangement. There are only 3 levels of posts (questions, solutions, and comments), and for the comments I want to be able to have the user highlight part of a solution to comment on. To do that, I want to just have them highlight part of the reply and it will automatically recognize the targeted area.

I've been able to get the text value using document.selection.somethingOrOther, but it does nothing about the actual position of the text in the page. The problem is that if the page contains "foobar fubar foobar" and the user highlights the second foobar, I can't tell the difference between highlighting the first.

Any help is appreciated, and I'm only worried about IE compatability (odd request, I know :P), so hopefully there's something hackish out there...

The only thing I can think of is having the user put a special symbol or word in the text when he posts, instead of highlighting.

Here you go MS Boy... :-)

<html>
<head>
    <script>
    function boundDim(oObject)
    {
        var oTextRange = document.selection.createRange();
        if (oTextRange != null) {
            alert("The bounding left is \n" + oTextRange.boundingLeft);
            oTextRange.pasteHTML("<b>" + oTextRange.htmlText + "</b>");
        }

    }
    </script>
</head>
<body onclick="boundDim(this);">Hello to all. Hello to me.</body>
</html>

The above is just a small example on what you can do with the API. Once the text is selected, you get its offset in pixels which you can then use to distinguish between the first and second foobar.
If my snippet doesn't give you what you need, also read on selection and range.

Do let me know if it works. :)

It's definitely a start. Hopefully I'll have some time tomorrow to look into it more...

This article has been dead for over six months. Start a new discussion instead.