Cross Browser JavaScript Issue

Hi

The code below is a show/hide program - it works in in IE but for my collegues with a MAC & FF it doesn’t work, can anybody help? I never authored this code and could do it with jQuery easily but that would mean changing the page which at the moment i don’t really have time- any point in the right direction would be great:

ShowFirstHideRest = function()
{

for (var i = 0; i < arguments.length; ++i)
{

    var oEl = document.all.item(arguments[i]);

    if (oEl != null)
    {

        if (i == 0)
        {
            oEl.style.display = "";
        }
        else if (!(oEl.id == arguments[0]))
        {
            oEl.style.display = "none";
        }
    }
}

}

Rachel

Thanks so much - sometimes you can’t see the wood for the trees - your help is very much appreciated!!

Rachel

Thanks so much for your help and speedy response, I know we’re almost there but it still isn’t working. We build the select list on the fly from a users input (basically the script is used in a content management screen), the selects options relate to a table of inputs which have the ID of the number in the select box, in this case the code in the table is when V2 Cash is selected…

<select name=“in_offer_typ_ref” id=“in_offer_typ_ref” onChange=“javascript:ShowFirstHideRest(this.options[this.selectedIndex].value,‘27’,‘23’,‘26’,‘25’,‘24’);”>
<option value=“23”>V2 Cash</option>
<option value=“24” selected>V2 Cash Price Only</option>
<option value=“25”>V2 Finance</option>
<option value=“26”>V2 Finance without table</option>
<option value=“27”>V2 Motability</option>
</select>

<table border=“0” cellspacing=“0” cellpadding=“0” style=“display:none” width=“100%” id=“23”>
<tr><td colspan=“2” class=“title”>V2 Cash</td></tr>
<tr height=“9”>
<td class=“box_top_left” width=“9”></td>
<td class=“box_top”></td>
<td class=“box_top_right” width=“9”></td>
</tr>
<tr>
<td class=“box_left”></td>
<td class=“box_txt” valign=“top”>
<table border=“0”><tr><td>Label</td><td>Label Override</td><td>Value</td></tr>
<tr><td>Retail Price:</td><td><input type=“text” size=“40” name=“in_lbl_23_1” value=“” /></td><td><input type=“text” size=“40” name=“in_attrib_23_1” value=“£15000” /></td><td>£</td></tr>
<tr><td>Save:</td><td><input type=“text” size=“40” name=“in_lbl_23_2” value=“” /></td><td><input type=“text” size=“40” name=“in_attrib_23_2” value=“From Only” /></td><td>£</td></tr>
<tr><td>Our Price:</td><td><input type=“text” size=“40” name=“in_lbl_23_3” value=“” /></td><td><input type=“text” size=“40” name=“in_attrib_23_3” value=“” /></td><td>£</td></tr>
<tr><td>Additional Text</td><td><input type=“text” size=“40” name=“in_lbl_23_4” value=“” /></td><td><input type=“text” size=“40” name=“in_attrib_23_4” value=“Extra Text” /></td><td>Free text</td></tr>
<tr><td>Additional Text Detail</td><td><input type=“text” size=“40” name=“in_lbl_23_5” value=“” /></td><td><input type=“text” size=“40” name=“in_attrib_23_5” value=“” /></td><td>Free text</td></tr>
</table>

Is there anything else you can see that I am missing?

Rachel

try

if (i == 0)
{
oEl.style.display = "visible";
}

Can I add that it’s not such a good idea to do this kind of thing with just relying on javascript.
The way I like to do it is either using asynchronous javascript (Ajax without the XML) or preferably by using a scrollable div with the scrollbar hidden by the area’s container.
This method allows <a href=“#area_1”> to show area_1 and <a href=“#area_2”> to show area_2

No, don’t. The value visible is not valid for the display property (it is for the visibility property, but that’s something else). Setting it to an empty string is the right thing to do, since that effectively undoes the preceding display:none declaration.

The document.all thing isn’t good practice, though. It’s an IE-proprietary property, although other browsers now support it after some fashion. It would be better to use document.getElementById() if the arguments supplied are identifiers. If you’re using name attribute values that won’t work (outside IE) though.

I should explain how my version of asychronous javascript will make this work. I’m not sure if you will understand but I made a statement above that some will question. It’s in classic asp.
The menu and container for the interactive area…

<&#37;
 
live=int(request.queryString("live"))
 
if live=1 then
    response.contentType="text/javascript"
end if
 
function write(s)
    if live=1 then
        response.write replace(replace(s,"""","\\"""),vbcrlf,"")
    else
        response.write s
    end if
end function
 
'----write the html for the menu if live doesn't equal 1
 
if live<>1 then
    for i=0 to 4
        response.write "<a href=""index.asp?show_subject=subject_" & i & """ title=""subject_" & i & """>Subject " & i & "</a>" & vbcrlf
    next
end if
 
'----if live use javascript, else use html
 
if live=1 then
    response.write "document.getElementById(""container"").innerHTML="""
else
    response.write "<div id=""container"">" & vbcrlf
end if
 
subject=request.querystring("subject")
 
'----verbose----'
'----get html for requested subject and assign to var subject
' ----this will depend on whether you use text files or databases to store html
 
'----output subject depending on live using the write function above----'
 
write subject
 
'----close html or javascript
 
if live=1 then
    respsonse.write """;"
else
    response.write "</div>" & vbcrlf
end if
 
%>

If I were to click a link when javascript was turned off, it will just output the html for subject in the container. If I used this piece of javascript, it will output subject as javascript, straight into the container, live

for(i=0;i<4;i++){
    document.getElementsByTagName("a")[i].onclick=function(){
        changeScript(this.href+"&live=1");
        return false;
    }
}

This method can be used on forms as well :slight_smile:

The changeScript function can be found here…

That is invalid HTML. An ID is not allowed to begin with a digit; it must begin with an English letter (A-Z or a-z) or an underscore (‘_’).

That might very well be why non-IE browser balk at it.