Why the following JQuery does not work on IE browser when I put it in my website?

Question

I am using DDCharts JQuery plugin to put some charts in my website. I downloaded the plugin and the original files and examples work fine in Internet Explorer 8+ but when I included in my website, it did work on IE but it worked well on Firefox and I don't know why??!!!!

This is my code:

PSI - Dashboard

    <!-- **************************************************** -->
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link type="text/css" href="http://jqueryui.com/themeroller/css/parseTheme.css.php?ffDefault=Verdana%2CArial%2Csans-serif&amp;fwDefault=normal&amp;fsDefault=1.1em&amp;cornerRadius=5px&amp;bgColorHeader=2191c0&amp;bgTextureHeader=12_gloss_wave.png&amp;bgImgOpacityHeader=75&amp;borderColorHeader=4297d7&amp;fcHeader=eaf5f7&amp;iconColorHeader=d8e7f3&amp;bgColorContent=fcfdfd&amp;bgTextureContent=06_inset_hard.png&amp;bgImgOpacityContent=100&amp;borderColorContent=a6c9e2&amp;fcContent=222222&amp;iconColorContent=0078ae&amp;bgColorDefault=0078ae&amp;bgTextureDefault=02_glass.png&amp;bgImgOpacityDefault=45&amp;borderColorDefault=77d5f7&amp;fcDefault=ffffff&amp;iconColorDefault=e0fdff&amp;bgColorHover=79c9ec&amp;bgTextureHover=02_glass.png&amp;bgImgOpacityHover=75&amp;borderColorHover=448dae&amp;fcHover=026890&amp;iconColorHover=056b93&amp;bgColorActive=6eac2c&amp;bgTextureActive=12_gloss_wave.png&amp;bgImgOpacityActive=50&amp;borderColorActive=acdd4a&amp;fcActive=ffffff&amp;iconColorActive=f5e175&amp;bgColorHighlight=f8da4e&amp;bgTextureHighlight=02_glass.png&amp;bgImgOpacityHighlight=55&amp;borderColorHighlight=fcd113&amp;fcHighlight=915608&amp;iconColorHighlight=f7a50d&amp;bgColorError=e14f1c&amp;bgTextureError=12_gloss_wave.png&amp;bgImgOpacityError=45&amp;borderColorError=cd0a0a&amp;fcError=ffffff&amp;iconColorError=fcd113&amp;bgColorOverlay=aaaaaa&amp;bgTextureOverlay=01_flat.png&amp;bgImgOpacityOverlay=75&amp;opacityOverlay=30&amp;bgColorShadow=999999&amp;bgTextureShadow=01_flat.png&amp;bgImgOpacityShadow=55&amp;opacityShadow=45&amp;thicknessShadow=0px&amp;offsetTopShadow=5px&amp;offsetLeftShadow=5px&amp;cornerRadiusShadow=5px" rel="stylesheet" />
        <link type="text/css" href="Style/ddchart.css" rel="stylesheet" />
        <script language="javascript" src="http://jqueryui.com/js/jquery.js" ></script>
        <script language="javascript" src="http://jqueryui.com/themeroller/themeswitchertool/" ></script>
        <script language="javascript" src="JavaScript/jquery.tooltip.js" ></script>
        <script language="javascript" src="JavaScript/jquery.ddchart.js"></script>
        <script language="javascript">
            $(document).ready(function(){
                $('#switcher').themeswitcher();
            });
        </script>

        <style type="text/css">
            .chart_loading {
                position:absolute; 
                bottom:0%; 
                left:0%; 
                height:10%; 
                width:10%; 
                padding:0; 
                margin:0; 
                z-index:1000; 
                text-align:center;}
        </style>
        <script type="text/javascript">
            $(function() {
                $("#chart_div_static").ddBarChart({
                         chartDataLink: "javascript/Static_Data.js?1=10",
                         action: 'init', 
                         xOddClass: "ui-state-active",
                         xEvenClass: "ui-state-default",
                         yOddClass: "ui-state-active",
                         yEvenClass: "ui-state-default",
                         xWrapperClass: "ui-widget-content",
                         chartWrapperClass: "ui-widget-content",
                         chartBarClass: "ui-state-focus ui-corner-top",
                         chartBarHoverClass: "ui-state-highlight",
                         callBeforeLoad: function (){$('#loading-Notification_static').fadeIn(500);},
                         callAfterLoad: function (){$('#loading-Notification_static').stop().fadeOut(0);},
                         tooltipSettings: {extraClass: "ui-widget ui-widget-content ui-corner-all"}
                });
            });
        </script>
    <!-- **************************************************** -->

<div class="page"> 
    <div id="header" >



        <div class="HeadTop">
              <h2 style="color:Red"> TEST System</h2> 
        </div> 



    </div>                                                                                                                                                                                                                                                                                                                                                                                    



    <div id="main">
        TEST - Dashboard

        <!-- *********************************************************************************************** -->
        <!-- For the Charts -->
            <div id="switcher" style="position:relative; height:5%; width:100%;"></div>

            <div style="position:relative; width:100%;height:95%;">
                <div id="chart_div_static" style="position:relative; height:95%; width:100%;"></div>
                <div id="loading-Notification_static" class="chart_loading ui-widget ui-widget-content ui-state-error">Loading...</div>
            </div>
            <div class="ui-widget-header ui-state-active" style="padding:7px 0 7px 10px">
                Source
                <button class="ui-button ui-state-default ui-corner-all" style="float:right; padding:2px;" onClick="window.open('Source/DDChart_Source.zip','_blank');">Download</button>
            </div>
        <!-- *********************************************************************************************** -->

    </div> 

</div>

Answer 1

Try putting your javascript at the end of the page instead of the start. IE has problems when you try and run scripts on elements that haven't loaded yet.