Link to home
Start Free TrialLog in
Avatar of yuvarajr
yuvarajr

asked on

highlight selected text on html page

Hi Experts,
Scenario: The user selects or blocks any line or sentence on a html page using mouse. I need to provide a highlight button which allows the user to highlight the selected text on the html page with any color(which is very similar to highlight function in microsoft word). Also i do not want to change the background color of the selected html text to achieve this. I thought of doing this using javascript layers but if the user blocks the last word in one line and the first word in the next line i don't know how to create a layer for that. Is it possible to do that using layers or by any other means??..Pls help..
Avatar of third
third
Flag of Philippines image
Avatar of lil_puffball
lil_puffball
Flag of Canada image
Is this what you mean?

<script>
var clr='red';

function hili(){
document.execCommand("Forecolor",0,clr);
}
</script>

Here is some text...la la la, blah blah blah....<br>
More text more text...

<p><button onclick=hili();>Hilight Text</button>
<button onclick="clr='green';">Change Colour to Green</button>
Avatar of lil_puffball
lil_puffball
Flag of Canada image
Sorry, I think I misunderstood your question.

Why do you not want to change the background of the text?
Avatar of yuvarajr
yuvarajr

ASKER

Hi Guys,
Thx a lot for ur suggestions. Here is what i want to do:
I want to have 2 buttons
1.for highlighting any part of html
2.for creating a bookmark. I want to place a bookmark icon on any place on html and add some comments - i can do that by opening a new window and allow user to type text. Also i want to allow the user to move the bookmark icon on any place on the html. So to do this i was thinking of using javascript layers. Is this the right choice or is there an easy way to do this?.

Is it possible to use layers for highlight as well?. I wanted to do both highlight and bookmark without modifying the underlying html. So i could not find anything other than layers.

Also i need to store the location of bookmark and highlight and their texts in a database table so that i can display a list of both to the user. I can do the listing using asp.net datagrid.

But which is the best create both highlight and bookmark and to how store their location?. Should i store the x and y co-ordinates of them in html?
Also how to navigate to that particular position on html once the user selects a particular item in the list?.

Thanks....
Avatar of lil_puffball
lil_puffball
Flag of Canada image
Why can't you simple change the background colour? Using layers is possible, but much more complicated. Here's a script I put together:

------------------------------------------------------
<script>
var clr='yellow';
var offset=2,lineHgt;

function hili(){
  var sel=document.selection.createRange();
  if(sel.boundingHeight>lineHgt){
    createHili(sel.boundingTop-offset,sel.offsetLeft-offset,sel.boundingWidth-sel.offsetLeft+sel.boundingLeft,lineHgt,clr);
    for(i=1;i<parseInt(sel.boundingHeight/lineHgt)-1;i++){
      createHili(sel.boundingTop-offset+lineHgt*i,sel.boundingLeft-offset,sel.boundingWidth,lineHgt,clr);
    }
    var newsel=sel.duplicate();
while(sel.inRange(newsel)){
newsel.moveStart("character");
}newsel.moveStart("character",-1);
    createHili(newsel.boundingTop-offset,sel.boundingLeft-offset,newsel.boundingLeft-sel.boundingLeft,lineHgt,clr);
  }else{
    createHili(sel.boundingTop-offset,sel.boundingLeft-offset,sel.boundingWidth,sel.boundingHeight,clr);
  }
}
function createHili(t,l,w,h,clr){
//alert(t+','+l+','+w+','+h)
  var div=document.createElement("div");
  div.style.height=h;div.style.width=w;
  div.style.left=l;div.style.top=t;
  div.style.position="absolute";div.style.fontSize="0px";div.style.backgroundColor=clr;div.innerHTML="&nbsp";div.style.zIndex=-1;
  document.body.appendChild(div);
}
function init(){
  var div=document.createElement("div");
  div.innerHTML="1";
  document.body.appendChild(div);
  lineHgt=div.offsetHeight;
  div.parentNode.removeChild(div);
}
</script>

<body onload="init();">

<button onclick="hili();">Hilight Text</button>

<div id=content>
Here is some text... Here is some text... Here is some text... Here is some text... Here is some text...
Here is some text... Here is some text... Here is some text... Here is some text... Here is some text...
Here is some text... Here is some text... Here is some text... Here is some text... Here is some text...
Here is some text... Here is some text... Here is some text... Here is some text... Here is some text...
Here is some text... Here is some text... Here is some text... Here is some text... Here is some text...
Here is some text... Here is some text... Here is some text... Here is some text... Here is some text...
</div>
Avatar of lil_puffball
lil_puffball
Flag of Canada image
If you don't want to change the underlying html, can't you just store the html in a variable beforehand?

I don't completely understand your bookmark question. Please explain in more detail. Furthermore, that wasn't in your original question.
Avatar of lil_puffball
lil_puffball
Flag of Canada image
I also don't understand what you mean by storing the location, do you mean the top left coordinates of the block of text? If so, this will do the trick:

<script>
var clr='yellow';
var offset=2,lineHgt;
var hiliText=new Array();
var hiliLoc=new Array();
var hiliDiv=new Array();

function hili(){
  var sel=document.selection.createRange();
  if(sel.boundingHeight>lineHgt){
    createHili(sel.boundingTop-offset,sel.offsetLeft-offset,sel.boundingWidth-sel.offsetLeft+sel.boundingLeft,lineHgt,clr);
    for(i=1;i<parseInt(sel.boundingHeight/lineHgt)-1;i++){
      createHili(sel.boundingTop-offset+lineHgt*i,sel.boundingLeft-offset,sel.boundingWidth,lineHgt,clr);
    }
    var newsel=sel.duplicate();
while(sel.inRange(newsel)){
newsel.moveStart("character");
}newsel.moveStart("character",-1);
    createHili(newsel.boundingTop-offset,sel.boundingLeft-offset,newsel.boundingLeft-sel.boundingLeft,lineHgt,clr);
  }else{
    createHili(sel.boundingTop-offset,sel.boundingLeft-offset,sel.boundingWidth,sel.boundingHeight,clr);
  }
  hiliText[hiliText.length]=sel.text;
  hiliLoc[hiliLoc.length]=(sel.offsetLeft-offset)+","+(sel.offsetTop-offset);
}
function createHili(t,l,w,h,clr){
  var div=document.createElement("div");
  div.style.height=h;div.style.width=w;
  div.style.left=l;div.style.top=t;
  div.style.position="absolute";div.style.fontSize="0px";div.style.backgroundColor=clr;div.innerHTML="&nbsp";div.style.zIndex=-1;
  document.body.appendChild(div);
  hiliDiv[hiliDiv.length]=div;
}
function showHili(){
  alert("Text:\n\n---------------------------\n"+hiliText.join('\n---------------------------\n'));
  alert("Positions:\n\n---------------------------\n"+hiliLoc.join('\n---------------------------\n'));
}
function clearHili(){
  for(i=0;i<hiliDiv.length;i++){
    hiliDiv[i].parentNode.removeChild(hiliDiv[i]);
  }
  hiliText.length=0;hiliLoc.length=0;
}
function init(){
  var div=document.createElement("div");
  div.innerHTML="1";
  document.body.appendChild(div);
  lineHgt=div.offsetHeight;
  div.parentNode.removeChild(div);
}
</script>

<body onload="init();">

<button onclick="hili();">Hilight Text</button>
<button onclick="showHili();">Show list of hilighted text</button>
<button onclick="clearHili();">Clear All</button>

<div id=content>
Here is some text... Here is some text... Here is some text... Here is some text... Here is some text...
Here is some text... Here is some text... Here is some text... Here is some text... Here is some text...
Here is some text... Here is some text... Here is some text... Here is some text... Here is some text...
Here is some text... Here is some text... Here is some text... Here is some text... Here is some text...
Here is some text... Here is some text... Here is some text... Here is some text... Here is some text...
Here is some text... Here is some text... Here is some text... Here is some text... Here is some text...
</div>
Avatar of yuvarajr
yuvarajr

ASKER

Hi lil_puffball,
Thx a lot for ur help..This code is wonderful..

I wanted to store the x & y co-ordinates of the highlighted text, b'cos if that if the user comes back to the same html again i've to show the previously highlighted text as highlighted. I hope i'm clear now...
So when the user comes back to the page again, i guess i can create highlight by passing the co-ordinates to the hili() function or by sighlightly modifying the hili() function..is that right?. And if the html body is not inside div tag then i need to add div tag to the html body before displaying to the user..is that right?

I'm sorry i forgot to include the bookmark part when i posted first. I dont mind giving you additional points if you could help me to crack down this. Here is what i want to do:

I've a button called Addbookmark. Once the user clicks on Addbookmark button and clicks anywhere inside html i need to open a new window and allow him to type in some comments. And once he closes the new window i need to place a bookmark icon at the place where he clicked last on the html.  Also i need to allow the user to move the bookmark icon anywhere on the html. (This is the reason why i brought up using javascript layers). Similar to highlight i need to store the co-ordinates of this bookmark icon as well in a database, so that when the user comes to this page again i can show the bookmark and allow the user to click and view the comments. Am i making sense now??

Thx in advance...
Avatar of lil_puffball
lil_puffball
Flag of Canada image
Extra points are not necessary. Just remember to include your full requirements in the question. :)

Sorry about the delay, the bookmark thing was more difficult than I expected. I'm not sure how you want to insert the bookmark, please take a look at this example and let me know if this is what you want. I will also work on the position part.

-----------------------------------------------------------
<script>
var clr='yellow';
var offset=2,lineHgt;
var hiliText=new Array();
var hiliLoc=new Array();
var hiliDiv=new Array();
var x,y,cursor;

function hili(){
  var sel=document.selection.createRange();
  if(sel.boundingHeight>lineHgt){
    createHili(sel.boundingTop-offset,sel.offsetLeft-offset,sel.boundingWidth-sel.offsetLeft+sel.boundingLeft,lineHgt,clr);
    for(i=1;i<parseInt(sel.boundingHeight/lineHgt)-1;i++){
      createHili(sel.boundingTop-offset+lineHgt*i,sel.boundingLeft-offset,sel.boundingWidth,lineHgt,clr);
    }
    var newsel=sel.duplicate();
while(sel.inRange(newsel)){
newsel.moveStart("character");
}newsel.moveStart("character",-1);
    createHili(newsel.boundingTop-offset,sel.boundingLeft-offset,newsel.boundingLeft-sel.boundingLeft,lineHgt,clr);
  }else{
    createHili(sel.boundingTop-offset,sel.boundingLeft-offset,sel.boundingWidth,sel.boundingHeight,clr);
  }
  hiliText[hiliText.length]=sel.text;
  hiliLoc[hiliLoc.length]=(sel.offsetLeft-offset)+","+(sel.offsetTop-offset);
}
function createHili(t,l,w,h,clr){
  var div=document.createElement("div");
  div.style.height=h;div.style.width=w;
  div.style.left=l;div.style.top=t;
  div.style.position="absolute";div.style.fontSize="0px";div.style.backgroundColor=clr;div.innerHTML="&nbsp";div.style.zIndex=-1;
  document.body.appendChild(div);
  hiliDiv[hiliDiv.length]=div;
}
function showHili(){
  alert("Text:\n\n---------------------------\n"+hiliText.join('\n---------------------------\n'));
  alert("Positions:\n\n---------------------------\n"+hiliLoc.join('\n---------------------------\n'));
}
function clearHili(){
  for(i=0;i<hiliDiv.length;i++){
    hiliDiv[i].parentNode.removeChild(hiliDiv[i]);
  }
  hiliText.length=0;hiliLoc.length=0;
}
function insertBookmark(){
  var text=prompt("Enter the text:","Bookmark 1");
  cursor.pasteHTML("<img src=bookmark.gif height=15 title='"+text+"'>");
}
function init(){
  var div=document.createElement("div");
  div.innerHTML="1";
  document.body.appendChild(div);
  lineHgt=div.offsetHeight;
  div.parentNode.removeChild(div);
  cursor=getDivText();cursor.collapse();
}
function setCursor(){
  cursor=getDivText();
  var end=cursor.duplicate();
  end.collapse(false);
cursor.collapse();
  var pos=cursor.duplicate(),cnt=0;
  //find row
  while(y-pos.boundingTop+offset>0&&!pos.inRange(end)){//prevDif=y-pos.boundingTop;pos.move("character");cnt++;}
    var prev=pos.boundingTop;
    while(pos.boundingTop==prev&&!pos.inRange(end)){pos.move("character");cnt++;}
  }
  //move back 1
  pos.move("character",-1);cnt--;
  //find column
  while(pos.boundingLeft-offset>x){
    pos.move("character",-1);cnt--;
  }
  //change cursor
  cursor.moveStart("character",cnt);
}
function getDivText(){
  var sel=document.body.createTextRange();
//  sel.moveEnd("character",-3);
  while(sel.parentElement()!=document.getElementById("content")){sel.moveStart("character");}
  return sel;
}
</script>

<body onload="init();" onmousemove="x=event.x;y=event.y;">

<button onclick="hili();">Hilight Text</button>
<button onclick="showHili();">Show list of hilighted text</button>
<button onclick="clearHili();">Clear All</button>
<button onclick="insertBookmark();">Insert Bookmark</button>

<div id=content onclick="setCursor();">
Here is some text... Here is some text... Here is some text... Here is some text... Here is some text...
Here is some text... Here is some text... Here is some text... Here is some text... Here is some text...
Here is some text... Here is some text... Here is some text... Here is some text... Here is some text...
Here is some text... Here is some text... Here is some text... Here is some text... Here is some text...
Here is some text... Here is some text... Here is some text... Here is some text... Here is some text...
Here is some text... Here is some text... Here is some text... Here is some text... Here is some text...
</div>
Avatar of yuvarajr
yuvarajr

ASKER

Hi lil_puffball,
Thx a lot for ur efforts..

Is it possible to place the bookmark icon over the text instead of placing it besides the text?..also my concern is that the user should be able to move the bookmark anywhere over the html screen...

And similar to highlight i need to store the position of bookmark on the screen and the bookmark comments in a database..

Here is something i found on a site which i thought might be useful to you:
http://www.dansteinman.com/dynapi/docs/examples/drag3.html

Thx..
Avatar of lil_puffball
lil_puffball
Flag of Canada image
yuvarajr,

Do you care if the bookmark must snap to the text, or just anywhere the mouse is?
The second way would be a lot easier...
Avatar of lil_puffball
lil_puffball
Flag of Canada image
Here is the new script. I will work on the location stuff soon.

------------------------------------------------------
<!--//txt=txt.replace(/<p>.*<\/p>/gi,function(p1){return p1.replace(/\r\n?/gi,"");});-->


<script>
var clr='yellow';
var offset=2,lineHgt;
var hiliText=new Array();
var hiliLoc=new Array();
var hiliDiv=new Array();
var bkmkText=new Array();
var bkmkLoc=new Array();
var bkmkDiv=new Array();
var x,y,cursorX=null,cursorY=null;

function hili(){
  var sel=document.selection.createRange();
  if(sel.boundingHeight>lineHgt){
    createHili(sel.boundingTop-offset,sel.offsetLeft-offset,sel.boundingWidth-sel.offsetLeft+sel.boundingLeft,lineHgt,clr);
    for(i=1;i<parseInt(sel.boundingHeight/lineHgt)-1;i++){
      createHili(sel.boundingTop-offset+lineHgt*i,sel.boundingLeft-offset,sel.boundingWidth,lineHgt,clr);
    }
    var newsel=sel.duplicate();
while(sel.inRange(newsel)){
newsel.moveStart("character");
}newsel.moveStart("character",-1);
    createHili(newsel.boundingTop-offset,sel.boundingLeft-offset,newsel.boundingLeft-sel.boundingLeft,lineHgt,clr);
  }else{
    createHili(sel.boundingTop-offset,sel.boundingLeft-offset,sel.boundingWidth,sel.boundingHeight,clr);
  }
  hiliText[hiliText.length]=sel.text;
  hiliLoc[hiliLoc.length]=(sel.offsetLeft-offset)+","+(sel.offsetTop-offset);
}
function createHili(t,l,w,h,clr){
  var div=document.createElement("div");
  div.style.height=h;div.style.width=w;
  div.style.left=l;div.style.top=t;
  div.style.position="absolute";div.style.fontSize="0px";div.style.backgroundColor=clr;div.innerHTML="&nbsp";div.style.zIndex=-1;
  document.body.appendChild(div);
  hiliDiv[hiliDiv.length]=div;
}
function clearHili(){
  for(i=0;i<hiliDiv.length;i++){
    hiliDiv[i].parentNode.removeChild(hiliDiv[i]);
  }
  hiliText.length=0;hiliLoc.length=0;hiliDiv.length=0;
}
function clearBookmarks(){
  for(i=0;i<bkmkDiv.length;i++){
    bkmkDiv[i].parentNode.removeChild(bkmkDiv[i]);
  }
  bkmkText.length=0;bkmkLoc.length=0;bkmkDiv.length=0;
}
function insertBookmark(){
  if(!cursorX){alert("Please click somewhere first.");return;}
  var text=prompt("Enter the text:","Bookmark "+(bkmkDiv.length+1));
  var img=document.createElement("div");
  img.id="bookmark"+bkmkDiv.length;
  img.style.position="absolute";
  img.style.top=cursorY;
  img.style.left=cursorX;
  img.innerHTML="<img src='bookmark.gif' title='"+text+"' height=15 unselectable=on>";
  img.unselectable="on";
  img.onmousedown=function(){startDrag(this);}
  document.body.appendChild(img);
  bkmkDiv[bkmkDiv.length]=img;
  bkmkText[bkmkText.length]=text;
  bkmkLoc[bkmkLoc.length]=cursorX+","+cursorY;
}
var offL,offT,drag=false,obj;
function startDrag(srcEl){obj=srcEl;offL=x-getLeft(obj);offT=y-getTop(obj);drag=true;}
function dragObj(){obj.style.left=x-offL;obj.style.top=y-offT;}
function getLeft(obj){return parseInt(obj.style.left);}
function getTop(obj){return parseInt(obj.style.top);}
function init(){
  var div=document.createElement("div");
  div.innerHTML="1";
  document.body.appendChild(div);
  lineHgt=div.offsetHeight;
  div.parentNode.removeChild(div);
}
</script>

<body onload="init();" onmousemove="x=event.x;y=event.y;if(drag){dragObj();}" onmouseup="if(drag){drag=false;bkmkLoc[obj.id.charAt(obj.id.length-1)]=x+','+y;}">

<button onclick="hili();">Hilight Text</button>
<button onclick="clearHili();">Clear All Highlights</button>
<button onclick="insertBookmark();">Insert Bookmark</button>
<button onclick="clearBookmarks();">Clear All Bookmarks</button>

<div id=content onclick="cursorX=x;cursorY=y;">
Here is some text... Here is some text... Here is some text... Here is some text... Here is some text...
Here is some text... Here is some text... Here is some text... Here is some text... Here is some text...
Here is some text... Here is some text... Here is some text... Here is some text... Here is some text...
Here is some text... Here is some text... Here is some text... Here is some text... Here is some text...
Here is some text... Here is some text... Here is some text... Here is some text... Here is some text...
Here is some text... Here is some text... Here is some text... Here is some text... Here is some text...
</div>
Avatar of lil_puffball
lil_puffball
Flag of Canada image
Sorry about the first line. It was from another script I was writing. Just delete that part.
Avatar of yuvarajr
yuvarajr

ASKER

Hi lil_puffball,
The bookmark icon can be anywhere on the page...i'm OK with what u've done...thx a lot...

i've one other doubt...i'll have the buttons for highlight and bookmark on the top frame in my page...and on the bottom frame i might need to show the html from another site...so i won't be able to include the javascript code in that html...would i still be able to do the highlight and bookmark on that html??

Thanks...
Avatar of yuvarajr
yuvarajr

ASKER

In such case should i read the contents of the other html and put it inside a div tag in my html(where i have all the javascript code for highlight and bookmark) and display it?? or is there any other way of doing that??..thx...
Avatar of yuvarajr
yuvarajr

ASKER

I'm sorry..the html which i need to display on the bottom frame might be on the same network but on a different m/c..i'm not sure whether reading the other html and putting in a div tag in my page would help...what would be the best way of doing that??

Also i've noticed that whenever i change my screen resolution or resize the browser window the position of the text in html changes..so in that case when the user comes to the same html again with a different window size, i would read the x and y co-ordinates of the highlight from database and try to highlight the text..but i would be highlighting different text if i go by x and y location..or i would be placing the bookmark in the wrong place?..i've seen in some sites that the position of the html text does not change even if the screen is resized..do i need to do something like that?..or do i need to store some other value other than x and y co-ordinates??...Pls help..
Avatar of lil_puffball
lil_puffball
Flag of Canada image
yuvarajr,

You can just replace each document.something with parent.bottomFrameName.document.something.

I wasn't going to store the coordinates anyway, I was going to store the cursor position so this isn't a problem.
However, the bookmark will be a problem. Because the bookmark can be anywhere, there is no way to find the cursor position. Should I just take the closest cursor position?
Avatar of yuvarajr
yuvarajr

ASKER

Hi lil_puffball,
Are you saying that, since ur storing the cusror position, even if the window is resized i can highlight the right word?..thats what i want...:)

For bookmark, if you could bring the icon as close as possible that would be great...

My concern is that if the user places bookmark near first word in a line and if the window is resized that word would move to some other place and the bookmark would be near the wrong word..thx...
Avatar of lil_puffball
lil_puffball
Flag of Canada image
I've gotten the location storing done now, but the resizing isn't quite working for some reason. Anyways, here is the new script, the locations are now based on the cursor position rather than the mouse coordinates. :)

<style>button{width:200px;}</style>

<script>
var clr='yellow';
var offset=2,lineHgt;
var hiliText=new Array();
var hiliLoc=new Array();
var hiliDiv=new Array();
var bkmkText=new Array();
var bkmkLoc=new Array();
var bkmkDiv=new Array();
var x,y,cursorX=null,cursorY=null;

function initHiliBkmk(){
  var sel=document.body.createTextRange(),loc;
  clearHili(false);
  sel.moveToElementText(document.getElementById("content"));sel.collapse();
  for(i=0;i<hiliLoc.length;i++){
    loc=hiliLoc[i].split("-");
    sel.moveEnd("character",loc[1]);sel.moveStart("character",loc[0]);
    if(sel.text!=""){hili(sel,false);}
  }
}
function hili(sel){
  if(sel.text==""){alert("Please select some text first!");return;}
  if(sel.boundingHeight>lineHgt){
    createHili(sel.boundingTop-offset,sel.offsetLeft-offset,sel.boundingWidth-sel.offsetLeft+sel.boundingLeft,lineHgt,clr);
    for(i=1;i<parseInt(sel.boundingHeight/lineHgt)-1;i++){
      createHili(sel.boundingTop-offset+lineHgt*i,sel.boundingLeft-offset,sel.boundingWidth,lineHgt,clr);
    }
    var newsel=sel.duplicate();
    while(sel.inRange(newsel)){
      newsel.moveStart("character");
    }newsel.moveStart("character",-1);
    createHili(newsel.boundingTop-offset,sel.boundingLeft-offset,newsel.boundingLeft-sel.boundingLeft,lineHgt,clr);
  }else{
    createHili(sel.boundingTop-offset,sel.boundingLeft-offset,sel.boundingWidth,sel.boundingHeight,clr);
  }
  if(arguments.length==1){storeHili(sel);}
}
function storeHili(sel){
  hiliText[hiliText.length]=sel.text;
  var tempSel=sel.duplicate(),tempSel2=sel.duplicate();
  tempSel.collapse();tempSel2.collapse(false);
  hiliLoc[hiliLoc.length]=getCursorPos(tempSel)+"-"+getCursorPos(tempSel2);
}
function createHili(t,l,w,h,clr){
  var div=document.createElement("div");
  div.style.height=h;div.style.width=w;
  div.style.left=l;div.style.top=t;
  div.style.position="absolute";div.style.fontSize="0px";div.style.backgroundColor=clr;div.innerHTML="&nbsp";div.style.zIndex=-1;
  document.body.appendChild(div);
  hiliDiv[hiliDiv.length]=div;
}
function clearHili(){
  for(i=0;i<hiliDiv.length;i++){
    hiliDiv[i].parentNode.removeChild(hiliDiv[i]);
  }
  if(arguments.length==0){hiliText.length=0;hiliLoc.length=0;hiliDiv.length=0;}
}
function clearBookmarks(){
  for(i=0;i<bkmkDiv.length;i++){
    bkmkDiv[i].parentNode.removeChild(bkmkDiv[i]);
  }
  bkmkText.length=0;bkmkLoc.length=0;bkmkDiv.length=0;
}
function insertBookmark(){
  if(!cursorX){alert("Please click somewhere first.");return;}
  var text=prompt("Enter the text:","Bookmark "+(bkmkDiv.length+1));
  if(!text){return;}
  var img=document.createElement("div");
  img.id="bookmark"+bkmkDiv.length;
  img.style.position="absolute";
  img.style.top=cursorY;
  img.style.left=cursorX;
  img.innerHTML="<img src='bookmark.gif' title='"+text+"' height=15 unselectable=on>";
  img.unselectable="on";
  img.onmousedown=function(){startDrag(this);}
  document.body.appendChild(img);
  bkmkDiv[bkmkDiv.length]=img;
  bkmkText[bkmkText.length]=text;
  snapToText(img,bkmkLoc.length);
}
var offL,offT,drag=false,obj;
function startDrag(srcEl){obj=srcEl;offL=x-getLeft(obj);offT=y-getTop(obj);drag=true;}
function dragObj(){obj.style.left=x-offL;obj.style.top=y-offT;}
function getLeft(obj){return parseInt(obj.style.left);}
function getTop(obj){return parseInt(obj.style.top);}
function init(){
  var div=document.createElement("div");
  div.innerHTML="1";
  document.body.appendChild(div);
  lineHgt=div.offsetHeight;
  div.parentNode.removeChild(div);
}
function getCursorPos(sel){
  var pos=document.body.createTextRange();
  pos.moveToElementText(document.getElementById("content"));
  pos.collapse();var cnt=0;
  while(!sel.inRange(pos)){
pos.move("character");cnt++;}
  return cnt;
}
function snapToText(img,n){
  var start=document.body.createTextRange();
  start.moveToElementText(document.getElementById("content"));
  var end=start.duplicate();start.collapse();end.collapse(false);var newsel=start.duplicate();
  var cnt=0,pos=0,l=parseInt(img.style.left),t=parseInt(img.style.top);
  var dif=Math.abs(l-start.boundingLeft)+Math.abs(t-start.boundingTop),thisDif;
  while(!end.inRange(start)){
    start.move("character");cnt++;
    thisDif=Math.abs(l-start.boundingLeft)+Math.abs(t-start.boundingTop);
    if(thisDif<dif){pos=cnt;dif=thisDif;}
  }
  newsel.move("character",
pos);
  img.style.left=newsel.boundingLeft-offset;
  img.style.top=newsel.boundingTop-offset;
  bkmkLoc[n]=getCursorPos(newsel);
}
</script>

<body onload="init();"onresize="initHiliBkmk();" onmousemove="x=event.x;y=event.y;if(drag){dragObj();}" onmouseup="if(drag){drag=false;snapToText(obj,obj.id.charAt(obj.id.length-1));}">

<button onclick="hili(document.selection.createRange());">Hilight Text</button>
<button onclick="clearHili();">Clear All Highlights</button>
<button onclick="alert(hiliText.join('\n---------------\n'));">Get Highlight Text</button>
<button onclick="alert(hiliLoc.join('\n---------------\n'));">Get Highlight Positions</button>
<br>
<button onclick="insertBookmark();">Insert Bookmark</button>
<button onclick="clearBookmarks();">Clear All Bookmarks</button>
<button onclick="alert(bkmkText.join('\n---------------\n'));">Get Bookmark Text</button>
<button onclick="alert(bkmkLoc.join('\n---------------\n'));">Get Bookmark Positions</button>

<div id=content onclick="cursorX=x;cursorY=y;">
Here is some text... Here is some text... Here is some text... Here is some text... Here is some text...
Here is some text... Here is some text... Here is some text... Here is some text... Here is some text...
Here is some text... Here is some text... Here is some text... Here is some text... Here is some text...
Here is some text... Here is some text... Here is some text... Here is some text... Here is some text...
Here is some text... Here is some text... Here is some text... Here is some text... Here is some text...
Here is some text... Here is some text... Here is some text... Here is some text... Here is some text...
</div>
</body>
ASKER CERTIFIED SOLUTION
Avatar of lil_puffball
lil_puffball
Flag of Canada image
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of yuvarajr
yuvarajr

ASKER

Hi  lil_puffball,
Thanks a lot..:))..
i understood that i need to call initHiliBkmk(true) function to highlight and bookmark when i load the page. But i dont understand why you want me to pass the true parameter to that function.. i guess it should work without that..is that right??..
Avatar of yuvarajr
yuvarajr

ASKER

Also i'll accept your reply once you clarify this doubt..
Avatar of lil_puffball
lil_puffball
Flag of Canada image
The reason is because the function is also called when the page is resized. When you load the page, you want to create the bookmarks, but when you resize, all you want to do is change the position, not create new divs. So the true parameter just tells the function that the bookmarks should be created. :)
Avatar of yuvarajr
yuvarajr

ASKER

got it..thx a lot..:)
Avatar of lil_puffball
lil_puffball
Flag of Canada image
Glad to help. Thanks for the points. :)