Function Works in IE not Firefox

making function cross-browser compliant

[awarner20]

Hello all,

I just received some old ASP pages to update because the links and the rollover effects in the nav menu were only working in IE and not Firefox or any other browser.

I have very little experience in Javascript, but I can usually muddle through. I have been able to get the links working correctly by changing this code...

onclick="window.navigate ('http://

to this...

onclick="window.location.href= ('http://

But the onMouseOver and onMouseOut highlighting have got me stumped. Here's the code that's being used...

The Function

<script language=javascript>
function highlightButton(s) {
 if ("INPUT"==event.srcElement.tagName)
  event.srcElement.className=s
 }
</script>

The styling

<style>
.over
{cursor:hand;bORDER-TOP-WIDTH: 0px; FONT-WEIGHT: bold; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: x-small; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 124px; COLOR: white; FONT-STYLE: normal; FONT-FAMILY: Arial; LETTER-SPACING: 0px; HEIGHT: 32px; BACKGROUND-COLOR: black; BORDER-RIGHT-WIDTH: 0px; FONT-VARIANT: small-caps}
.off
{cursor:hand;bORDER-TOP-WIDTH: 0px; FONT-WEIGHT: bold; BORDER-LEFT-WIDTH: 0px; FONT-SIZE: x-small; BORDER-BOTTOM-WIDTH: 0px; WIDTH: 124px; COLOR: black; FONT-STYLE: normal; FONT-FAMILY: Arial; LETTER-SPACING: 0px; HEIGHT: 32px; BACKGROUND-COLOR: white; BORDER-RIGHT-WIDTH: 0px; FONT-VARIANT: small-caps}
</style>

...and the usage...

<td >
<INPUT class=over
onclick="window.location.href=('http://example.com/test.asp')"
onmouseover="highlightButton('off')"
onmouseout="highlightButton('over')" 
type=button height=32 width=124 value="Cross Reference" id=button1 name=button1>
</td>

Would anyone be able to point me in the right direction as to what is going on and what I may try to fix it?

Thanks for any assistance you can provide:)

[Fotiman]

If I were you, I would look at using a Framework like jQuery or YUI (Yahoo UI Library) to "attach" the event listeners rather than define event handlers like onclick, onmouseover, etc. These will be cross browser, and much cleaner than what you've got now.

[awarner20]

Thanks for the advice Fotiman. Please know that this isn't my code, I am just trying to provide a *quick and dirty* solution for a friend.

I will look into what you've suggested and see what I can learn. There doesn't seem to be any really special functionality to these menu items, so maybe using a pure CSS solution would be easier?

[awarner20]

Would anyone else have any thoughts on getting the above code to work on Firefox and Safari?

[Fotiman]

Try this:

function highlightButton(el, c) { 
  if (el.tagName == "INPUT") { 
    el.className = c; 
  } 
} 

And then change your inputs:

<input onmouseover="highlightButton(this, 'off');" ...>

[awarner20]

Fotiman,

Thank you so much, that seems to have done the trick (on Firefox, haven't tested on Safari).

Thank you, thank you!

[awarner20]

I'm hoping that I can get some additional assistance with this old code. I have everything working except for one button that has a java funtion tied to it. It works in IE, but not in Firefox.

The button code is:

<tr><td align=center><img src="buttons/btn-next.gif" onclick="findme()"></td></tr>

...and the code for the findme() function is:

function findme()
{ 
var myval
for (var i=1;i<=document.all("txt_howmany").value;i++)
{
if (i>1){myval=myval + " and "}
myval= myval + "[" + document.all("header"+i).value + "] = '" + document.all("pulldown"+i).value + "'"
}
document.all("txt_pass").value=1
document.master.action="selectfan.asp"
document.master.submit();
}

I am using the Firefox toolbar and it is displaying this error:

Non-standard document.all property was used. Use W3C standard document.getElementById() instead.

[Break on this error] undefined
selectfan.asp (line 247)
document.all("pulldown" + i) has no properties
[Break on this error] myval= myval + "[" + document.all("header"+i).value + "] = '" + document.all(...

So, following this error, I changed all the document.all instances to document.getElementById. That doesn't work. I then receive this error:

document.getElementById("txt_howmany") has no properties
findme()selectfan.asp (line 244)
onclick(click clientX=0, clientY=0)selectfan.asp (line 1)
[Break on this error] for (var i=1;i<=document.getElementById("txt_howmany").value;i++)

Can someone give me a clue on anything else I may try?

[Fotiman]

txt_howmany is probably a named input element like this:
<input name="txt_howmany" ...>

Change that to this:
<input name="txt_howmany" id="txt_howmany" ...>

You may need to do the same for "txt_pass" and "header"+i (where i is a number).

[awarner20]

Fotiman,

Thank you very much, that has helped me get past the both the txt_howmany and the header variables, but there is one more that I haven't been able to get past so far. In this function:

<script language=javascript>
function findme()
{ 
var myval
for (var i=1;i<=document.getElementById("txt_howmany").value;i++)
{
if (i>1){myval=myval + " and "}
myval= myval + "[" + document.getElementById("header"+i).value + "] = '" + document.getElementById("pulldown"+i).value + "'"
}
document.getElementById("txt_pass").value=1
document.master.action="selectfan.asp"
document.master.submit();
}
</script>

The pulldown variable is differnt from the others. The other two were attached to input elements like this:

<input type=hidden name=txt_howmany id=txt_howmany value=<%=myclass_counter%>>
<input type=hidden name=txt_pass id=txt_pass value=<%=Request.Form("txt_pass")%>>

...and you can see that I have added the id as you suggested. When submitting the page, I was able to move past these two, but the third, the "pulldown" is different. It's being named in a select element like this:

myselectstring=myselectstring & "<td align=center><select name=Pulldown"&myclass_counter&">"
myselectstring=myselectstring & "<option value='NONE'>-Make Selection-</option>"

I added the id here, but it didn't make a difference. I tried this...

"<td align=center><select name=Pulldown id=Pulldown"&myclass_counter&">"

...and this...

"<td align=center><select name=Pulldown"&myclass_counter&" id=Pulldown"&myclass_counter&">"

...but neither worked as expected.

I'd be grateful if you had any further thoughts with the information I've given.

[Fotiman]

You are missing a space after the id value. You have this:
id=Pulldown"&myclass_counter&"

Should be this:

id=Pulldown "&myclass_counter&"

[awarner20]

Whoops, sorry stupid mistake:( However, putting the space in the right spot caused a different error. This time it seems to be specific to Firefox.

[Exception... "Component is not available" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" location: "JS frame :: file:///C:/Program%20Files/Mozilla%20Firefox/components/nsSessionStore.js :: sss_saveState :: line 1753" data: no]
[Break on this error] oState.session = { state: ((this._loadState == STATE_RUNNING) ? STATE_RUNNIN...

Maybe it's time for me to give it up?

[Fotiman]

I don't think that error is related to what you're trying to do.

[vincevincevince]

Try to use " " around your all your attributes - and mistakes like the above won't happen as much; it is not strictly required in all cases but it is never wrong!

[awarner20]

@ Fotiman,

That error above only appears when I add the id value, and it is in addition to the previous error of

document.getElementById("pulldown" + i) has no properties

When I remove the id value from "Pulldown", then I am back to just the above error.

@ vincevinvevince,

I agree, the " " need to be around all of the attributes. However, this is currently working in IE, and the previous attributes that I've added an ID to are now working in Firefox. I can certainly go in and correct all the attributes' "", but I'm not sure that will get me further with getting past this last one.

...not trying to make excuses, just trying to get this outdated code in a working state in the least amount of time.

[Fotiman]

The error you're are seeing is likely a problem with your Firefox session. Try closing all open Firefox windows, reopen, and navigate to your page (don't use the restore session feature). Do you still get the error?

[awarner20]

Yep, that helped, thanks.

Still not working in FF. I wish I could get this figured out:(

[Fotiman]

Are you saying you don't see any errors in JavaScript, but that you're not seeing the desired behavior either?

[awarner20]

No, I'm saying that the Firefox specific error is gone, but the Javascript error remains...

document.getElementById("pulldown" + i) has no properties

...and that the desired behavior is still not working. If there is any further information I can provide to help troubleshoot better, please let me know.

I have been working on this locally, but it will soon be up on a public server, so maybe that visibility will help. I will post back when it's public

[Fotiman]

Note, public URLs are not permitted. It's preferred that you post a code example.

Do you have elements on your page that have id values of pulldown1, pulldown2, and so on?

[awarner20]

Duly noted.

I have run a search on the directory containing all the files and the only references to "Pulldown" are all on the same page. Once in the function and then once further down the same page...

<script language=javascript>
function findme()
{
var myval
for (var i=1;i<=document.getElementById("txt_howmany").value;i++)
{
if (i>1){myval=myval + " and "}
myval= myval + "[" + document.getElementById("header"+i).value + "] = '" + document.getElementById("pulldown"+i).value + "'"
}

document.getElementById("txt_pass").value=1
document.master.action="selectfan.asp"
document.master.submit();

}

</script>

and then further down the page...

while not rs_classes.EOF
myheaderstring=myheaderstring &"<td class= blueheader align=center>" & rs_classes("class") & "</td>"
myclass_counter=myclass_counter+1
%><input type=hidden name=header id=header<%=myclass_counter%> value='<%=rs_classes("class")%>'>
<%

myselectstring=myselectstring & "<td align=center><select name=Pulldown" &myclass_counter&" id=Pulldown" &myclass_counter&">"
myselectstring=myselectstring & "<option value='NONE'>-Make Selection-</option>"
StrSql = "SELECT description FROM selectionMatrix where class = '" & rs_classes("class") & "'"
Set my_classes = Server.CreateObject("ADODB.Recordset")
my_classes.Open strSQL, FScon
my_classes.movefirst
while not my_classes.eOF
myselectstring=myselectstring & "<option value='" & my_classes("description") & "'>" & my_classes("description") & "</option>"
my_classes.MoveNext
wend
myselectstring=myselectstring & "</select></td>"
rs_classes.MoveNext
wend

[Fotiman]

JavaScript is case sensitive. You're referencing it with a lowercase "p" in your script, but you've given it an uppercase "P" in your HTML.

[awarner20]

@ Fotiman,

Thank you for sticking with me on this, I really appreciate it! It is now working in FF.

The code I posted was how is was written by the original programmer, but the addition of the id and the matching of the cases, that seems to have solved the issue.

Again, my warmest thanks for your help on this, I will "pay it forward" as I am able.