JavaScript Error in FireFox

[Cy]

Hi, I have a menu that toggles correctly in IE but is failing in
FireFox V.1 and Netscape 7.1. The FireFox JavaScript Console is
returning the following error; Error: document.getEle mentById(showDi v)
has no properties.

Any advice would be much appreciated. Here is the snippet of applicable
code;


<script language="javas cript">

function toggleDiv( showDiv, hideDiv, showTab)
{
document.getEle mentById(showDi v).style.displa y = '';
document.getEle mentById(hideDi v).style.displa y = 'none';
document.getEle mentById("newsT D").backgrou nd =
'/Images/Banner/240_t_tab_' + showTab + '.gif'
}

function openWindow(file name, name, width, height)
{
windowops =
eval("'toolbar= no,location=no, directories=no, status=no,menub ar=no,scrollbar s=no,resizable= no,width="
+ width + ",height=" + height + "'");
var newWindow = window.open(fil ename, name, windowops);
newWindow.focus ();
newWindow = '';
return;
}
</script>
<div align="center">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<!-- News listing -->
<td rowspan="2" align="right" valign="top" width="253"><br >
<table border="0" cellpadding="0" cellspacing="0"
width="240">
<tr>
<td align="center">
<%= w3ss.putField(" addBannerLink2" ) %><br>
<%= w3ss.putField(" catalogLink") %> <br>
</td>
</tr>
<tr>
<td id="newsTD"
background="/Images/Banner/240_t_tab_1.gif " width="100%" height="17">
<table border="0" cellpadding="0" cellspacing="0"
width="100%">
<tr>
<td width="120" style="cursor:h and;"
onclick="javasc ript:toggleDiv( 'memberNews', 'intheNews', '1' );"><img
border="0" src="/Images/Banner/1x1_transp.gif" width="5"
height="1"><spa n class="menuTab" ><%= w3ss.putField(" newsCaption")
%></span</td>
<td width="120" style="cursor:h and;"
onclick="javasc ript:toggleDiv( 'intheNews', 'memberNews', '2' );"><img
border="0" src="/Images/Banner/1x1_transp.gif" width="5"
height="1"><spa n class="menuTab" ><%= w3ss.putField(" inthenewsCaptio n")
%></span></td>
</tr>
</table>
</td>
</tr>
<tr>
<td width="100%"
background="/Images/Banner/240_m_tab.gif"> <ul>
<div id="membernews " class="ingress" >
<br>
<%=
ficpa.renderNew sList(Document. Fields("memberN ewsFolders"), "title", "",
"", false, Document.Fields ("maxMemNewsIte m"), "publishTim e", false ) %>
<br>
<img src=/images/banner/bul.gif
border=0>&nbsp; &nbsp;<a href="<%=ficpa. siteURL()%>Top_ Stories">Recent
top stories</a>

</div>
<div id="inthenews" style="display: none;"
class="ingress" >
<br>

[Martin Bialasinski]

Re: JavaScript Error in FireFox

"Cy" <webcyrus@gmail .com> wrote:
[color=blue]
> onclick="javasc ript:toggleDiv( 'memberNews', 'intheNews', '1' );"><img[/color]
[color=blue]
> <div id="membernews " class="ingress" >[/color]

id is case-sensitive.

[Michael Winter]

Re: JavaScript Error in FireFox

On 8 Dec 2004 14:54:20 -0800, Cy <webcyrus@gmail .com> wrote:
[color=blue]
> Hi, I have a menu that toggles correctly in IE [...][/color]

It shouldn't.
[color=blue]
> The FireFox JavaScript Console is returning the following error; Error:
> document.getEle mentById(showDi v) has no properties.[/color]

The value of an id attribute should be treated as case-sensitive. When you
call the script, you're looking for 'memberNews' and 'intheNews', however
the actual ids are 'membernews' and 'inthenews'. Change one or the other.

[snip]

Some other comments...
[color=blue]
> <script language="javas cript">[/color]

The language attribute has been deprecated for over six years. Use the
type attribute instead:

<script type="text/javascript">
[color=blue]
> function toggleDiv( showDiv, hideDiv, showTab)
> {
> document.getEle mentById(showDi v).style.displa y = '';
> document.getEle mentById(hideDi v).style.displa y = 'none';[/color]

You should test for browser support before use DOM properties and methods.
One simple alternative is:

if(!document.ge tElementById) {
document.getEle mentById = function() {return null;};
}

function setStyle(elemen t, property, value) {
element = document.getEle mentById(elemen t);
if(element.styl e) {element.style[property] = value;}
}

then:

setStyle(showDi v, 'display', '');
setStyle(hideDi v, 'display', 'none');
[color=blue]
> document.getEle mentById("newsT D").backgrou nd[/color]

The background property/attribute is deprecated, as is much of the mark-up
you've shown in this post. All modern documents on the Web should written
to the Strict DTD. Transitional HTML was only meant to be used for a
limited time, and that time has passed (in my opinion, at least).
[color=blue]
> = '/Images/Banner/240_t_tab_' + showTab + '.gif'
> }[/color]

The same effect could be achieved with:

setStyle('newsT D', 'backgroundImag e',
'url(/Images/Banner/240_t_tab_' + showTab + '.gif)');
[color=blue]
> function openWindow(file name, name, width, height)[/color]

Opening new windows is becoming a very bad idea on the Web. There are many
pop-up blockers that do not discriminate between requested and unrequested
pop-ups, and many users dislike them either way.
[color=blue]
> {
> windowops = eval("'toolbar= no,location=no, directories=no, status=no,'
> + menubar=no,scro llbars=no,resiz able=no,width=" + width
> + ",height=" + height + "'");[/color]

The eval call isn't needed. The feature string could also be *much*
shorter. However, removing window chrome - particularly the scrollbars and
status bar - and attempting to prevent resizing is a bad idea. At a
minimum, it should be:

var features = 'status,scrollb ars,resizable,w idth=' + width
+ ',height=' + height;

Unspecified features (with a couple of exceptions) will be disabled by
default.
[color=blue]
> var newWindow = window.open(fil ename, name, windowops);
> newWindow.focus ();
> newWindow = '';[/color]

That's unnecessary: when the function returns, local variables are
destroyed[1].
[color=blue]
> return;[/color]

That's unnecessary, too.

[snip]
[color=blue]
> <%= w3ss.putField(" addBannerLink2" ) %><br>
> <%= w3ss.putField(" catalogLink") %> <br>[/color]

There's not really much point including server-side code unless you have a
Javascript-related question about it.

[snip]
[color=blue]
> <td width="120" style="cursor:h and;"[/color]

The correct property value is 'pointer'.
[color=blue]
> onclick="javasc ript:toggleDiv( 'memberNews', 'intheNews', '1' );">[/color]

The majority of user agents will just see javascript: as a label. Unless
you're also using client-side VBScript (which is a bad idea, anyway), even
IE will ignore it.

[snip]

Mike


[1] Unless a closure is involved, which it isn't.

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