CODEWITHSUNDEEP
jqueryhtmlinternet-explorer-10
Sam
Sam

Reputation: 2772

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

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>

Upvotes: 1

Views: 942

Answers (1)

Bud Damyanov
Bud Damyanov

Reputation: 31829

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.

Upvotes: 3

Related Questions