Lab for compareEndPoints() Method : JavaScript DHTML examples (example source code) » HTML » Text HTML

JavaScript DHTML










Java Products
Java Articles
JavaScript DHTML Home  »   HTML   » [  Text HTML  ]   

 
Lab for compareEndPoints() Method

Please note that some example is only working under IE or Firefox.

/*
JavaScript Bible, Fourth Edition
by Danny Goodman 

Publisher: John Wiley & Sons CopyRight 2001
ISBN: 0764533428
*/

<HTML>
<HEAD>
<TITLE>TextRange.compareEndPoints() Method</TITLE>
<STYLE TYPE="text/css">
TD {text-align:center}
.propName {font-family:Courier, monospace}
#fixedRangeElem {color:red; font-weight:bold}
</STYLE>
<SCRIPT LANGUAGE="JavaScript">
var fixedRange
function setAndShowRangeData() {
    var selectedRange = document.selection.createRange()
    var result1 = fixedRange.compareEndPoints("StartToEnd", selectedRange)
    var result2 = fixedRange.compareEndPoints("StartToStart", selectedRange)
    var result3 = fixedRange.compareEndPoints("EndToStart", selectedRange)
    var result4 = fixedRange.compareEndPoints("EndToEnd", selectedRange)
    B1.innerText = result1
    compare1.innerText = getDescription(result1)
    B2.innerText = result2
    compare2.innerText = getDescription(result2)
    B3.innerText = result3
    compare3.innerText = getDescription(result3)
    B4.innerText = result4
    compare4.innerText = getDescription(result4)
}
function getDescription(comparisonValue) {
    switch (comparisonValue) {
        case -:
            return "comes before"
            break
        case :
            return "is the same as"
            break
        case :
            return "comes after"
            break
        default :
            return "vs."    
    }
}
function init() {
    fixedRange = document.body.createTextRange()
    fixedRange.moveToElementText(fixedRangeElem)
}
</SCRIPT>
</HEAD>
<BODY onLoad="init()">
<H1>TextRange.compareEndPoints() Method</H1>
<HR>
<P>Select text in the paragraph in various places relative to
the fixed text range (shown in red). See the relations between
the fixed and selected ranges with respect to their start
and end points.</P>
<TABLE ID="results" BORDER=CELLSPACING=CELLPADDING=2>
<TR><TH>Property</TH><TH>Returned Value</TH><TH>Fixed Range vs. Selection</TR>
<TR>
    <TD CLASS="propName">StartToEnd</TD>
    <TD CLASS="count" ID="B1">&nbsp;</TD>
    <TD CLASS="count" ID="C1">Start of Fixed 
    <SPAN ID="compare1">vs.</SPAN> End of Selection</TD>
</TR>
<TR>
    <TD CLASS="propName">StartToStart</TD>
    <TD CLASS="count" ID="B2">&nbsp;</TD>

<TD CLASS="count" ID="C2">Start of Fixed 
    <SPAN ID="compare2">vs.</SPAN> Start of Selection</TD>
</TR>
<TR>
    <TD CLASS="propName">EndToStart</TD>
    <TD CLASS="count" ID="B3">&nbsp;</TD>
    <TD CLASS="count" ID="C3">End of Fixed 
    <SPAN ID="compare3">vs.</SPAN> Start of Selection</TD>
</TR>
<TR>
    <TD CLASS="propName">EndToEnd</TD>
    <TD CLASS="count" ID="B4">&nbsp;</TD>
    <TD CLASS="count" ID="C4">End of Fixed 
    <SPAN ID="compare4">vs.</SPAN> End of Selection</TD>
</TR>
</TABLE>
<HR>
<P onMouseUp="setAndShowRangeData()">
Lorem ipsum dolor sit, <SPAN ID="fixedRangeElem">consectetaur adipisicing
 elit</SPAN>, 
sed do eiusmod tempor incididunt ut labore et dolore aliqua. Ut enim adminim
 veniam, 
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
 consequat.</P>
</BODY>
</HTML>
Related examples in the same category
1.  An example of a scrolling message
2.  Animating Text Styles
3.  Moving Text
4.  Using the TextRectangle Object Properties
5.  Exploring the Bounding TextRange Properties
6.   Two Search and Replace Approaches (with Undo)
7.  Using the document.selection Object
8.  Encipher and Decipher








Home| Contact Us
Copyright 2003 - 04 Demo Source and Support. All rights reserved.
All other trademarks are property of their respective owners.