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.getElementById(showDiv)
has no properties.

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


<script language="javascript">

function toggleDiv( showDiv, hideDiv, showTab)
{
document.getElementById(showDiv).style.display = '';
document.getElementById(hideDiv).style.display = 'none';
document.getElementById("newsTD").background =
'/Images/Banner/240_t_tab_' + showTab + '.gif'
}

function openWindow(filename, name, width, height)
{
windowops =
eval("'toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no,width="
+ width + ",height=" + height + "'");
var newWindow = window.open(filename, 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:hand;"
onclick="javascript:toggleDiv( 'memberNews', 'intheNews', '1' );"><img
border="0" src="/Images/Banner/1x1_transp.gif" width="5"
height="1"><span class="menuTab"><%= w3ss.putField("newsCaption")
%></span</td>
<td width="120" style="cursor:hand;"
onclick="javascript:toggleDiv( 'intheNews', 'memberNews', '2' );"><img
border="0" src="/Images/Banner/1x1_transp.gif" width="5"
height="1"><span class="menuTab"><%= w3ss.putField("inthenewsCaption")
%></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.renderNewsList(Document.Fields("memberNewsFolders"), "title", "",
"", false, Document.Fields("maxMemNewsItem"), "publishTime", 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]

onclick="javascript:toggleDiv( 'memberNews', 'intheNews', '1' );"><img

<div id="membernews" class="ingress">

id is case-sensitive.

 

[Michael Winter]

Hi, I have a menu that toggles correctly in IE [...]

It shouldn't.

The FireFox JavaScript Console is returning the following error; Error:
document.getElementById(showDiv) has no properties.

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...

<script language="javascript">

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

function toggleDiv( showDiv, hideDiv, showTab)
{
document.getElementById(showDiv).style.display = '';
document.getElementById(hideDiv).style.display = 'none';

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

if(!document.getElementById) {
document.getElementById = function() {return null;};
}

function setStyle(element, property, value) {
element = document.getElementById(element);
if(element.style) {element.style[property] = value;}
}

then:

setStyle(showDiv, 'display', '');
setStyle(hideDiv, 'display', 'none');

document.getElementById("newsTD").background

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).

= '/Images/Banner/240_t_tab_' + showTab + '.gif'
}

The same effect could be achieved with:

setStyle('newsTD', 'backgroundImage',
'url(/Images/Banner/240_t_tab_' + showTab + '.gif)');

function openWindow(filename, name, width, height)

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.

{
windowops = eval("'toolbar=no,location=no,directories=no,status=no,'
+ menubar=no,scrollbars=no,resizable=no,width=" + width
+ ",height=" + height + "'");

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,scrollbars,resizable,width=' + width
+ ',height=' + height;

Unspecified features (with a couple of exceptions) will be disabled by
default.

var newWindow = window.open(filename, name, windowops);
newWindow.focus();
newWindow = '';

That's unnecessary: when the function returns, local variables are
destroyed[1].

return;

That's unnecessary, too.

[snip]

<%= w3ss.putField("addBannerLink2") %><br>
<%= w3ss.putField("catalogLink") %> <br>

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

[snip]

<td width="120" style="cursor:hand;"

The correct property value is 'pointer'.

onclick="javascript:toggleDiv( 'memberNews', 'intheNews', '1' );">

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.

 

[Cy]

Thanks Martin! I can't believe I missed that. I made the change and
it's working now.

 

[Cy]

Thanks for all the useful advice Michael. I'm in the process of
updating these scripts to be more compliant and the info you posted
here will help me a lot in that process. Thanks again.