Javascript Differences in Browsers

[Artist]

Mozilla and IE works different with Javascript.
I have Javascript Code which works fine with Mozilla
and it breaks with Internet Explorer.

I like to convert my code to work with both the browser.

What are the standard tools for the same?

Is there something which is mozilla specific that I should avoid to
have it working with internet explorer?

Thanks.!

[Tim Slattery]

Re: Javascript Differences in Browsers

googleartist@ya hoo.com (Artist) wrote:
[color=blue]
>Mozilla and IE works different with Javascript.
>I have Javascript Code which works fine with Mozilla
>and it breaks with Internet Explorer.[/color]

The actual IE implementations are not very different. What does differ
enough to cause lots of trouble is the DOM (Document Object Model).
[color=blue]
>I like to convert my code to work with both the browser.[/color]
[color=blue]
>What are the standard tools for the same?[/color]

I don't know of anything that automates this task.
[color=blue]
>Is there something which is mozilla specific that I should avoid to
>have it working with internet explorer?[/color]

More like the other way around. IE has some extensions that make it
somewhat easier to code sometimes, but they are non-standard. Mozilla
sticks to the standards. Generally, if you have code that works in
Mozilla it will also work in IE. For example, if you have the
following HTML:

<input type="text" name="xxx" id="xxx">

You can assign it a value in IE by coding

xxx.value="some thingorother";

But that won't work in Mozilla. The standard way to do that, which
will work in either browser, is:

getElementById( "xxx").value="s omethingorother ";

--
Tim Slattery
Slattery_T@bls. gov

[Matt Kruse]

Re: Javascript Differences in Browsers

Tim Slattery wrote:[color=blue]
> <input type="text" name="xxx" id="xxx">
> You can assign it a value in IE by coding
> xxx.value="some thingorother";[/color]

Don't you mean document.forms[0]["xxx"].value = "something" ?
That should clearly work in both.
[color=blue]
> But that won't work in Mozilla. The standard way to do that, which
> will work in either browser, is:
> getElementById( "xxx").value="s omethingorother ";[/color]

What about form fields that share the same name?
Since ids must be unique, this approach won't work.

--
Matt Kruse
Javascript Toolbox: http://www.mattkruse.com/javascript/

[Randy Webb]

Re: Javascript Differences in Browsers

Matt Kruse wrote:[color=blue]
> Tim Slattery wrote:
>[color=green]
>><input type="text" name="xxx" id="xxx">
>>You can assign it a value in IE by coding
>>xxx.value="so methingorother" ;[/color]
>
>
> Don't you mean document.forms[0]["xxx"].value = "something" ?[/color]

Only if its the first form on the page.

document.forms['formName']['elementNAME'].value = "something" ;

I am not going to profess to be able to read Tim's mind, but I think I
can reasonably assume he meant exactly what he typed, since he
explicitly says "in IE" and then goes on to say "But that won't work in
Mozilla". Because xxx.value is an IE shortcut.

[color=blue]
> That should clearly work in both.
>[color=green]
>>But that won't work in Mozilla. The standard way to do that, which
>>will work in either browser, is:
>>getElementByI d("xxx").value= "somethingoroth er";[/color]
>
>
> What about form fields that share the same name?
> Since ids must be unique, this approach won't work.[/color]

Nor does the forms notation work when inputs share the same name
attribute, not even in IE.

<form name="myForm">
<input name="myInput">
<input name="myInput">
<input name="myInput">
<input type="button"
onclick="docume nt.forms['myForm'].elements['myInput'].value='somethi ng'";
value="Guess which ones get changed">
</form>


--
Randy
Chance Favors The Prepared Mind
comp.lang.javas cript FAQ - http://jibbering.com/faq/

[DU]

Re: Javascript Differences in Browsers

Artist wrote:
[color=blue]
> Mozilla and IE works different with Javascript.[/color]

That's not really true. But they work differently regarding DOM 0, DHTML
object model and DOM 2 Events but javascript language is extremely well
supported by Mozilla 1.x and MSIE 6 for windows.
[color=blue]
> I have Javascript Code which works fine with Mozilla
> and it breaks with Internet Explorer.
>
> I like to convert my code to work with both the browser.
>[/color]

Well, without any specifics, anything concrete, no url, no chunk of
code, no browser version mentioned, I don't know exactly what you were
looking for or what you were expecting from this newsgroup.
[color=blue]
> What are the standard tools for the same?
>[/color]

Knowledge and experience. Sometimes, books and reference sites.
[color=blue]
> Is there something which is mozilla specific that I should avoid to
> have it working with internet explorer?
>
> Thanks.![/color]

Yes. Since DOM 1 attributes and methods are fairly widely supported by
Mozilla 1.x and MSIE 6 for windows, then there is no need to resort to
proprietary IE DOM.

DU

[DU]

Re: Javascript Differences in Browsers

Randy Webb wrote:
[color=blue]
> Matt Kruse wrote:
>[color=green]
>> Tim Slattery wrote:
>>[color=darkred]
>>> <input type="text" name="xxx" id="xxx">
>>> You can assign it a value in IE by coding
>>> xxx.value="some thingorother";[/color]
>>
>>
>>
>> Don't you mean document.forms[0]["xxx"].value = "something" ?[/color]
>
>
> Only if its the first form on the page.
>
> document.forms['formName']['elementNAME'].value = "something" ;
>
> I am not going to profess to be able to read Tim's mind, but I think I
> can reasonably assume he meant exactly what he typed, since he
> explicitly says "in IE" and then goes on to say "But that won't work in
> Mozilla". Because xxx.value is an IE shortcut.
>
>[color=green]
>> That should clearly work in both.
>>[color=darkred]
>>> But that won't work in Mozilla. The standard way to do that, which
>>> will work in either browser, is:
>>> getElementById( "xxx").value="s omethingorother ";[/color]
>>
>>
>>
>> What about form fields that share the same name?
>> Since ids must be unique, this approach won't work.[/color]
>
>
> Nor does the forms notation work when inputs share the same name
> attribute, not even in IE.
>
> <form name="myForm">
> <input name="myInput">
> <input name="myInput">
> <input name="myInput">
> <input type="button"
> onclick="docume nt.forms['myForm'].elements['myInput'].value='somethi ng'";
> value="Guess which ones get changed">
> </form>
>
>[/color]

A big chunk of the confusion comes from the naming scheme used. It's not
recommendable to use the same identifier for the name attribute and the
id attribute; for countless reasons, it is best to avoid doing this.

According to W3C specs, the correct W3C DOM way to access a form element
in an HTML 4.01 valid, conformant document is:

document.forms["FormName"].elements["InputName"]
or
document.getEle mentById("Input Id")

In XHTML, the same would be
document.forms[intIndex].elements["InputName"]
or
document.getEle mentById("Input Id")

DU

[Lasse Reichstein Nielsen]

Re: Javascript Differences in Browsers

DU <drunclear@hotW IPETHISmail.com > writes:
[color=blue]
> A big chunk of the confusion comes from the naming scheme used. It's
> not recommendable to use the same identifier for the name attribute
> and the id attribute; for countless reasons, it is best to avoid doing
> this.[/color]

While correct in this context, it is sadly not a general rule.

For form controls (input, textarea, etc.), param elements and
.... one more that I forgot, you should not use the same value for
the id and name attributes.
In *all* other tags, if both the id and name attribute are present,
they must be the same.
[color=blue]
> In XHTML, the same would be
> document.forms[intIndex].elements["InputName"][/color]

or
document.forms['formId'].elements['ControlName']

/L
--
Lasse Reichstein Nielsen - lrn@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleD OM.html>
'Faith without judgement merely degrades the spirit divine.'

[Java script Dude]

~~

googleartist@ya hoo.com (Artist) wrote in message news:<de3ad953. 0405211006.304a 5b6f@posting.go ogle.com>...[color=blue]
> Mozilla and IE works different with Javascript.
> I have Javascript Code which works fine with Mozilla
> and it breaks with Internet Explorer.
>
> I like to convert my code to work with both the browser.
>
> What are the standard tools for the same?
>
> Is there something which is mozilla specific that I should avoid to
> have it working with internet explorer?
>
> Thanks.![/color]

First of all, there should be no need to convert your code. If you are
doing alot of complex DOM stuff, you may need to do some simple
browser detection and flip object and proerty refs.

For the most part, IE does support most open (mozilla) standards. Here
are a couple of areas that it does differ.

Objects:
Although IE adds any HTML Element with an ID property to the
namespace to the 'all' property of 'document' object (which is a
default global reference after window I believe), the use of this
should be avoided at all costs. Instead always use
document.getEle mentById. Its the standard and will still work in IE.
The reverse is not true.

Event listeners:
In IE you cannot use ~Object~.addEve ntListener. You must directly
assign with either an inline assignment or ~object~.~event name~ =
function handler(){... or equivalent. When you use the
~object.~eventn ame~ methodology, Mozilla by default assigns the event
object as an argument. IE does not. You will need to access the method
through window.event (or just event since window is the default global
namespace)

Arrays:
Mozilla is a little more flexible. With the array:
`["one","two","th ree",]`, Moz will ignore the last element and will
return an array of len 3. IE will return an array of Len 4 with the
last element as undefined. This can cause issues where you have server
code that iteratively generates JS arrays for you.

Form Elements:
Although its a good idea to use
window.forms["formname"]["elementnam e"] since it works in both
browsers, IE has a bug where if the first character is a number it
does not recognize the element. Generally I avoid using numbers as the
first character in elements because of this bug.

Regarding Tools, I just use a text editor and set up IE to dump any
errors to the screen (tools>internet options>advance d>display a
notification about every script error). I avoid using any script
debuggers. Just good debuging code that can build stack traces will
suffice. If you overload window.error, you can read the exact stack
trace in IE by jumping up the call stack through
arguments.calle e.caller(.calle r...)

Thats all I can think of off the top of my head. If you are having any
specific issues, please post the details.

Tim

[Java script Dude]

Re: ~~

.... Oops. Fat fingered the title. Will re-post as response in proper thread.

JD

[Java script Dude]

Re: Javascript Differences in Browsers

googleartist@ya hoo.com (Artist) wrote in message news:<de3ad953. 0405211006.304a 5b6f@posting.go ogle.com>...[color=blue]
> Mozilla and IE works different with Javascript.
> I have Javascript Code which works fine with Mozilla
> and it breaks with Internet Explorer.
>
> I like to convert my code to work with both the browser.
>
> What are the standard tools for the same?
>
> Is there something which is mozilla specific that I should avoid to
> have it working with internet explorer?
>
> Thanks.![/color]

First of all, there should be no need to convert your code. If you are
doing alot of complex DOM stuff, you may need to do some simple
browser detection and flip object and property references depending on
the browser. You should always use Moz as the base and if it does not
work in IE, then use an alternate code for IE in those cases.

For the most part, IE does support most open (mozilla) standards. Here
are a couple of areas that it does differ significantly.

Objects:
Although IE adds any HTML Element with an ID property to the
namespace to the 'all' property of 'document' object (which is a
default global reference after window I believe), the use of this
should be avoided at all costs. Instead always use
document.getEle mentById. Its the standard and will still work in IE.
The reverse is not true.

Event listeners:
In IE you cannot use ~Object~.addEve ntListener. You must directly
assign with either an inline assignment or ~object~.~event name~ =
function handler(){... or equivalent. When you use the
~object.~eventn ame~ methodology, Mozilla by default assigns the event
object as an argument. IE does not. You will need to access the method
through window.event (or just event since window is the default global
namespace)

Arrays:
Mozilla is a little more flexible. With the array:
`["one","two","th ree",]`, Moz will ignore the last element and will
return an array of len 3. IE will return an array of Len 4 with the
last element as undefined. This can cause issues where you have server
code that iteratively generates JS arrays for you.

Form Elements:
Although its a good idea to use
window.forms["formname"]["elementnam e"] since it works in both
browsers, IE has a bug where if the first character is a number it
does not recognize the element. Generally I avoid using numbers as the
first character in elements because of this bug.

Regarding Tools, I just use a text editor and set up IE to dump any
errors to the screen (tools>internet options>advance d>display a
notification about every script error). I avoid using any script
debuggers. Just good debuging code that can build stack traces will
suffice. If you overload window.error, you can read the exact stack
trace in IE by jumping up the call stack through
arguments.calle e.caller(.calle r...)

Thats all I can think of off the top of my head. If you are having any
specific issues, please post the details.

Tim