SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

  2. #2
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    try
    Code:
    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
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  3. #3
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Markdidj View Post
    try
    Code:
    if (i == 0)
    {
    oEl.style.display = "visible";
    }
    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.
    Birnam wood is come to Dunsinane

  4. #4
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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....
    Code:
    <&#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
    Code:
    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

    The changeScript function can be found here.....
    http://www.sitepoint.com/forums/showthread.php?t=135179
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by rg84 View Post
    <table border="0" cellspacing="0" cellpadding="0" style="display:none" width="100&#37;" id="23">


    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.
    Birnam wood is come to Dunsinane

  7. #7
    SitePoint Member
    Join Date
    Dec 2009
    Posts
    21
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much - sometimes you can't see the wood for the trees - your help is very much appreciated!!

    Rachel


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •