how to test for browser specific methods like document.selection.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]

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

On 20 Nov 2004 13:06:32 -0800, lawrence <lkrubner@geoci ties.com> wrote:
[color=blue]
> Is this the correct way to test for a method before I use it?[/color]

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 ();
/* ... */
}
[color=blue]
> createRange() is, I believe, an IE only method.[/color]

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]

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

Michael Winter wrote:
[...][color=blue]
>[color=green]
>> createRange() is, I believe, an IE only method.[/color]
>
>
> It is a proprietary method, but that doesn't necessarily mean only IE
> supports it. I can't name any others that do, though.[/color]

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]

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

On Sun, 21 Nov 2004 21:16:16 +1000, RobG <rgqld@iinet.ne t.auau> wrote:
[color=blue]
> Michael Winter wrote:[/color]

[snip]
[color=blue][color=green]
>> [createRange] is a proprietary method, but that doesn't necessarily
>> mean only IE supports it. I can't name any others that do, though.[/color]
>
> Seems it's been adopted in DOM Level 2
>
> [URL to DOM 2 Traveral and Range Specification][/color]

[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]

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

Michael Winter wrote:
[...][color=blue]
> 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).[/color]

Ah yes, thanks.

Rob.

[lawrence]

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

Fred Oz <ozfred@iinet.n et.auau> wrote in message news:<41a08c76$ 0$25762$5a62ac2 2@per-qv1-newsreader-01.iinet.net.au >...[color=blue]
> Michael Winter wrote:
> [...][color=green]
> > 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).[/color][/color]


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]

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

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]

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

On 21 Nov 2004 23:25:02 -0800, lawrence wrote:
[color=blue]
> <script type="text/javascript">
>
> function insertAtCursor( myField, tag) {
> if (document.selec tion && document.select ion.createRange ) {[/color]

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]

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

On 21 Nov 2004 23:25:02 -0800, lawrence <lkrubner@geoci ties.com> wrote:
[color=blue]
> 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?[/color]

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.
[color=blue]
> 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) {[/color]

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!).
[color=blue]
> // 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;[/color]

This is where the silliness begins. You have the element - you don't need
the id. Delete that line.
[color=blue]
> if (startPos != 0 || endPos != 0) {
> var mySelection = myField.value.s ubstring(
> myField.selecti onStart,
> myField.selecti onEnd);[/color]

You've stored the values of these two properties in startPos and endPos,
so you may as well use them.
[color=blue]
> 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);[/color]

Just

myField.value = ...

will do.
[color=blue]
> } else {
> alert("You haven't selected any text to change.");
> }
> } else if (document.forms[0].myField) {[/color]

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.
[color=blue]
> function insertAtCursorL ink (myField) {[/color]

[snip]
[color=blue]
> range.text = '<a href=\"' + address + '\">' + range.text + '<\/a>';[/color]

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]
[color=blue]
> function insertAtCursorI mage (myField) {[/color]

[snip]
[color=blue]
> address = '<img src=\\\"' + address + '\\\">';[/color]

That would produce

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

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

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

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]
[color=blue]
> <textarea id='dog' name='dog'>Type something here, damnit</textarea>[/color]

You can omit the id attribute here as you don't need it.

[snip]

From your other post.
[color=blue]
> document.forms[0].elements[this][/color]

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]

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

"Michael Winter" <M.Winter@bluey onder.co.invali d> wrote in message[color=blue]
> 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.[/color]

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?




[color=blue][color=green]
> > } else if (myField && myField.selecti onStart) {[/color]
>
> 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!).[/color]

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?




[color=blue][color=green]
> > // 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;[/color]
>
> This is where the silliness begins. You have the element - you don't need
> the id. Delete that line.[/color]

Done.






[color=blue][color=green]
> > } else {
> > alert("You haven't selected any text to change.");
> > }
> > } else if (document.forms[0].myField) {[/color]
>
> 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.[/color]

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.





[color=blue][color=green]
> > function insertAtCursorL ink (myField) {[/color]
> [snip][color=green]
> > range.text = '<a href=\"' + address + '\">' + range.text + '<\/a>';[/color]
> You don't need to escape those double quotes.[/color]

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.



[color=blue][color=green]
> > <form method="post" action="#">[/color]
> 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.[/color]

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.


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

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?


[color=blue]
> From your other post.
>[color=green]
> > document.forms[0].elements[this][/color]
>
> 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.[/color]

Thanks again much for your help.

[Michael Winter]

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

On 30 Nov 2004 23:08:41 -0800, lawrence <lkrubner@geoci ties.com> wrote:

[snip]
[color=blue]
> Thanks much for all the help with the javascript code.[/color]

You're welcome.
[color=blue]
> This is going into some open source code. Do you want your name
> mentioned in the credits for advice with javascript?[/color]

I'm not particularly bothered either way. If you think I've helped you
sufficiently to deserve it, please yourself, but I won't mind if you
don't. :)

[snip]
[color=blue]
> 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?[/color]

It's a unary (one argument) operator like new and logical NOT (!). You can
use parentheses, but it does nothing special, just the usual precedence
modifications. For example, the expression

typeof identifier == 'string'

would apply the typeof operator to the variable, identifier, obtaining the
type *as* a string, and compare it to the string literal, 'string'. It
could also be written as:

typeof (identifier) == 'string'

Alternatively, the expression

typeof (identifier == 'string')

would first evaluate the comparison, then obtain the type that results
from that comparison. As this form of comparison[1] always evaluates to
true or false, the typeof operator would always yield 'boolean'.

The reason that parentheses are not usually used with operators like
typeof is to actually avoid confusion: they aren't functions, so they
shouldn't be made to look like functions. If you do want to add
parentheses, go ahead, but don't forget what you're actually using.

[snip]
[color=blue]
> But is there any way I can test and find out if a browser will allow me
> to add text to a textarea?[/color]

If the browser can be scripted, it's probably fair to say it will always
perform one of the code paths. The modification of a form control value is
a fairly basic operation. It may fail in ancient browsers, but we're
talking pre-IE4/NN4.
[color=blue]
> 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.[/color]

You should consider that for users that have no scripting ability at all.
It might be a good idea to dynamically add the buttons so that they won't
exist should scripting be disabled.

[snip]

[lawrence, then me:][color=blue][color=green][color=darkred]
>>> <textarea id='dog' name='dog'>Type something here, damnit</textarea>[/color]
>>
>> You can omit the id attribute here as you don't need it.[/color]
>
> 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?[/color]

No, not in this case. The TEXTAREA element is contained in a form so you
can use the name to get the reference:

formObj.element s['name']

Good luck,
Mike


[1] Equality (==) and strict equality (===) operations always yield a
boolean. However, if one of the arguments in a relational (<, >, etc)
comparison is NaN when converted to a number, the result will be undefined.

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

[lkrubner@geocities.com]

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


Michael Winter wrote:[color=blue][color=green]
> > I find the syntax of typeof to be strange. If it was typeof() with[/color][/color]
[color=blue][color=green]
> > parenthesises I'd have an easier time with it. Is it a function? Or[/color][/color]
is[color=blue][color=green]
> > it a type of casting? A casting test?[/color]
>
> It's a unary (one argument) operator like new and logical NOT (!).[/color]
You can[color=blue]
> use parentheses, but it does nothing special, just the usual[/color]
precedence[color=blue]
> modifications. For example, the expression
>
> typeof identifier == 'string'
>
> would apply the typeof operator to the variable, identifier,[/color]
obtaining the[color=blue]
> type *as* a string, and compare it to the string literal, 'string'.[/color]
It

Thanks much. That makes it clear.




[color=blue][color=green]
> > But is there any way I can test and find out if a browser will[/color][/color]
allow me[color=blue][color=green]
> > to add text to a textarea?[/color]
>
> If the browser can be scripted, it's probably fair to say it will[/color]
always[color=blue]
> perform one of the code paths. The modification of a form control[/color]
value is[color=blue]
> a fairly basic operation. It may fail in ancient browsers, but we're[/color]
[color=blue]
> talking pre-IE4/NN4.
>[color=green]
> > If the operation fails I'd like to tell the user that something is[/color][/color]
[color=blue][color=green]
> > wrong. Otherwise they will sit there clicking the button and[/color][/color]
wondering[color=blue][color=green]
> > if something is supposed to happen.[/color]
>
> You should consider that for users that have no scripting ability at[/color]
all.[color=blue]
> It might be a good idea to dynamically add the buttons so that they[/color]
won't[color=blue]
> exist should scripting be disabled.[/color]

The buttons worked with IE for the last 5 months, and they were placed
on the screen dynamically if the browser was IE. The people I work with
said it was confusing that sometimes the buttons were there and
sometimes they weren't - we use the widest possible variety of browsers
to tests sites, and they weren't sure what the pattern of appearance
and disappearance was - I had to tell them that the pattern was the
presence or absense of IE. They said it would be better if the buttons
were always there (the 'stability of user interface' argument) and that
if the browser had no way to use the buttons, then I should gray them
out or offer an alert to the user. That is mostly what I've done, but,
as I asked before, I'm wondering if there is a way to test for a
browsers ability to handle something like myField.value += mySelection.
You've set my mind to rest about that somewhat.

Since this is on a control panel, not a public website, I may be able
to get away with insisting that people enable Javascript on their
browsers. All the same, how do I test to see if users have disabled
Javascript on their browsers?



[color=blue]
> [snip]
>
> [lawrence, then me:][color=green][color=darkred]
> >>> <textarea id='dog' name='dog'>Type something here,[/color][/color][/color]
damnit</textarea>[color=blue][color=green][color=darkred]
> >>
> >> You can omit the id attribute here as you don't need it.[/color]
> >
> > 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?[/color]
>
> No, not in this case. The TEXTAREA element is contained in a form so[/color]
you[color=blue]
> can use the name to get the reference:
>
> formObj.element s['name'][/color]

Good point. Thanks.

[lkrubner@geocities.com]

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


Michael Winter wrote:[color=blue]
> On 30 Nov 2004 23:08:41 -0800, lawrence <lkrubner@geoci ties.com>[/color]
wrote:[color=blue]
>
> [snip]
>[color=green]
> > Thanks much for all the help with the javascript code.[/color]
>
> You're welcome.
>[color=green]
> > This is going into some open source code. Do you want your name
> > mentioned in the credits for advice with javascript?[/color]
>
> I'm not particularly bothered either way. If you think I've helped[/color]
you[color=blue]
> sufficiently to deserve it, please yourself, but I won't mind if you[/color]
[color=blue]
> don't. :)
>
> [snip]
>[color=green]
> > I find the syntax of typeof to be strange. If it was typeof() with[/color][/color]
[color=blue][color=green]
> > parenthesises I'd have an easier time with it. Is it a function? Or[/color][/color]
is[color=blue][color=green]
> > it a type of casting? A casting test?[/color]
>
> It's a unary (one argument) operator like new and logical NOT (!).[/color]
You can[color=blue]
> use parentheses, but it does nothing special, just the usual[/color]
precedence[color=blue]
> modifications. For example, the expression
>
> typeof identifier == 'string'
>
> would apply the typeof operator to the variable, identifier,[/color]
obtaining the[color=blue]
> type *as* a string, and compare it to the string literal, 'string'.[/color]
It[color=blue]
> could also be written as:
>
> typeof (identifier) == 'string'
>
> Alternatively, the expression
>
> typeof (identifier == 'string')
>
> would first evaluate the comparison, then obtain the type that[/color]
results[color=blue]
> from that comparison. As this form of comparison[1] always evaluates[/color]
to[color=blue]
> true or false, the typeof operator would always yield 'boolean'.
>
> The reason that parentheses are not usually used with operators like[/color]
[color=blue]
> typeof is to actually avoid confusion: they aren't functions, so they[/color]
[color=blue]
> shouldn't be made to look like functions. If you do want to add
> parentheses, go ahead, but don't forget what you're actually using.
>
> [snip]
>[color=green]
> > But is there any way I can test and find out if a browser will[/color][/color]
allow me[color=blue][color=green]
> > to add text to a textarea?[/color]
>
> If the browser can be scripted, it's probably fair to say it will[/color]
always[color=blue]
> perform one of the code paths. The modification of a form control[/color]
value is[color=blue]
> a fairly basic operation. It may fail in ancient browsers, but we're[/color]
[color=blue]
> talking pre-IE4/NN4.
>[color=green]
> > If the operation fails I'd like to tell the user that something is[/color][/color]
[color=blue][color=green]
> > wrong. Otherwise they will sit there clicking the button and[/color][/color]
wondering[color=blue][color=green]
> > if something is supposed to happen.[/color]
>
> You should consider that for users that have no scripting ability at[/color]
all.[color=blue]
> It might be a good idea to dynamically add the buttons so that they[/color]
won't[color=blue]
> exist should scripting be disabled.
>
> [snip]
>
> [lawrence, then me:][color=green][color=darkred]
> >>> <textarea id='dog' name='dog'>Type something here,[/color][/color][/color]
damnit</textarea>[color=blue][color=green][color=darkred]
> >>
> >> You can omit the id attribute here as you don't need it.[/color]
> >
> > 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?[/color]
>
> No, not in this case. The TEXTAREA element is contained in a form so[/color]
you[color=blue]
> can use the name to get the reference:
>
> formObj.element s['name']
>
> Good luck,
> Mike
>
>
> [1] Equality (==) and strict equality (===) operations always yield a[/color]
[color=blue]
> boolean. However, if one of the arguments in a relational (<, >, etc)[/color]
[color=blue]
> comparison is NaN when converted to a number, the result will be[/color]
undefined.[color=blue]
>
> --
> Michael Winter
> Replace ".invalid" with ".uk" to reply by e-mail.[/color]

[Richard Cornford]

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

lkrubner@geocit ies.com wrote:
<snip>[color=blue]
> ... . The people I work with said it was confusing that
> sometimes the buttons were there and sometimes they
> weren't - we use the widest possible variety of browsers
> to tests sites, and they weren't sure what the pattern of
> appearance and disappearance was - I had to tell them that
> the pattern was the presence or absense of IE. They said
> it would be better if the buttons were always there (the
> 'stability of user interface' argument) ...[/color]
<snip>

It is often depressing to be reminded of the real number of individuals
working on web projects who are incapable of thinking about what they
are doing. As web developers we use lots of web browsers, but the end
users don't. They have one preferred browser and will only ever be
accessing the user interface with that one browser. For them the buttons
will not appear and disappear, they will either be there or they won't.
The result will be a stable interface, and better than always having
buttons that never do anything (especially buttons that alert to tell
you that they are never going to do anything).

Richard.

[lkrubner@geocities.com]

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

Oh, that's simply not true.

Fictional example one: Cindy, a student at UNC, logs into her account
from her dormroom using her laptop which has IE 6.0 on it. She types a
new post to her weblog, then goes out to dinner with friends.
Afterwards she goes to the media center to work on her photography
project and, goofing off while waiting for her project partners, logs
into her site again using Safari on one of the Macintoshes available at
the media center. Afterwards she goes over to her boyfriends apartment
and late at night she logs in again, this time using FireFox, which her
boyfriend thinks is a great web browser.

Fictional example two: Betty, a high school teacher in Oregon, logs
into her weblog and posts an entry about nihlism and being a teenager.
She's using the old PC she has at home, running IE 5. The next day she
posts again, from school, using Netscape which has been loaded onto the
Macintoshes they have at school.


I think people will access our online service using a variety of web
browsers. I'm still divided about the best strategy, but everyone
around me seems to think that I should keep the buttons visible but
somehow grey them out when they are not available.