Page 1 of 1

Ranges and Selection

Posted: Wed Feb 09, 2005 8:20 am
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.

Posted: Wed Feb 09, 2005 9:01 am
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.

Posted: Wed Feb 09, 2005 9:19 am
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;

Posted: Wed Feb 09, 2005 9:40 am
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.

Posted: Wed Feb 09, 2005 9:45 am
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.

Posted: Wed Feb 09, 2005 10:00 am
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.

Posted: Wed Feb 09, 2005 11:04 am
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.

Posted: Wed Feb 09, 2005 11:52 pm
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

Posted: Thu Feb 10, 2005 3:47 am
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.