how to test for browser specific methods like document.select ion.createRange

[lawrence]

Is this the correct way to test for a method before I use it?
createRange() is, I believe, an IE only method.
function wrapSelectionIn Tag(selection, tag) {
if (document.selec tion.createRang e) {
var range = document.select ion.createRange ();
if (range.parentEl ement() == element) range.text = '<' + tag +
'>' + range.text + '<\/' + tag + '>';
}
}

[Michael Winter]

On 20 Nov 2004 13:06:32 -0800, lawrence <lk******@geoci ties.com> wrote:

Is this the correct way to test for a method before I use it?
Nearly. You need to check for the object, selection, as well.

if(document.sel ection && document.select ion.createRange ) {
var range = document.select ion.createRange ();
/* ... */
}

Alternatively,

var sel;
if((sel = document.select ion) && sel.createRange ) {
var range = sel.createRange ();
/* ... */
}
createRange() is, I believe, an IE only method.

It is a proprietary method, but that doesn't necessarily mean only IE
supports it. I can't name any others that do, though.

[snip]

Mike
*Please* don't use tabs for indentation on Usenet. Convert them to spaces
before posting.

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

[RobG]

Michael Winter wrote:
[...]

createRange() is, I believe, an IE only method.

It is a proprietary method, but that doesn't necessarily mean only IE
supports it. I can't name any others that do, though.

Seems it's been adopted in DOM Level 2

<URL:http://www.w3.org/TR/2000/REC-DOM-Level-2-Traversal-Range-20001113/ranges.html#Lev el2-DocumentRange-method-createRange>

I've tested it in Mozilla and Safari (it works...).
Rob.

[Michael Winter]

On Sun, 21 Nov 2004 21:16:16 +1000, RobG <rg***@iinet.ne t.auau> wrote:

Michael Winter wrote:

[snip]

[createRange] is a proprietary method, but that doesn't necessarily
mean only IE supports it. I can't name any others that do, though.

Seems it's been adopted in DOM Level 2

[URL to DOM 2 Traveral and Range Specification]

[snip]

As I understand it, they are two different things.

The document.select ion.createRange method, as introduced by Microsoft,
reflects text selected by the user.

The document.create Range method, as introduced by the W3C, selects a
portion of the document tree, allowing you to manipulate it as a block
(essentially).

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

[Fred Oz]

Michael Winter wrote:
[...]

The document.select ion.createRange method, as introduced by Microsoft,
reflects text selected by the user.

The document.create Range method, as introduced by the W3C, selects a
portion of the document tree, allowing you to manipulate it as a block
(essentially).

Ah yes, thanks.

Rob.

[lawrence]

Fred Oz <oz****@iinet.n et.auau> wrote in message news:<41******* *************** *@per-qv1-newsreader-01.iinet.net.au >...

Michael Winter wrote:
[...]

The document.select ion.createRange method, as introduced by Microsoft,
reflects text selected by the user.

The document.create Range method, as introduced by the W3C, selects a
portion of the document tree, allowing you to manipulate it as a block
(essentially).

I'm trying to create an online text editor to supplement the PHP/MySql
content management system that we've already built. I don't know
Javascript all that well, so some of these questions may be stupid.

I changed the tabs to spaces in Microsoft Word, I hope Word doesn't
add any garbage characters.

I get no syntax errors in FireFox, but I'm not getting any selection
either. I'm not sure how to pass the right reference is in the html
form at bottom. How do I say, "Hey, I'm this element"??? And do I get
a string identifier that I could use in getElementById( ), or is it a
number I could use to reference the right index in elements[]????



<script type="text/javascript">

function insertAtCursor( myField, tag) {
if (document.selec tion && document.select ion.createRange ) {
var range = document.select ion.createRange ();
if (range.parentEl ement() == element) range.text = '<' + tag
+ '>' + range.text + '<\/' + tag + '>';
} else if (myField && myField.selecti onStart) {
// MOZILLA/NETSCAPE support
// textControl.val ue.substring(te xtControl.selec tionStart,
textControl.sel ectionEnd)
var startPos = myField.selecti onStart;
var endPos = myField.selecti onEnd;
myField.value = myField.value.s ubstring(0, startPos) +
myValue + myField.value.s ubstring(endPos , myField.value.l ength);
} else if (document.forms[0].myField) {
myField.value += '<' + tag + '>' + range.text + '<\/' + tag
+ '>';
} else {
alert("Awful sorry, but this web broswer doesn't support the
operations of this button");
}
}
function wrapSelectionMa keALink (element) {
var range = document.select ion.createRange ();
address = prompt('What address?', '');
address = '<a href=\\\"' + address + '\\\">';
if (range.parentEl ement() == element) range.text = address +
range.text + '<\/a>';
}

function wrapSelectionIn sertImage (element) {
var range = document.select ion.createRange ();
address = prompt('Add address for image. If the image is on
your site, look in Image Info.', '');
address = '<img src=\\\"' + address + '\\\">';
if (range.parentEl ement() == element) range.text = address +
range.text;
}
</script>

<form method="post" action="#">
<input type="button" value="bold"
onclick="insert AtCursor(docume nt.forms[0].elements[this], 'b')" />
<input type="button" value="italic"
onclick="insert AtCursor(docume nt.forms[0].elements[this], 'i')" />
<input type="button" value="blockquo te"
onclick="insert AtCursor(docume nt.forms[0].elements[this],
'blockquote')" />
<input type="button" value="big headline"
onclick="insert AtCursor(docume nt.forms[0].elements[this], 'h2')" />
<input type="button" value="small headline"
onclick="insert AtCursor(docume nt.forms[0].elements[this], 'h5')" />
<input type="button" value="make a link"
onclick="wrapSe lectionMakeALin k()" /> <p> sdfsd </p>
<textarea>Typ e something here, damnit</textarea> <p> sadfsdaf </p>
<input type="submit">
</form> <script type="text/javascript">

function insertAtCursor( myField, tag) {
if (document.selec tion && document.select ion.createRange ) {
var range = document.select ion.createRange ();
if (range.parentEl ement() == element) range.text = '<' + tag
+ '>' + range.text + '<\/' + tag + '>';
} else if (myField.select ionStart) {
// MOZILLA/NETSCAPE support
// textControl.val ue.substring(te xtControl.selec tionStart,
textControl.sel ectionEnd)
var startPos = myField.selecti onStart;
var endPos = myField.selecti onEnd;
myField.value = myField.value.s ubstring(0, startPos) +
myValue + myField.value.s ubstring(endPos , myField.value.l ength);
} else if (document.forms[0].myField) {
myField.value += '<' + tag + '>' + range.text + '<\/' + tag
+ '>';
} else {
alert("Awful sorry, but this web broswer doesn't support the
operations of this button");
}
}
function wrapSelectionMa keALink (element) {
var range = document.select ion.createRange ();
address = prompt('What address?', '');
address = '<a href=\\\"' + address + '\\\">';
if (range.parentEl ement() == element) range.text = address +
range.text + '<\/a>';
}

function wrapSelectionIn sertImage (element) {
var range = document.select ion.createRange ();
address = prompt('Add address for image. If the image is on
your site, look in Image Info.', '');
address = '<img src=\\\"' + address + '\\\">';
if (range.parentEl ement() == element) range.text = address +
range.text;
}
</script>

<form method="post" action="#">
<input type="button" value="bold"
onclick="insert AtCursor(docume nt.forms[0].elements[this], 'b')" />
<input type="button" value="italic"
onclick="insert AtCursor(docume nt.forms[0].elements[this], 'i')" />
<input type="button" value="blockquo te"
onclick="insert AtCursor(docume nt.forms[0].elements[this],
'blockquote')" />
<input type="button" value="big headline"
onclick="insert AtCursor(docume nt.forms[0].elements[this], 'h2')" />
<input type="button" value="small headline"
onclick="insert AtCursor(docume nt.forms[0].elements[this], 'h5')" />
<input type="button" value="make a link"
onclick="wrapSe lectionMakeALin k()" /> <p> sdfsd </p>
<textarea>Typ e something here, damnit</textarea> <p> sadfsdaf </p>
<input type="submit">
</form>

[lawrence]

Okay, I managed to get my text editor working for IE and
Mozilla/FireFox, but only by hardcoding the reference to the textarea
on the form. What is the generic way to get an element to refer to
itself, and pass a reference to itself to a function?


<script type="text/javascript">

function insertAtCursor( myField, tag) {
if (document.selec tion && document.select ion.createRange ) {
var range = document.select ion.createRange ();
if (range.text == '') {
alert("You haven't selected any text to change.");
} else {
range.text = '<' + tag + '>' + range.text + '<\/' + tag + '>';
}
} else if (myField && myField.selecti onStart) {
// MOZILLA/NETSCAPE support
// myField.value.s ubstring(myFiel d.selectionStar t,
myField.selecti onEnd)
var startPos = myField.selecti onStart;
var endPos = myField.selecti onEnd;
var elementName = myField.id;
if (startPos != 0 || endPos != 0) {
var mySelection =
myField.value.s ubstring(myFiel d.selectionStar t, myField.selecti onEnd);
mySelection = '<' + tag + '>' + mySelection + '<\/' + tag +
'>';
document.getEle mentById(elemen tName).value =
myField.value.s ubstring(0, startPos) + mySelection +
myField.value.s ubstring(endPos , myField.value.l ength);
} else {
alert("You haven't selected any text to change.");
}
} else if (document.forms[0].myField) {
myField.value += '<' + tag + '>' + range.text + '<\/' + tag +
'>';
} else {
alert("Awful sorry, but this web broswer doesn't support the
operations of this button");
}
}
function insertAtCursorL ink (myField) {
if (document.selec tion && document.select ion.createRange ) {
address = prompt('What is the address you want to link to?',
'http://');
var range = document.select ion.createRange ();
if (range.text == '') {
alert("You haven't selected any text to change.");
} else {
range.text = '<a href=\"' + address + '\">' + range.text +
'<\/a>';
}
} else if (myField && myField.selecti onStart) {
// MOZILLA/NETSCAPE support
address = prompt('What is the address you want to link to?',
'http://');
var startPos = myField.selecti onStart;
var endPos = myField.selecti onEnd;
var elementName = myField.id;
if (startPos != 0 || endPos != 0) {
var mySelection =
myField.value.s ubstring(myFiel d.selectionStar t, myField.selecti onEnd);
mySelection = '<a href=\"' + address + '\">' + mySelection +
'<\/a>';
document.getEle mentById(elemen tName).value =
myField.value.s ubstring(0, startPos) + mySelection +
myField.value.s ubstring(endPos , myField.value.l ength);
} else {
alert("You haven't selected any text to change.");
}
} else if (document.forms[0].myField) {
myField.value += '<' + tag + '>' + range.text + '<\/' + tag +
'>';
} else {
alert("Awful sorry, but this web broswer doesn't support the
operations of this button");
}
}

function insertAtCursorI mage (myField) {
var range = document.select ion.createRange ();
address = prompt('Add address for image. If the image is on your
site, look in Image Info.', '');
address = '<img src=\\\"' + address + '\\\">';
if (range.parentEl ement() == element) range.text = address +
range.text;
}
</script>

<form method="post" action="#">
<input type="button" value="bold"
onclick="insert AtCursor(docume nt.forms[0].elements['dog'], 'b');" />
<input type="button" value="italic"
onclick="insert AtCursor(docume nt.forms[0].elements['dog'], 'i');" />
<input type="button" value="blockquo te"
onclick="insert AtCursor(docume nt.forms[0].elements['dog'],
'blockquote');" />
<input type="button" value="big headline"
onclick="insert AtCursor(docume nt.forms[0].elements['dog'], 'h2');" />
<input type="button" value="small headline"
onclick="insert AtCursor(docume nt.forms[0].elements['dog'], 'h5');" />
<input type="button" value="make a link"
onclick="insert AtCursorLink(do cument.forms[0].elements['dog'])" />
<p> sdfsd </p>
<textarea id='dog' name='dog'>Type something here, damnit</textarea>
<p> sadfsdaf </p>
<input type="submit">
</form>

[Andrew Thompson]

On 21 Nov 2004 23:25:02 -0800, lawrence wrote:

<script type="text/javascript">

function insertAtCursor( myField, tag) {
if (document.selec tion && document.select ion.createRange ) {

It's a good idea to replace tab characters with 2 or 3
spaces before posting*.

It also helps to keep lines short, for example, this line..

if (document.selec tion && document.select ion.createRange ) {

can be written like this..

if (document.selec tion &&
document.select ion.createRange ) {

* Code that is easy to copy/paste/see is more likely to get attention,
and line wrap at unexpected places usually hampers that process.

--
Andrew Thompson
http://www.PhySci.org/codes/ Web & IT Help
http://www.PhySci.org/ Open-source software suite
http://www.1point1C.org/ Science & Technology
http://www.LensEscapes.com/ Images that escape the mundane

[Michael Winter]

On 21 Nov 2004 23:25:02 -0800, lawrence <lk******@geoci ties.com> wrote:

Okay, I managed to get my text editor working for IE and
Mozilla/FireFox, but only by hardcoding the reference to the textarea on
the form. What is the generic way to get an element to refer to itself,
and pass a reference to itself to a function?
In an event listener, the this operator refers to the element. However,
that's useless to you as you're buttons are not referring to themselves,
they're referring to another element in the same form.

The best you can do is shorten the reference from

document.forms[0].elements['textarea-name-or-id']

to

this.form.eleme nts['textarea-name-or-id']

in the onclick attributes.
In this code, you've missed the point of providing a reference to a
control. Namely, you take an element reference, obtain its id, then use
getElementById to get the reference again.
function insertAtCursor( myField, tag) {
if (document.selec tion && document.select ion.createRange ) {
var range = document.select ion.createRange ();
if (range.text == '') {
alert("You haven't selected any text to change.");
} else {
range.text = '<' + tag + '>' + range.text + '<\/' + tag + '>';
}
} else if (myField && myField.selecti onStart) {
A better test would be

} else if('number' == typeof myField.selecti onStart) {

which would succeed if the selection started at offset zero. You don't
need to test for myField as you know that will exist (you passed it!).
// MOZILLA/NETSCAPE support
// myField.value.s ubstring(myFiel d.selectionStar t,
myField.selecti onEnd)
var startPos = myField.selecti onStart;
var endPos = myField.selecti onEnd;
var elementName = myField.id;
This is where the silliness begins. You have the element - you don't need
the id. Delete that line.
if (startPos != 0 || endPos != 0) {
var mySelection = myField.value.s ubstring(
myField.selecti onStart,
myField.selecti onEnd);
You've stored the values of these two properties in startPos and endPos,
so you may as well use them.
mySelection = '<' + tag + '>' + mySelection + '<\/' + tag
+ '>';
document.getEle mentById(elemen tName).value
= myField.value.s ubstring(0, startPos) + mySelection
+ myField.value.s ubstring(endPos , myField.value.l ength);
Just

myField.value = ...

will do.
} else {
alert("You haven't selected any text to change.");
}
} else if (document.forms[0].myField) {
This looks for the field named (or identified as) myField in the first
form in the document. That will fail every time as you have no controls
called myField.

Change it to

} else {

and delete the last else block.

[snip]

You need to check for similar mistakes in the other functions.

There are only a couple of other comments.
function insertAtCursorL ink (myField) {
[snip]
range.text = '<a href=\"' + address + '\">' + range.text + '<\/a>';
You don't need to escape those double quotes. Writing

'" "' or "' '"

is fine. It's

'' '' or "" ""

where the inner pair of quotes needs to be escaped:

'\' \'' or "\" \""

[snip]
function insertAtCursorI mage (myField) {
[snip]
address = '<img src=\\\"' + address + '\\\">';
That would produce

<img src=\"...\">

which is invalid. Again, the escaping backslashes aren't needed.

[snip]
<form method="post" action="#">
action=""

will post back to the same page. Note that while IE handles this fine, it
can't, for some reason, interpret

<a href="">

correctly.

[snip]
<textarea id='dog' name='dog'>Type something here, damnit</textarea>
You can omit the id attribute here as you don't need it.

[snip]

From your other post.
document.forms[0].elements[this]

You might want to remind yourself of the last post I made in your "Check
if key is defined in associative array" thread. I pointed out that the
expression inside square brackets is converted to a string before it is
looked-up.

In the expression above, the this operator refers to an INPUT element.
When that is converted to a string, IE will attempt to find '[object]',
and better browsers will try to find '[object HTMLInputElemen t]'.
Obviously, that won't match any of the controls in your form, which is why
it failed.

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

[lawrence]

"Michael Winter" <M.******@bluey onder.co.invali d> wrote in message

The best you can do is shorten the reference from
document.forms[0].elements['textarea-name-or-id']
to
this.form.eleme nts['textarea-name-or-id']
in the onclick attributes.
This is how I referenced it all year but I was hoping for something
simpler. I've gone back to it now.

Thanks much for all the help with the javascript code. This is going
into some open source code. Do you want your name mentioned in the
credits for advice with javascript?

} else if (myField && myField.selecti onStart) {

A better test would be

} else if('number' == typeof myField.selecti onStart) {

which would succeed if the selection started at offset zero. You don't
need to test for myField as you know that will exist (you passed it!).

Good point. I find the syntax of typeof to be strange. If it was
typeof() with parenthesises I'd have an easier time with it. Is it a
function? Or is it a type of casting? A casting test?

// MOZILLA/NETSCAPE support
// myField.value.s ubstring(myFiel d.selectionStar t,
myField.selecti onEnd)
var startPos = myField.selecti onStart;
var endPos = myField.selecti onEnd;
var elementName = myField.id;

This is where the silliness begins. You have the element - you don't need
the id. Delete that line.

Done.

} else {
alert("You haven't selected any text to change.");
}
} else if (document.forms[0].myField) {

This looks for the field named (or identified as) myField in the first
form in the document. That will fail every time as you have no controls
called myField.

Change it to

} else {

and delete the last else block.

Good point. I changed it to just:

} else {
myField.value += '<' + tag + '>' + range.text + '<\/' + tag +
'>';
}

But is there any way I can test and find out if a browser will allow
me to add text to a textarea? If the operation fails I'd like to tell
the user that something is wrong. Otherwise they will sit there
clicking the button and wondering if something is supposed to happen.

function insertAtCursorL ink (myField) {

[snip]

range.text = '<a href=\"' + address + '\">' + range.text + '<\/a>';

You don't need to escape those double quotes.

It's all escaped in the end. It get sent to the screen by the print()
function in PHP. The code was all escaped and I unescaped the portion
I wanted to ask questions about because I thought the escapes would be
confusing on comp.lang.javas cript. I didn't un-escape the code that I
wasn't asking about. Sorry about posting it.

<form method="post" action="#">

action=""
will post back to the same page. Note that while IE handles this fine, it
can't, for some reason, interpret
<a href="">
correctly.

Right. Sorry, I should have offered more context. The little demo I
offered was for debugging purposes only. In the final product PHP sets
the action of the from correctly.
[snip]

<textarea id='dog' name='dog'>Type something here, damnit</textarea>
You can omit the id attribute here as you don't need it.

It's the name that I use here then?

this.form.name

I need the id to reference the item to Javascript, don't I?
From your other post.

document.forms[0].elements[this]

You might want to remind yourself of the last post I made in your "Check
if key is defined in associative array" thread. I pointed out that the
expression inside square brackets is converted to a string before it is
looked-up.

In the expression above, the this operator refers to an INPUT element.
When that is converted to a string, IE will attempt to find '[object]',
and better browsers will try to find '[object HTMLInputElemen t]'.
Obviously, that won't match any of the controls in your form, which is why
it failed.

Thanks again much for your help.