dapperry
asked on
Get selected text of a div
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
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
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.citS
if(theDiv.citSel==true){
theDiv.className='cSel';
} else {
theDiv.className='';
}
}
function AlertCitation(){
msg = "";
divs = document.getElementsByTagN
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>
<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.citS
if(theDiv.citSel==true){
theDiv.className='cSel';
} else {
theDiv.className='';
}
}
function AlertCitation(){
msg = "";
divs = document.getElementsByTagN
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>
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.citS
if(theDiv.citSel==true){
theDiv.style.backgroundCol
} else {
theDiv.style.backgroundCol
}
}
function AlertCitation(){
msg = "";
span = document.getElementsByTagN
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>
<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.citS
if(theDiv.citSel==true){
theDiv.style.backgroundCol
} else {
theDiv.style.backgroundCol
}
}
function AlertCitation(){
msg = "";
span = document.getElementsByTagN
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>
ASKER
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
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
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Hi,
is this more in line with what you want?
<html><head>
<script>
var citations = new Array()
function storeThis(divID)
{
txt = document.selection.createR
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
is this more in line with what you want?
<html><head>
<script>
var citations = new Array()
function storeThis(divID)
{
txt = document.selection.createR
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
ASKER
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.getElementsB
for(i=0;i<divs.length;i++)
var nnm = divs[i].attributes;
var namedItem = document.createAttribute("
namedItem.value=false;
nnm.setNamedItem(namedItem
}
}
function StartSelection(theDiv) {
divs=document.getElementsB
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.getElementsB
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.createR
if (txt != "" && startdiv != null && enddiv != null) {
pagenums = "";
divs = document.getElementsByTagN
for(i=0;i<divs.length;i++)
if(divs[i].citSel==true){
strDiv=divs[i].id;
pagenums+=strDiv.substring
}
}
pagenums=pagenums.substrin
document.citForm.txt.value
document.citForm.case_page
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
citationwin = window.open(page_url,"cita
citationwin.document.write
}
</script>
<body onload="createcitSel()">
<form name="citForm">
<input type="button" value="Click for Citation (Alt-C)" onclick="AlertCitation()" accesskey="c">
<div id="p222" onselectstart="StartSelect
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="StartSelect
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
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.getElementsB
for(i=0;i<divs.length;i++)
var nnm = divs[i].attributes;
var namedItem = document.createAttribute("
namedItem.value=false;
nnm.setNamedItem(namedItem
}
}
function StartSelection(theDiv) {
divs=document.getElementsB
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.getElementsB
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.createR
if (txt != "" && startdiv != null && enddiv != null) {
pagenums = "";
divs = document.getElementsByTagN
for(i=0;i<divs.length;i++)
if(divs[i].citSel==true){
strDiv=divs[i].id;
pagenums+=strDiv.substring
}
}
pagenums=pagenums.substrin
document.citForm.txt.value
document.citForm.case_page
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
citationwin = window.open(page_url,"cita
citationwin.document.write
}
</script>
<body onload="createcitSel()">
<form name="citForm">
<input type="button" value="Click for Citation (Alt-C)" onclick="AlertCitation()" accesskey="c">
<div id="p222" onselectstart="StartSelect
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="StartSelect
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
Why did you grade my support with a B?
ASKER
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
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
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
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
ASKER
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
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
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
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
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
>>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
"For no points look at: http://members.aol.com/grassblad..."
<html>
<head>
<style>
.cSel {
background-color: cornflowerblue;
}
</style>
<script>
function check(theDiv){
theDiv.citSel=(theDiv.citS
if(theDiv.citSel==true){
theDiv.style.backgroundCol
} else {
theDiv.style.backgroundCol
}
}
function AlertCitation(){
msg = "";
divs = document.getElementsByTagN
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>