[英]Why the following JQuery does not work on IE browser when I put it in my website?
I am using DDCharts JQuery plugin to put some charts in my website. 我正在使用DDCharts JQuery插件在我的网站中放置一些图表。 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??!!!!
我下载了该插件,原始文件和示例在Internet Explorer 8+中可以正常工作,但是当我将其包含在我的网站中时,它确实可以在IE上运行,但在Firefox上却可以正常运行,我不知道为什么?
This is my code: 这是我的代码:
PSI - Dashboard PSI-资讯主页
<!-- **************************************************** -->
<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&fwDefault=normal&fsDefault=1.1em&cornerRadius=5px&bgColorHeader=2191c0&bgTextureHeader=12_gloss_wave.png&bgImgOpacityHeader=75&borderColorHeader=4297d7&fcHeader=eaf5f7&iconColorHeader=d8e7f3&bgColorContent=fcfdfd&bgTextureContent=06_inset_hard.png&bgImgOpacityContent=100&borderColorContent=a6c9e2&fcContent=222222&iconColorContent=0078ae&bgColorDefault=0078ae&bgTextureDefault=02_glass.png&bgImgOpacityDefault=45&borderColorDefault=77d5f7&fcDefault=ffffff&iconColorDefault=e0fdff&bgColorHover=79c9ec&bgTextureHover=02_glass.png&bgImgOpacityHover=75&borderColorHover=448dae&fcHover=026890&iconColorHover=056b93&bgColorActive=6eac2c&bgTextureActive=12_gloss_wave.png&bgImgOpacityActive=50&borderColorActive=acdd4a&fcActive=ffffff&iconColorActive=f5e175&bgColorHighlight=f8da4e&bgTextureHighlight=02_glass.png&bgImgOpacityHighlight=55&borderColorHighlight=fcd113&fcHighlight=915608&iconColorHighlight=f7a50d&bgColorError=e14f1c&bgTextureError=12_gloss_wave.png&bgImgOpacityError=45&borderColorError=cd0a0a&fcError=ffffff&iconColorError=fcd113&bgColorOverlay=aaaaaa&bgTextureOverlay=01_flat.png&bgImgOpacityOverlay=75&opacityOverlay=30&bgColorShadow=999999&bgTextureShadow=01_flat.png&bgImgOpacityShadow=55&opacityShadow=45&thicknessShadow=0px&offsetTopShadow=5px&offsetLeftShadow=5px&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>
Try putting your javascript at the end of the page instead of the start. 尝试将您的JavaScript放在页面的末尾而不是开始处。 IE has problems when you try and run scripts on elements that haven't loaded yet.
当您尝试在尚未加载的元素上运行脚本时,IE会出现问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.