Ad:

JavaScript / DHTML / AJAX Discussion Thread
Unsolved
Views: 6062

Aug 8th, 2007

Find location of highlighted text

Expand Post »

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...

Similar Threads

Parsing html form. in PHP
Win2000Pro Desktop Black Screen Message Virus Warning Fix? in Viruses, Spyware and other Nasties
To read color highlighted text in word document from vb.net in VB.NET
Text to Speech in Visual Basic 4 / 5 / 6
Tkinter Text tags in Python

Infarction

Reputation Points: 683

Solved Threads: 53

Posting Virtuoso

Offline

1,580 posts
since May 2006

Permalink

Aug 8th, 2007

Re: Find location of highlighted text

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.

MidiMagic

Reputation Points: 730

Solved Threads: 181

Nearly a Senior Poster

Offline

3,314 posts
since Jan 2007

Permalink

Aug 8th, 2007

Re: Find location of highlighted text

Here you go MS Boy... :-)

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.

~s.o.s~

Super Moderator

Featured Poster

Reputation Points: 3233

Solved Threads: 719

Failure as a human

Offline

8,871 posts
since Jun 2006

Permalink

Aug 9th, 2007

Re: Find location of highlighted text

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

Infarction

Reputation Points: 683

Solved Threads: 53

Posting Virtuoso

Offline

1,580 posts
since May 2006

This thread is more than three months old

No one has posted to this discussion for at least three months. Please let old threads die and do not reply to them unless you feel you have something new and valuable to contribute that absolutely must be added to make the discussion complete. Otherwise, please start a new thread in this forum instead.

Previous Thread in JavaScript / DHTML / AJAX Forum Timeline: How do you read radio buttons in XHTML

Next Thread in JavaScript / DHTML / AJAX Forum Timeline: Frameset and setTimeout

DaniWeb Message

Cancel Changes

User Name
Password