AJAX

Find location of highlighted text

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases

•

Join Date: May 2006

Posts: 1,580

Reputation: Infarction has a spectacular aura about

Solved Threads: 52

Infarction Infarction is offline

Offline

Battle Programmer

Find location of highlighted text

Aug 8th, 2007

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

), so hopefully there's something hackish out there...

•

Join Date: Jan 2007

Posts: 3,210

Reputation: MidiMagic has a spectacular aura about

Solved Threads: 165

MidiMagic

Offline

Nearly a Senior Poster

Re: Find location of highlighted text

Aug 8th, 2007

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.

Daylight-saving time uses more gasoline

•

Join Date: Jun 2006

Posts: 7,620

Reputation: ~s.o.s~ has much to be proud of

Solved Threads: 468

~s.o.s~

Offline

Failure as a human

Re: Find location of highlighted text

Aug 8th, 2007

Here you go MS Boy... :-)

 Help with Code Tags 
 JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
<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>
<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.