Ranges and Selection
Moderator: General Moderators
- CoderGoblin
- DevNet Resident
- Posts: 1425
- Joined: Tue Mar 16, 2004 10:03 am
- Location: Aachen, Germany
Ranges and Selection
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.
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.
- n00b Saibot
- DevNet Resident
- Posts: 1452
- Joined: Fri Dec 24, 2004 2:59 am
- Location: Lucknow, UP, India
- Contact:
- CoderGoblin
- DevNet Resident
- Posts: 1425
- Joined: Tue Mar 16, 2004 10:03 am
- Location: Aachen, Germany
Example:
Given html code
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
Given html code
Code: Select all
<body>
ajlhd klja hsflkja hs <!-- special -->special text<!-- /special --> skajd hflka hsf <!-- special --> kajsh dfkha lksf <!-- /special-->
</body>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()
}- n00b Saibot
- DevNet Resident
- Posts: 1452
- Joined: Fri Dec 24, 2004 2:59 am
- Location: Lucknow, UP, India
- Contact:
This is what i put together a minute before (not tested)
make sure you have rangeList populated before this will work.
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
}- CoderGoblin
- DevNet Resident
- Posts: 1425
- Joined: Tue Mar 16, 2004 10:03 am
- Location: Aachen, Germany
- n00b Saibot
- DevNet Resident
- Posts: 1452
- Joined: Fri Dec 24, 2004 2:59 am
- Location: Lucknow, UP, India
- Contact:
- CoderGoblin
- DevNet Resident
- Posts: 1425
- Joined: Tue Mar 16, 2004 10:03 am
- Location: Aachen, Germany
- n00b Saibot
- DevNet Resident
- Posts: 1452
- Joined: Fri Dec 24, 2004 2:59 am
- Location: Lucknow, UP, India
- Contact:
- CoderGoblin
- DevNet Resident
- Posts: 1425
- Joined: Tue Mar 16, 2004 10:03 am
- Location: Aachen, Germany
Ok I have managed to track down some additional bits and pieces.
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.
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);
}