Solved

Get selected text of a div

Posted on 2003-10-31
15
574 Views
Last Modified: 2012-06-22
Hi,
     I want to be able to publish some legal opinions, and give the user the ability to select some of the text of the opinion, and then click a button, and the correct citation would come up.  Basically legal citations have to refer to the published page number of what is being quoted.  Here's an example of what I am trying to do:

<input type="button" value="Click for citation" onclick="AlertCitation()">
<div id="p571">
    Here is some legal text that is on page 571, and
</div>
<div id="p572">
    here is some legal text on page 572
</div>

After the user has selected some text, they would click the button, and an alert would come up and give the page number(s) of the text they selected.  Can anyone help me with this.  I know I could probably do this with text areas, but that would probably be a pain to set up on a regular basis.

Thanks in advance,

:) David
0
Comment
Question by:dapperry
  • 8
  • 4
  • 2
15 Comments
 
LVL 10

Expert Comment

by:NetGroove
ID: 9660536
Here my proposal:

<html>
<head>
<style>
.cSel {
  background-color: cornflowerblue;
}
</style>
<script>
function check(theDiv){
  theDiv.citSel=(theDiv.citSel==true)?false:true;
  if(theDiv.citSel==true){
    theDiv.style.backgroundColor='whitesmoke';
  } else {
    theDiv.style.backgroundColor='';
  }
}
function AlertCitation(){
  msg = "";
  divs = document.getElementsByTagName('div');
  for(i=0;i<divs.length;i++){
    if(divs[i].citSel==true){
      msg+=divs[i].id+'\n';
    }
  }
  if(msg==""){
    alert("No Citation selected.");
  } else {
    alert("Folowing citation selected:\n"+msg);
  }
}
</script>
</head>
<body>
<form>
<input type="button" value="Click for citation" onclick="AlertCitation()">
<div id="p571" onClick="check(this)">
    Here is some legal text that is on page 571, and
</div>
<div id="p572" onClick="check(this)">
    here is some legal text on page 572
</div>
<div id="p573" onClick="check(this)">
    here is some legal text on page 573
</div>
</form>
</body>
</html>


0
 
LVL 10

Expert Comment

by:NetGroove
ID: 9660576
Oh, and if you like to change more attributes then bgColor, then see this version:

<html>
<head>
<style>
.cSel {
  background-color: cornflowerblue;
  font-family: Courier New;
  font-weight: bold;
  font-style:  italic;
}
</style>
<script>
function check(theDiv){
  theDiv.citSel=(theDiv.citSel==true)?false:true;
  if(theDiv.citSel==true){
    theDiv.className='cSel';
  } else {
    theDiv.className='';
  }
}
function AlertCitation(){
  msg = "";
  divs = document.getElementsByTagName('div');
  for(i=0;i<divs.length;i++){
    if(divs[i].citSel==true){
      msg+=divs[i].id+'\n';
    }
  }
  if(msg==""){
    alert("No Citation selected.");
  } else {
    alert("Folowing citation selected:\n"+msg);
  }
}
</script>
</head>
<body>
<form>
<input type="button" value="Click for citation" onclick="AlertCitation()">
<div id="p571" onClick="check(this)">
    Here is some legal text that is on page 571, and
</div>
<div id="p572" onClick="check(this)">
    here is some legal text on page 572
</div>
<div id="p573" onClick="check(this)">
    here is some legal text on page 573
</div>
</form>
</body>
</html>

0
 
LVL 10

Expert Comment

by:NetGroove
ID: 9660602
This works even with <span>:

<html>
<head>
<style>
.cSel {
  background-color: cornflowerblue;
  font-family: Courier New;
  font-weight: bold;
  font-style:  italic;
}
</style>
<script>
function check(theDiv){
  theDiv.citSel=(theDiv.citSel==true)?false:true;
  if(theDiv.citSel==true){
    theDiv.style.backgroundColor='cornflowerblue';
  } else {
    theDiv.style.backgroundColor='';
  }
}
function AlertCitation(){
  msg = "";
  span = document.getElementsByTagName('span');
  for(i=0;i<span.length;i++){
    if(span[i].citSel==true){
      msg+=span[i].id+'\n';
    }
  }
  if(msg==""){
    alert("No Citation selected.");
  } else {
    alert("Folowing citation selected:\n"+msg);
  }
}
</script>
</head>
<body>
<form>
<input type="button" value="Click for citation" onclick="AlertCitation()">
<span id="p571" onClick="check(this)">
    Here is some legal text that is on page 571, and
</span>
<span id="p572" onClick="check(this)">
    here is some legal text on page 572
</span>
<span id="p573" onClick="check(this)">
    here is some legal text on page 573
</span>
</form>
</body>
</html>



0
 
LVL 3

Author Comment

by:dapperry
ID: 9660696
Hi NetGroove,
    Thanks for your quick response.  What you have is pretty close, and almost there except for a couple of things.  The most important is that it doesn't look like you can select text from across two divs without selecting the two divs themselves.  I am not really worried about the background of the div changing, becuase it seems to want to do it for the whole div, and not just the selected text.  Basically I would like it to work as normally as one might select text betwen 2 pages in a Word doc.  Hopefully you can read me on this, and get back to me as quickly as you can.

:) David
0
 
LVL 10

Accepted Solution

by:
NetGroove earned 250 total points
ID: 9660968
I think you mix up selecting region and elements.
You would like to have elements selection like in File Explorer but working like Text region selection in Word.

Basically is everything possible, but you have to think that more tricks you put in your code that more difficult is to maintain the code later.

From my point of view is the click method so far the simplest and most convenient way to solve your selection problem.

0
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 9661159
Hi,
is this more in line with what you want?
<html><head>
<script>
var citations = new Array()

function storeThis(divID)
{
   txt = document.selection.createRange().text
   citations[txt] = divID;
}

function doit()
{
  for (i in citations)
    alert('"' + i + '" is in ' + citations[i])
}
</script>
</head>
<body>
<div id="p571" onClick="storeThis(this.id)">
    Here is some legal text that is on page, and
</div>
<div id="p572" onClick="storeThis(this.id)">
    Here is some legal text that is on page , and
</div><div id="p573" onClick="storeThis(this.id)">
    Here is some legal text that is on page , and
</div>
<div id="p574" onClick="storeThis(this.id)">
    Here is some legal text that is on page , and
</div>
<form name='a'>
<input type='button' value='Get Citations' onclick='doit()'>
</form>
</body>
</html>

Vinny
0
 
LVL 3

Author Comment

by:dapperry
ID: 9663764
Hi NetGroove,
     I decided to accept your answer becuase your code led me in the right direction of what I wanted to do.  Here what I came up with:

<html>
<head>
</head>

<script language="javascript">
      var startdiv, enddiv
      function createcitSel() {
            divs=document.getElementsByTagName('div');
            for(i=0;i<divs.length;i++){
                   var nnm = divs[i].attributes;
                  var namedItem = document.createAttribute("citSel");
                  namedItem.value=false;
                  nnm.setNamedItem(namedItem);
             }
      }
      function StartSelection(theDiv) {
            divs=document.getElementsByTagName('div');
            for(i=0;i<divs.length;i++){
                  if (divs[i].id == theDiv.id) {
                        theDiv.citSel=true;
                        startdiv = i;
                  }
                  else {
                        divs[i].citSel=false;
                  }
            }
            enddiv = null;                  
      }
      function EndSelection(theDiv) {
            if (startdiv != null) {
                  var startidx = null;
                  var endidx = null;
                  theDiv.citSel=true;
                  divs=document.getElementsByTagName('div');
                  for(i=0;i<divs.length;i++){
                        if (divs[i].id == theDiv.id) {
                              theDiv.citSel=true;
                              enddiv = i;
                        }
                  }
                  if (enddiv < startdiv) {
                        startidx = enddiv;
                        endidx = startdiv;
                  }            
                  else {
                        startidx = startdiv;
                        endidx = enddiv;
                  }
                  for (i=startidx;i<endidx+1;i++) {
                        divs[i].citSel=true;
                  }
            }
      }
      function AlertCitation(){
            txt = document.selection.createRange().text
            if (txt != ""  && startdiv != null && enddiv != null) {
                pagenums = "";
                divs = document.getElementsByTagName('div');
                for(i=0;i<divs.length;i++){
                  if(divs[i].citSel==true){
                    strDiv=divs[i].id;
                        pagenums+=strDiv.substring(1,strDiv.length)+", ";
                  }
                }
                  pagenums=pagenums.substring(0,pagenums.length-2);
                  document.citForm.txt.value=txt;
                  document.citForm.case_pagenumbers.value=pagenums;
                  OpenCitationWin();
            }
            startdiv=null;
            enddiv=null;
            for(i=0;i<divs.length;i++){
                  divs[i].citSel=false;
            }            
      }
      function OpenCitationWin() {
            sheight=screen.height;
            swidth=screen.width;
            if (window.screen) {
                  w = screen.width;
                  h = screen.height;
            }
            page_url="";
            win_options="dependent=yes,width=" + (w * .6) + ",height= " + (h * .3) + ",top=" + (sheight * .35) + ",left=" + (swidth * .2) + ",screenX=0,screenY=0,directories=no,menubar=no,toolbar=no,scrollbars=yes,status=yes";
            citationwin = window.open(page_url,"citationwin",win_options);                                                      
            citationwin.document.write("<html><body bgcolor='white'><table width='100%' border='0'><tr><td width='20%' valign='top'><b>Citation:</b></td><td width='80%' valign='top'><u>"+document.citForm.case_name.value+"</u>, "+document.citForm.case_chapter.value+" "+document.citForm.case_jurisdiction.value+" "+document.citForm.case_pagenumbers.value+" "+document.citForm.case_year.value+"</td></tr><tr><td width='20%' valign='top'><b>Text:</b></td><td width='80%' valign='top'>"+document.citForm.txt.value+"</td></tr></table></body></html>");
      }
</script>

<body onload="createcitSel()">
<form name="citForm">
<input type="button" value="Click for Citation (Alt-C)" onclick="AlertCitation()" accesskey="c">
<div id="p222" onselectstart="StartSelection(this)" onmouseup="EndSelection(this)">
    Here is some legal text that is on page 571, and
</div>
<hr width="100%" style="line-height: 1px; color: red;" noshade>
<div id="p223" onselectstart="StartSelection(this)" onmouseup="EndSelection(this)">
    here is some legal text on page 572
</div>
<input type="hidden" name="txt" value="">
<input type="hidden" name="case_name" value="Lopez v. Director, N.H. Div. of Motor Vehicles">
<input type="hidden" name="case_chapter" value="145">
<input type="hidden" name="case_jurisdiction" value="N.H.">
<input type="hidden" name="case_pagenumbers" value="">
<input type="hidden" name="case_year" value="(2000)">
</form>
</body>
</html>

Thanks,

:) David
0
6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

 
LVL 10

Expert Comment

by:NetGroove
ID: 9663814
Why did you grade my support with a  B?
0
 
LVL 3

Author Comment

by:dapperry
ID: 9670881
Hi NetGroove,
     I didn't mean to be stingy, but I thought it was fair (personally, if I had the choice I would have given you a B+/A-, but the grading doesn't work that way).  The main reason was is that the click selecting of multiple divs is not what I was looking for.  The way I work the selection of multiple divs in my posted code was what I wanted.  Sorry, but I do want to let you know that I appreciate all of your help.  I''ll tell you what.  I will leave a 50 pt question out there for you only.  Answer it, and I'll give you an A.

:) David
0
 
LVL 10

Expert Comment

by:NetGroove
ID: 9671262
Thanks for the offer, this is very kind.
But please understand me too.
My comments are not answers in some sort of quiz where you decide how good or bad the answers are.
My comments are support for your problem.
If you do not have a problem and know it better then you need no support and are looking for better approaches then your approach already is.
If you have a problem and need help, then you read my comment and ask for clarification if something is not that way which you expected it.

I saw in your profile that you often grade answers with a B.
Form EE administration point of view you are on the right track.
From my point of view you are wrong. If you are next time seeking for urgent help and do not have enough points to be attractive for an urgent call, then is your profile full of Bs (for any reason) a bad support for you to be attractive to experts.

By the way, not only that the grading are stored in your profile, they are stored also in my profile and only not visible temporary.
The grading is also a multiplication for expert points which do not cost you any extra points.

If you like to do me a favor, then remove your fifty points offer to me and ask for grade correction in this question.
Both tasks can be done in one request posted in this topic area:
http://oldlook.experts-exchange.com/Community_Support/

Thanks in advance,
NetGroove

0
 
LVL 3

Author Comment

by:dapperry
ID: 9671735
Hi NetGroove,
     OK - I deleted the 50 pt question and requested an upgrade on the gradeto an A.  Nevertheless, I believe I did ask you for clarification before grading, and told you that I didn't like your click selection of divs.  You came back with a comment about "everything is possible...", but that you thought that your click selection of divs was best.  So I went out and used a lot of your code, but had to do more research in order to come up with the solution I was looking for.  Hence the original B grade.  I realize that it doesn't cost me any more points to give an A than a B, but don't you think grades should be earned?  Anyhow, I would like to see if we could change the grading systems to allow + and - grades.  As said before, I appreciate your help and you definitely led me in a direction that I would not have been able to go on my own.  I would have preferred to give you a B+ or A-.  Anyhow - let me know if you have any problems getting your upgrade to A.

:) David
0
 
LVL 10

Expert Comment

by:NetGroove
ID: 9672274
Thanks AnnieMod :)

Thank you David for the upgrade and for the clarification.
I hope I can be of more help in your next question.

See you,
NetGroove


0
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 9672494
Hi Dave,  

>>don't you think grades should be earned

  Evidently, you have never been a teacher, and NetGroove has shown remarkable skill at intimidating users.  Grades are the province of the user.

 You are the individual who must decide which, if any, answer fulfills your question and to what degree.  We 'experts' can only provide you with options/possible solutions (especially if the question is vague and/or incomplete).

 While the following:
..next time seeking for urgent help and do not have enough points to be attractive for an urgent call

may be true for those 'experts' who seek to 'up' their rank, there are many more who are willing to help for little to no points (which is the case on other forums)

Vinny

0
 
LVL 10

Expert Comment

by:NetGroove
ID: 9672542
"For no points look at: http://members.aol.com/grassblad..."
0

Featured Post

IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

Join & Write a Comment

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…

707 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

17 Experts available now in Live!

Get 1:1 Help Now