www.webdeveloper.com
Results 1 to 12 of 12

Thread: browser compatability

  1. #1
    Join Date
    Apr 2004
    Posts
    23

    Question browser compatability

    I have just used the validator to help me correct my code, and it still works perfectly in Internet Explorer (version 6.0).

    However, when I attempt to test it with the only other browser I have (Netscape 4.0) it fails with the following error.
    Code:
    JavaScript Error: file:/D|/Data/DND3/ELcalcXP.htm, line 296:
    
    myform is not defined.
    When I press the "Calculate" button I get another error.
    Code:
    JavaScript Error: file:/D|/Data/DND3/ELcalcXP.htm, line 155:
    
    document.getElementById is not a function.
    Any suggestions on how I can make my code multi-browser compatable, and how to test it in multiple browsers - without actually acquiring and installing all the various browsers available.

    PS: I used my local version when testing it in Netscape, because it had problems staying on the same page when I tried to reference the web version. It attempts to redirect to "http://www.geocities.com/tierast/encounter_calculator/style2.css" which doesn't exist.
    Last edited by Tiera; 04-22-2004 at 09:36 PM.

  2. #2
    Join Date
    Nov 2002
    Location
    Auburn, AL
    Posts
    9,224

    Re: browser compatability

    Originally posted by Tiera
    I have just used the validator to help me correct my code, and it still works perfectly in Internet Explorer (version 6.0).

    However, when I attempt to test it with the only other browser I have (Netscape 4.0) it fails with the following error.
    Code:
    JavaScript Error: file:/D|/Data/DND3/ELcalcXP.htm, line 296:
    
    myform is not defined.
    When I press the "Calculate" button I get another error.
    Code:
    JavaScript Error: file:/D|/Data/DND3/ELcalcXP.htm, line 155:
    
    document.getElementById is not a function.
    Any suggestions on how I can make my code multi-browser compatable, and how to test it in multiple browsers - without actually acquiring and installing all the various browsers available.
    suck it up, its just something you are going to have to do. I have IE6 IE5.5 IE5 mozilla/netscape opera and lynx running on this pc to test with.

  3. #3
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Refer to forms as document.myform.whatever
    Give your form a name as well as an id

    As PeOfEo wrote: go and download those browsers.

  4. #4
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    You can use all the world's validators and you will not be able to force NS4 or IE4 to recognize some new references as getElementById or new tags as <iframe>.

    Some old browsers simply DO NOT have implemented those methods or tags...

    There are some cross-browser solutions to solve that incommpatibilities but there are most of the time a flexible job, according to the neeeds.

  5. #5
    Join Date
    Apr 2004
    Posts
    23

    Which begs the question ...

    Which browsers should we aim to make our web pages compliant with? Are IE4 and Netscape 4 sufficiently old that they are longer used, or are there people out there that have been running them for the past five years and never upgraded?

    If we expect people to still be using them, then the second question is: is there some alternative I can use to getElementbyID other than manually referencing each element verbosely.

    A possible solution that I can think of is to declare a global array variable, and point it to the form fields in question, then I can iterate though the fields as desired. I will try that tomorrow night if I can manage it.

    PS: In my local copy, I added name="myform" to the <form> tag, but still got the same error. (Since it didn't work I didn't copy it to the web version.) I am guessing it is because the form tag appears after the body tag. Any suggestion here? *looks hopeful*

    Edit: I suppose I should borrow my husband's PDA to check compatability with that also.

  6. #6
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Browsers' compatibility is a long story... I'll try to be short.

    Due mainly to the Microsoft vs Netscape long war, their browsers (which were and still are the most used) there are noticeble differences, especially on old versions, on object reference, some methods, some attributes.

    Maybe the most important is the object reference, thus if solving this, the code can be almost full cross-browsers. From this point of view, there are 3 main groups:

    1. document.getElementById(id) - used by IE5+, NS6+, Moz 1.4+, Opera 5.+
    2. document.all[id] - used by IE4
    3. document.layers[id] - used by NS4

    Thus, to retrieve the value of an attribute (if any) of an element(object) the easiest way is to use an if statement as a variant detector:

    if(document.getElementById){
    val = document.getElementById(id).attriubute;
    }
    else if(document.all){
    val = document.all[id].attriubute;
    }
    else if(document.layers){
    val = document.layers[id].attriubute;
    }

    Note the different brackets, rounded or square.

    Well, in day-by-day coding things are often more intricate... For instance, NS4 does not work with style as property, but gives directly the attribute after the object's refenece. Note the differeneces:

    document.getElementById(id).style.top
    document.all[id].style.top
    document.layers[id].top

    When dealing with form's elements, things can be more simple if working with name instead of id. The basic referece, full-cross browsers is unique:

    document.forms[name_or_order].elements[name_or_order].attribute

    Now... When building a web page you must think of the purpose and the target of that page. If all your clients may have new browsers and are a narrow target, don't bother to build intricate cross-browsers solution. If aim is general targeting or many clients still work with older browsers, do it.

    OK... In this moment can you show us your code to be able to find out a cross-browsers solution for you?

  7. #7
    Join Date
    Jan 2004
    Location
    Alabama, United States
    Posts
    836
    Which browsers should we aim to make our web pages compliant with?
    As many as we can. Fortunately, coding to standards compliant methods with a little code to get around IE's "interpretaton" of things will work in most browsers

    I suppose I should borrow my husband's PDA to check compatability with that also.
    This may be a bit more difficult than you think. Most handheld browser versions are "strip downs" of older versions. It is rare that these browsers support even CSS, lol.

    is there some alternative I can use to getElementbyID other than manually referencing each element verbosely.
    Be sure that the methods used aren't IE Proprietary (belong to and only vork vith IE). Your telling us that this code only works in IE tells me they probably are.

    I dont code much with JS, but I do know that M$ tends to make changes to proven technologies (i.e. Color Scrolls [CSS]). My advice is to just make sure that you are not using "IE Only" methods

  8. #8
    Join Date
    Nov 2002
    Location
    Auburn, AL
    Posts
    9,224
    Originally posted by Kor
    You can use all the world's validators and you will not be able to force NS4 or IE4 to recognize some new references as getElementById or new tags as <iframe>.

    Some old browsers simply DO NOT have implemented those methods or tags...

    There are some cross-browser solutions to solve that incommpatibilities but there are most of the time a flexible job, according to the neeeds.
    some older browsers od not support js at all... best solution is to not realy on js but limit it to nonessential effects, such as aesthetics.

  9. #9
    Join Date
    Apr 2004
    Posts
    23
    Thank you for your informative responses above.

    Kor Thus, to retrieve the value of an attribute (if any) of an element(object) the easiest way is to use an if statement as a variant detector:

    if(document.getElementById){
    val = document.getElementById(id).attriubute;
    }
    else if(document.all){
    val = document.all[id].attriubute;
    }
    else if(document.layers){
    val = document.layers[id].attriubute;
    }

    Note the different brackets, rounded or square.
    Okay. Actually I am retrieving the element so that I can read the "value" attribute, and write back to it to ensure that if the code misreads the value, the user can see what value is used in the calculations.

    I have tried to use the code you provided above as follows:

    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <
    html>
    <
    head>
       <
    meta HTTP-EQUIV="Content-Type" CONTENT="text/html;CHARSET=iso-8859-1">
    <
    meta http-equiv=Content-Language content=en-us>
    <
    meta http-equiv=Content-Type content="text/html; charset=windows-1252">

    <
    script type="text/javascript">
    ...
       function 
    mFormFieldpID )
       {
          if(
    document.getElementById){ 
             return 
    document.getElementById(pID); 
          } else if(
    document.all){ 
             return 
    document.all[pID]; 
          } else if(
    document.layers){ 
             return 
    document.layers[pID]; 
          } 
       }

       function 
    mCalculate()
       {
          var 
    iFormField;
          var 
    i;
          var 
    iPtyQty = new Array( 000000);

          for( 
    i=1i<7i++ )
          {
             
    iFormField mFormField("txtPty"+i+"Qty"); // Num
             
    iPtyQty[i] = parseInt(iFormField.value); // line 168
             
    if( iPtyQty[i] == )
             {
                
    iFormField.value 0// Write zero back to form field quantity
                
    iPtyECL[i] = 0// ECL irrelevant
             
    }
             else if( 
    iPtyQty[i] > )
             {
                
    iFormField.value iPtyQty[i]; // Write value back to form field quantity
             
    } else {
                
    iFormField.value ""iPtyQty[i] = 0;
             }
    ...
          
    myform.txtPty1Qty.focus();
          return 
    true;
       }

    </script>
    <link rel="stylesheet" type="text/css" href="encounter_calculator/style2.css">
       <title>Encounter Calculator</title>
    </head>

    <body onload="myform.txtPty1Qty.focus()"> // line 307

    <form method="POST" enctype="application/x-www-form-urlencoded" id="myform" name="myform" action="">
    <INPUT tabindex="1" size="3" value="" id="txtPty1Qty" name="txtPty1Qty">
    <INPUT tabindex="3" size="3" value="" id="txtPty1Qty" name="txtPty2Qty">
    ...
    <INPUT tabindex="11" size="3" value="" id="txtPty1Qty" name="txtPty6Qty">
    ...
    <INPUT onclick="javascript:mCalculate()" type=button value=Calculate name=cmdCalculate>
    </form>

    </body>

    </html> 
    I think I've included all the important pieces of code above. This still works using IE6, but still fails under NS4. When I load the page into NS4, I get the following error.
    Code:
    JavaScript Error: file:/D|/Data/DND3/el_calc_xp.htm, line 307:
    
    myform is not defined.
    After pressing the calculate button I get the following error
    Code:
    JavaScript Error: file:/D|/Data/DND3/el_calc_xp.htm, line 168:
    
    iFormField has no properties.
    I have labelled those two lines above with comments (// line 307 and // line 168 respectively) in the code snippet above.

    ===================

    When dealing with form's elements, things can be more simple if working with name instead of id. The basic referece, full-cross browsers is unique:

    document.forms[name_or_order].elements[name_or_order].attribute

    okay, I've replaced all instances of "myform." with "document.forms[0]." in the above code, and that solves the first NS4 error (upon loading complaigning about line 307). http://boards1.wizards.com/images/smilies/ThumbUp.gif

    ================

    OK... In this moment can you show us your code to be able to find out a cross-browsers solution for you? [/B]
    It is linked to the word code in my first message, the url is http://www.geocities.com/tierast/el_calc_xp.html .

    Also, another error is that when I try at look at that version using NS4, it automatically redirects to http://www.geocities.com/tierast/enc...tor/style2.css which doesn't exist. http://boards1.wizards.com/images/smilies/ThumbUp.gif Thus all my NS4 testing is done on my local copy. (Could this be a problem with geocities?)

    PeOfEo: some older browsers od not support js at all... best solution is to not realy on js but limit it to nonessential effects, such as aesthetics.
    Well, the whole point of this webpage is to take some data from the user and calculate some values for them, so I believe some sort of script language is required - and guessed JavaScript would be the simplist option.

    ====================

    PS: If anyone wishes to test this page, place values in at least one row on the party side and at least one row on the monsters side, then press calculate. This should then provide answers in all the green boxes, the darker red and and darker blue boxes, and the pale red and pale blue boxes that correspond to completed rows in the party side.
    Last edited by Tiera; 04-24-2004 at 03:53 AM.

  10. #10
    Join Date
    Apr 2004
    Posts
    23
    PHP Code:
    <INPUT onclick="javascript:mCalculate()" type=button value=Calculate name=cmdCalculate
    Odd, there is no space in the word javascript above, I don't know why it is displaying a space.

  11. #11
    Join Date
    Nov 2002
    Location
    Auburn, AL
    Posts
    9,224
    yes, a some scripting would be required, but if you want it to work for everyone server side would be the way to go, you do not have to worrie about compadability when the server is running the script. But I do realize it might not be an option for everyone to use a server side script.
    The forum breaks it up into two words as some sort of security.

  12. #12
    Join Date
    Apr 2004
    Posts
    23

    IE3.2 ?

    Tiera: I suppose I should borrow my husband's PDA to check compatability with that also.
    PhillMc: This may be a bit more difficult than you think. Most handheld browser versions are "strip downs" of older versions. It is rare that these browsers support even CSS, lol.
    I just checked it and geocities stats lists it as IE3.2, yikes! Oh, and it doesn't even get the taborder right.

    Still looking for any hints with my NS4 compatability problem - or should I take this to the JavaScript forum?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles