Solved

highlight selected text on html page

Posted on 2004-04-12
25
982 Views
Last Modified: 2012-05-04
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..
0
Comment
Question by:yuvarajr
  • 14
  • 10
25 Comments
 
LVL 30

Expert Comment

by:third
Comment Utility
0
 
LVL 12

Expert Comment

by:lil_puffball
Comment Utility
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>
0
 
LVL 12

Expert Comment

by:lil_puffball
Comment Utility
Sorry, I think I misunderstood your question.

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

Author Comment

by:yuvarajr
Comment Utility
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....
0
 
LVL 12

Expert Comment

by:lil_puffball
Comment Utility
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>
0
 
LVL 12

Expert Comment

by:lil_puffball
Comment Utility
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.
0
 
LVL 12

Expert Comment

by:lil_puffball
Comment Utility
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>
0
 

Author Comment

by:yuvarajr
Comment Utility
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...
0
 
LVL 12

Expert Comment

by:lil_puffball
Comment Utility
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>
0
 

Author Comment

by:yuvarajr
Comment Utility
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..
0
 
LVL 12

Expert Comment

by:lil_puffball
Comment Utility
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...
0
 
LVL 12

Expert Comment

by:lil_puffball
Comment Utility
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>
0
What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

 
LVL 12

Expert Comment

by:lil_puffball
Comment Utility
Sorry about the first line. It was from another script I was writing. Just delete that part.
0
 

Author Comment

by:yuvarajr
Comment Utility
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...
0
 

Author Comment

by:yuvarajr
Comment Utility
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...
0
 

Author Comment

by:yuvarajr
Comment Utility
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..
0
 
LVL 12

Expert Comment

by:lil_puffball
Comment Utility
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?
0
 

Author Comment

by:yuvarajr
Comment Utility
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...
0
 
LVL 12

Expert Comment

by:lil_puffball
Comment Utility
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>
0
 
LVL 12

Accepted Solution

by:
lil_puffball earned 500 total points
Comment Utility
I think the resize thing is working now. :) When you load the page from the database, just call the function initHiliBkmk(true) when the body loads to draw the hilights and bookmarks.

<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();
  var curSel;
  for(i=0;i<hiliLoc.length;i++){
    loc=hiliLoc[i].split("-");
    curSel=sel.duplicate();
    curSel.moveEnd("character",loc[1]);curSel.moveStart("character",loc[0]);
    if(curSel.text!=""){hili(curSel,false);}
  }
  for(i=0;i<bkmkLoc.length;i++){
    curSel=sel.duplicate();
    curSel.move("character",
bkmkLoc[i]);
    if(arguments.length>0){
      var img=document.createElement("div");
      img.id="bookmark"+i;
      img.style.position="absolute";
img.style.top=cursorY;img.style.left=cursorX;
      img.innerHTML="<img src='bookmark.gif' title='"+bkmkText[i]+"' height=15 unselectable=on>";
      img.unselectable="on";
      img.onmousedown=function(){startDrag(this);}
      document.body.appendChild(img);
    }
    bkmkDiv[i].style.left=curSel.boundingLeft-offset;
    bkmkDiv[i].style.top=curSel.boundingTop-offset;
  }
}
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>
0
 

Author Comment

by:yuvarajr
Comment Utility
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??..
0
 

Author Comment

by:yuvarajr
Comment Utility
Also i'll accept your reply once you clarify this doubt..
0
 
LVL 12

Expert Comment

by:lil_puffball
Comment Utility
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. :)
0
 

Author Comment

by:yuvarajr
Comment Utility
got it..thx a lot..:)
0
 
LVL 12

Expert Comment

by:lil_puffball
Comment Utility
Glad to help. Thanks for the points. :)
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

16 Experts available now in Live!

Get 1:1 Help Now