Ranges and Selection

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
CoderGoblin
DevNet Resident
Posts: 1425
Joined: Tue Mar 16, 2004 10:03 am
Location: Aachen, Germany

Ranges and Selection

Post by CoderGoblin »

Hello all,

Currently using javascript with stored ranges.

I have a list of ranges stored in an array. What I would like to do is a specific range from the array and highlight it.

Without going into design detail I cannot select a particular Node Item instead, I need to highlight the actual range instead.

I cannot seem to find how to do it (using Firefox/Mozilla) despite having looked for a couple of hours on the Google/Yahoo etc.

Any help appreciated.
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post by n00b Saibot »

not sure what you are saying but i think you want to hightlight the rabge when it is displayed on page (using tables etc.). The solution will be very easy to implemenr once i have a hint at your range/its contents or a part of your code if you wish so.
User avatar
CoderGoblin
DevNet Resident
Posts: 1425
Joined: Tue Mar 16, 2004 10:03 am
Location: Aachen, Germany

Post by CoderGoblin »

Example:
Given html code

Code: Select all

<body>
ajlhd klja hsflkja hs <!-- special -->special text<!-- /special --> skajd hflka hsf <!-- special --> kajsh dfkha lksf <!-- /special-->
</body>
I have code which gets the comments and stores them as ranges (The contents may be complex HTML but text here to keep it simple)

In the example above I would have two ranges rangeList[0] and rangeList[1] created by document.createRange() and setting the range start before the start of the special comment and the range end after the end of the /special comment. There is additional work to ensure nested elements are handled correctly but that it outside the scope of this query.

What I need the code to do is actually highlight either rangeList[0] or rangeList[1] using javascript with the index passed in as a parameter for instance

Code: Select all

// This does not work
function highlightRange(myindex) &#123;
  rangeList&#1111;index].select()
&#125;
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post by n00b Saibot »

This is what i put together a minute before (not tested)

Code: Select all

function highlightRange(idx) &#123; 
  rangeList&#1111;idx].select()
  rangeList&#1111;idx].style.backgroundColor = '#00FF00' //bgcolor of your choice
  rangeList&#1111;idx].style.color = '#FF0000' //text color of your choice
&#125;
make sure you have rangeList populated before this will work.
User avatar
CoderGoblin
DevNet Resident
Posts: 1425
Joined: Tue Mar 16, 2004 10:03 am
Location: Aachen, Germany

Post by CoderGoblin »

The trouble is ranges do not have the method select(). rangeList[idx].select() does not therefore work. This is the crux / main point of my question.
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post by n00b Saibot »

CoderGoblin wrote:The trouble is ranges do not have the method select(). rangeList[idx].select() does not therefore work. This is the crux / main point of my question.
I've looked that up. It sure exists.
User avatar
CoderGoblin
DevNet Resident
Posts: 1425
Joined: Tue Mar 16, 2004 10:03 am
Location: Aachen, Germany

Post by CoderGoblin »

Ok I have tried again and still no luck, even with the simple example. I think range.select() is only available with IE or textranges, not with Mozilla or complex ranges. Will look into it further and produce a cut down version of code later.
User avatar
n00b Saibot
DevNet Resident
Posts: 1452
Joined: Fri Dec 24, 2004 2:59 am
Location: Lucknow, UP, India
Contact:

Post by n00b Saibot »

I also have same presumption on this matter. I think this Textrange matter is microsoft psrt of DHTML coding. as such it won't be available on other browsers. very bad thing :D
User avatar
CoderGoblin
DevNet Resident
Posts: 1425
Joined: Tue Mar 16, 2004 10:03 am
Location: Aachen, Germany

Post by CoderGoblin »

Ok I have managed to track down some additional bits and pieces.

Code: Select all

// IE
  if (document.selection) &#123;
    var range = document.body.createTextRange();
    range.moveToElementText(element);
    range.select();
  &#125; else if (window.getSelection) &#123;
    // Mozilla
    var range = document.createRange();
    range.selectNodeContents(element);
    var selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);
 &#125;
Replacing the element for my ranges now seems to work other than the fact that the display does not show up highlighted. This is probably because it is not a text range. When I perform an alert(selection.toString()); the text content of the required range comes out correctly.
Post Reply