jQuery script working on firefox and chrome but is not picked up on ie 10

Question

The following code is the head section of the html form that is not being properly picked up by IE 10. The jQuery simply ignored by IE10 and the whole form is shown even though it is explicitly instructed in the jQuery code that it should not. This code works perfectly under firefox/chrome/IE9/Safari. It's just IE10 that is causing the issue. Many thanks

<!DOCTYPE html>
<html lang="en">
<head>
    <title>company</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/style.css" type="text/css">   
    <script src="js/jquery-1.6.4.min.js" type="text/javascript"></script>
    <script src="js/script.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            /*Hiding the form */
            $(".1").css("display", "none");
            $(".2").css("display", "none");
            $(".3").css("display", "none");
            $(".4").css("display", "none");

            function goToByScroll(id){
                $('html,body').animate({scrollTop: $("#"+id).offset().top},'bottom');
            }

            $("input:radio[name=query-form][disabled=false]:last").attr('checked', true);

            $("input:radio[name=query-form]").click(function () {
                $(".1").css("display", "none");
                $(".2").css("display", "none");
                $(".3").css("display", "none");
                $(".4").css("display", "none");

                $("#country").click(function() {
                    $("html, body").animate({ scrollTop: $(document).height() }, "slow");
                    return false;
                });

                goToByScroll("country");
                if ($("#option1").is(":checked")) 
                    $(".1").show("fast");
                else if ($("#option2").is(":checked")) 
                    $(".2").show("fast");
                else if ($("#option3").is(":checked")) 
                    $(".3").show("fast");
                else if ($("#option4").is(":checked")) 
                    $(".4").show("fast");

            });
        });     
    </script>

    <!--[if lt IE 8]> 
        <div style='clear:both; text-align:center; position:relative;'><a href="http://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode"><img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" alt="" /></a></div>  
    <![endif]-->
    <!--[if lt IE 9]>
        <script type="text/javascript" src="js/html5.js"></script>
        <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen">   
    <![endif]-->
</head>

WE SOLVED THE ISSUE WITH THIS PREVIOUS CODE, NOW could you please tell me why this following code isn't working in IE10. This is very similar to the above, however, this time we're dealing with drop down menus. Again this code perfectly find in all other browsers. IE10 seem to be really pedantic.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Company</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/style.css" type="text/css">   
    <script src="js/jquery-1.6.4.min.js" type="text/javascript"></script>
    <script src="js/script.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            /*Hiding the form */
            $(".install_download").css("display", "none");
            $(".hosted_install").css("display", "none");
            $(".reseller_install").css("display", "none");

            function goToByScroll(id){
                $('html,body').animate({scrollTop: $("#"+id).offset().top},'bottom');
            }

                goToByScroll("country");

                $(".subject_category").change(function(){

                    $(".install_Download").css("display", "none");
                    $(".hosted_install").css("display", "none");
                    $(".reseller_install").css("display", "none");

                    switch ($(".subject_category option:selected").text()) {                
                        case "General Enquiry":
                            $(".General_Enquiry").show("fast");
                            break;
                        case "Install/Download":
                            $(".install_download").show("fast");
                            goToByScroll("message");
                            break;
                        case "Hosted Install":
                            $(".hosted_install").show("fast");
                            goToByScroll("message");
                            break;
                        case "Solution Provider - Install":
                            $(".reseller_install").show("fast");
                            goToByScroll("message");
                            break;
                    }
                });
        });     
    </script>

    <!--[if lt IE 8]> 
        <div style='clear:both; text-align:center; position:relative;'><a href="http://www.microsoft.com/windows/internet-explorer/default.aspx?ocid=ie6_countdown_bannercode"><img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" alt="" /></a></div>  
    <![endif]-->
    <!--[if lt IE 9]>
        <script type="text/javascript" src="js/html5.js"></script>
        <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen">   
    <![endif]-->
</head>

numeric class names? `In CSS, identifiers (including element names, classes, and IDs in selectors) can contain only the characters [a-z0-9] and ISO 10646 characters U+00A1 and higher, plus the hyphen (-) and the underscore (_); they cannot start with a digit, or a hyphen followed by a digit. Identifiers can also contain escaped characters and any ISO 10646 character as a numeric code (see next item). For instance, the identifier "B&W?" may be written as "B\&W\?" or "B\26 W\3F".` More here http://stackoverflow.com/questions/448981/what-characters-are-valid-in-css-class-names — alexbusu, Jan 03 '13 at 14:07

score 3 · Accepted Answer · edited Aug 25 '14 at 09:00

3

Basically CSS class names, must begin with an underscore (_), a dash (-), or a letter(a–z), not a number as in your case, followed by any number of dashes, underscores, letters, or numbers. There is a catch: if the first character is a dash, the second character must be a letter or underscore, and the name must be at least 2 characters long:

-?[_a-zA-Z]+[_a-zA-Z0-9-]*

Identifiers beginning with a dash or underscore are typically reserved for browser-specific extensions, as in -moz-opacity.

It's all made a bit more complicated by the inclusion of escaped Unicode characters (that no one really uses).

Note that, according to the CSS grammar, a rule starting with TWO dashes, e.g. --indent1, is invalid. However, I'm pretty sure I've seen this in practice.

edited Aug 25 '14 at 09:00

Qantas 94 Heavy

14,790
31
61
78

answered Jan 03 '13 at 14:04

Bud Damyanov

24,155
6
37
49

+1 - See also http://stackoverflow.com/questions/448981/what-characters-are-valid-in-css-class-names – jantimon Jan 03 '13 at 14:05
1

Sorry, I forgot to change the name in the right place. It's now working just fine. Many thanks for your accurate answer and my apologies for my mistake :-) – Sam Jan 03 '13 at 14:39

jQuery script working on firefox and chrome but is not picked up on ie 10

1 Answers1