[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Retrieving selected text from mouse highlight

Posted on 2002-06-20
5
Medium Priority
?
181 Views
Last Modified: 2012-05-04
This is probably obvious, but I'm getting nowhere. It's partly and XSL/XML question, but I think the answer is in HTML -

I'm using an XSL translation to show some XML data in the browser. I want to be able to highlight ranges of text and then somehow get to the tag references of the selected range.

I can't seem to find any way to grab just the selected text (short of a right click, cut copy paste) but I'm sure there's got to be a way to do this.

The following is a chunk of the translation source. What I'd like to be able to do is highlight "Here's some line 1 text. Here's some line 2 text" and be able to know that the Index values for the selected range were 1 and 2.

I've got the selected text (document.selection.createrange) but is it possible to get the underlying tag info?

???

<TextFile>
<Page>1
<Text>  Here's some line 1 text</Text>
<Line>1</Line>
<Index>23</Index>
<Text>  Here's some line 2 text</Text>
<Line>1</Line>
<Index>24</Index>
</Page>
<Page>2
<Text>  Here's some page 2 line 1 text</Text>
<Line>1</Line>
<Index>1</Index>
<Text>  Here's some line 2 text</Text>
<Line>1</Line>
<Index>1</Index>
</Page>
</TextFile>
0
Comment
Question by:carpbyte
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
5 Comments
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 7098459
This might help:

FROM:

http://msdn.microsoft.com/Downloads/samples/Internet/ie55/editregions/editregions.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>
<HEAD>
<TITLE>Editable Regions Sample</TITLE>

<LINK REL="stylesheet" HREF="/workshop/samples/author/dhtml/refs/samplessdkIE4.css" TYPE="text/css">

<STYLE>
body{
margin:0;
background:white;
font-family:verdana;
font-size:80%;
}
.bar{
background:#336699;
width:100%;
height:30px;
border-top:1px solid #99CCFF;
border-bottom:1px solid #000000;
}
.desbar{
background:#FFFFFF;
width:100%;
padding: 10px;
border-top:1px solid #CCCCCC;
border-bottom:1px solid #000000;
color:black;
font-size:8pt;
height:105;
}
.title{
font-size:15pt;
color:white;
padding-left:10px;
}
PRE { margin:0}

a:link
{
text-decoration:none;
color:white
}
a:visited
{
text-decoration:none;
color:white
}
a:active
{
text-decoration:none;
color:white
}
a:hover
{
text-decoration:none;
color:yellow
}
BUTTON {cursor:hand; background:#ffffff; border-color:#99ccff; font-weight:bold;}
</STYLE>


<SCRIPT>
function fnToggleEdits(oObj,oBtn) {
    currentState = oObj.isContentEditable;
    newState = !currentState;
    oObj.contentEditable = newState;
   
    newState==false ? oBtn.innerHTML='Editing On' :
        oBtn.innerHTML='Editing Off';
}
</SCRIPT>

</HEAD>

<BODY >
<!-- TOOLBAR_START --><!-- TOOLBAR_EXEMPT --><!-- TOOLBAR_END -->
<DIV CLASS="bar title">
Editable Regions Sample
</DIV>
<DIV CLASS="desbar">
<H4 style="font-size:10pt;">
This example demonstrates the features of Microsoft&#174; Internet Explorer that enable users to edit the content of an HTML element directly from the browser.
</H3>
<P> This HTML editor is a DIV element set to be content editable. Any valid HTML content (text, images, form controls, etc.) can be pasted and edited in this editor.</P>

<div align="center">
<DIV UNSELECTABLE ALIGN="center" STYLE="height:210; width:90%; background-color:#99CCFF; border:1px solid black">  
    <DIV CLASS="bar title">HTMLEditor (Content Editable DIV)</DIV>

<DIV style="padding:10px">
  <BUTTON UNSELECTABLE ID="oEditDiv" TITLE="Editing Off" onclick='fnToggleEdits(oDiv,oEditDiv);oDiv.focus();'>Editing Off</BUTTON>  
  <BUTTON UNSELECTABLE  TITLE="Bold" onclick='if (oDiv.isContentEditable==true) document.execCommand("Bold"); oDiv.focus();' >Bold</BUTTON>  
  <BUTTON UNSELECTABLE  TITLE="Italic" onclick='if (oDiv.isContentEditable==true) document.execCommand("Italic"); oDiv.focus();' ><I>Italic</I></BUTTON>  
  <BUTTON UNSELECTABLE  TITLE="Underline" onclick='if (oDiv.isContentEditable==true) document.execCommand("Underline"); oDiv.focus();'><U>Underline</U> </BUTTON>
 
</DIV>
  <DIV id=oDiv contenteditable ALIGN=left STYLE="height:100; width:95%;background-color:white; font-face:Arial; padding:3;    
   border:inset #99ccff; scrollbar-base-color:#99ccff; overflow=auto;"></DIV>
<BUTTON UNSELECTABLE TITLE="Append from HTMLEditor" onclick='oTextarea.value+=oDiv.innerHTML;oTextarea.focus();'>
      Append to TextEditor</BUTTON>
   
</DIV>
</div>
<BR/>

<P>This text editor is a TEXTAREA element and is content editable by default. Only text can be edited in this tool. However, you can draft HTML in TEXTEditor and press the Append to HTMLEditor button to see the result appended to HTMLEditor. The Append to TextEditor button reverses this process by appending the HTMLEditor's HTML as text to TEXTEditor.<BR/><BR/>
<br>

<div align="center">
<DIV UNSELECTABLE ALIGN="center" STYLE="height:210; width:90%; background-color:#99ccff; border:1px solid black">  
    <DIV CLASS="bar title">TEXTEditor (TEXTAREA)</DIV>
      
<DIV style="padding:10">
      
      <BUTTON UNSELECTABLE ID="oEditText" TITLE="Editing Off"
      onclick='fnToggleEdits(oTextarea,oEditText);oTextarea.focus();'>Editing Off</BUTTON>
</DIV>
   
  <TEXTAREA id=oTextarea ALIGN=left STYLE="height:100; width:95%;background-color:white; padding:3; border:inset #99ccff; scrollbar-base-color:#99ccff; overflow=auto;"></TEXTAREA>  
  <BR/>
      <BUTTON UNSELECTABLE TITLE="Append to HTMLEditor" onclick='oDiv.innerHTML+=oTextarea.value;oTextarea.focus();'>  
   Append to HTMLEditor</BUTTON>
</DIV>
</div>
<BR/><P>Both editors use the same function to activate or deactivate editing. The function uses the <b>isContentEditable</b> property to test whether editing is active. Accordingly, the <b>contentEditable</b> property is then reversed to reset editing.
</DIV>

<DIV CLASS="bar" STYLE=" padding:5px; padding-left:10">
<A href="http://www.microsoft.com/misc/info/cpyright.htm" target=_top>
&#169;2002 Microsoft Corporation . All rights reserved. Terms of use</A>.
</DIV>
<P><HR><font color="black" face="ms sans serif" size="1">&copy;<a href="http://msdn.microsoft.com/isapi/gomscom.asp?TARGET=/info/cpyright.htm" target="_top"> 2002 Microsoft Corporation .  All rights reserved.  Terms of use.</a></font>
</body>
</html>

Please note this is copyrighted material.

Cd&

0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 7182694
This question has been abandoned. I will make a recommendation to the
moderators on its resolution in a week or two. I appreciate any comments
that would help me to make a recommendation.
<note>
   In the absence of responses, I may recommend DELETE unless it is clear
   to me that it has value as a PAQ.  Silence = you don't care
</note>

Cd&
0
 

Author Comment

by:carpbyte
ID: 7183952
Sorry I thought I had commented on the response, but apparently not.

I did look at the editor sample but it still doesn't provide the level of control I was looking for - style sheets and XML translations appear to have undesirable random effects on the text selection range so I've resorted to a different solution outside of HTML.

Thank you for the comment and the proposed solution, but I guess I have abandoned the question.

Carp.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 7211790
It is time to clean this abandoned question up.  

I am putting it on a clean up list for CS.

<recommendation>
zerp point PAQ

</recommendation>

If anyone participating in the Q disagrees with the recommendation,
please leave a comment for the mods.

Cd&
0
 
LVL 5

Accepted Solution

by:
Netminder earned 0 total points
ID: 7237611
Per recommendation, points refunded and question closed.

Netminder
CS Moderator
0

Featured Post

Free Tool: ZipGrep

ZipGrep is a utility that can list and search zip (.war, .ear, .jar, etc) archives for text patterns, without the need to extract the archive's contents.

One of a set of tools we're offering as a way to say thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

656 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