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) {
rangeListїindex].select()
}
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) {
rangeListїidx].select()
rangeListїidx].style.backgroundColor = '#00FF00' //bgcolor of your choice
rangeListїidx].style.color = '#FF0000' //text color of your choice
}
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

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) {
var range = document.body.createTextRange();
range.moveToElementText(element);
range.select();
} else if (window.getSelection) {
// Mozilla
var range = document.createRange();
range.selectNodeContents(element);
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
}
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.