PDA

Click to See Complete Forum and Search --> : A "createRange()" example, please.

Lotfi Abdolhal
10-21-2004, 04:41 AM
Hellow everyone!

I am looking for a simple example on the applying of the method: "createRange()", preferably one that works with both main browsers: NS7 and IE6.
jbot
10-21-2004, 05:31 AM
Originally posted by Lotfi Abdolhal
I am looking for a simple example on the applying of the method: "createRange()"

if you look on Google, then you'll find what you're looking for. ;)
7stud
10-21-2004, 11:52 AM
There are two similar IE functions:

1)createTextRange()
2)createRange()

createRange() is used to retrieve the current selection like this:

var oRange = document.selection.createRange()

The 'selection' part is the 'selection object'. createRange() returns a TextRange object encompassing the current selection. You can get the text by doing this:

var sText = oRange.text;

createTextRange() is used to create your own text range. According to what I read, it can only be applied to a body, button, textarea, or an input element having text type (type="text").

It's used like this:

var oMakeRange = document.getElementById("my_div").createTextRange();

That would create a TextRange encompassing the <div id="my_div">. You can then move the start and end points of the range if you desire.


Below is an example using createRange(). Note: I couldn't get the NN counterpart, document.getSelection(), to retrieve selected text in a <textarea>.

The forum software is messing with the url in the .boxstyle <style>. It should be this:
background-image:
url( "url goes in here");
http://www.grsites.com/folders/my_backgrounds/misc180.gif
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="en" lang="en">

<head>
<title>Web Design</title>
<meta name="author" content="Mr. Smith, I presume" />
<meta name="description" content="web" />


<style type="text/css">
<!--
body{
background: buttonface;
}
.box_style{
border-style: inset;
border-width: 3px;
width: 50%;
height: 100px;
overflow: auto;
background-image:
url(http://www.grsites.com/folders/my_backgrounds/misc180.gif);
}
.buttons{
display: block;
margin-top: 25px;
margin-bottom: 0;
}

-->
</style>


<script language="javascript">
<!-- Hide from browsers lacking javascript

window.onload = initialize;
function initialize()
{
//Assign a functon to the button's onclick event handler:
document.f.b1.onclick = get_range;
}

function get_range()
{
var ta_2 = document.f.ta2; //shorten the reference to ta2

if(document.selection && document.selection.createRange)//then IE like broswers
{
var oRange = document.selection.createRange();//creates a
//TextRange object encompassing the
//selected text.

ta_2.value = oRange.text; //puts the selection into the
//textarea ta_2
}
else if(window.getSelection)//then NN like browsers
{
var sText=window.getSelection();
ta_2.value = sText;
}
else
{
alert("example won't work on your browser");
}

}

// End hiding -->
</script>
</head>
<body>

<form name="f" method="post" action="">

<div name="ta1" class="box_style">Select some text in this box.</div>
<input type="button" id="b1" name="b1" class="buttons" value="Display selected text"/>
<textarea name="ta2" class="box_style"></textarea>

</form>

</body>
</html>
Lotfi Abdolhal
10-21-2004, 04:13 PM
Thank you, Dear jbot, for your hint.
By the time I am strugling searching through google, 7stud put an end to that.

Not only a great teacher programmer, Dear 7stud, but you are also very generous.
As much as that I thank you.