現在、ボタンを押すとセレクトボックスが表示されるJavaScriptが含まれるページを作成しております。
そこに、ページ全体を読み込み中に「loading」画像を表示する用のJavaScriptを追加したところ
前者のJavaScriptが機能しなくなってしまいました。
コードは下記の通りです。
--------------------------------
JavaScript
--------------------------------
<script type="text/javascript">
// <![CDATA[
document.write('<meta name="viewport" content="width='+device_width+'">');
document.write('<link rel="stylesheet" href="common/css/'+code+'/common.css" type="text/css" charset="UTF-8" title="style">');
document.write('<link rel="stylesheet" href="common/css/'+code+'/power.css" type="text/css" charset="UTF-8" title="style">');
$(function() {
$("#easyselect1-dialog").dialog({
autoOpen: false,
width: 200,
modal: true,
position: {
my: "center center",
at: "center center",
of: "#easyselect1-block"
},
buttons: [
{
text: '選択',
click: function(){
changeEasyDate('easyselect1-dialog');
$(this).dialog("close");
}
}
]
});
$("#easyselect2-dialog").dialog({
autoOpen: false,
width: 200,
modal: true,
position: {
my: "center center",
at: "center center",
of: "#easyselect2-block"
},
buttons: [
{
text: '選択',
click: function(){
setEasyCompare('easyselect2-dialog');
$(this).dialog("close");
}
}
]
});
$('button.dateselect1').click(function(){
window.setupCalendar($(this), changeDate);
});
$('button.dateselect2').click(function(){
window.setupCalendar($(this), setCompare);
});
$(".easyselect").click(function(){
$('#'+$(this).attr('id')+'-dialog').dialog("open");
});
});
// ]]>
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function() {
var h = $(window).height();
$('#wrap').css('display','none');
$('#loader-bg ,#loader').height(h).css('display','block');
});
$(window).load(function () { //全ての読み込みが完了したら実行
$('#loader-bg').delay(900).fadeOut(800);
$('#loader').delay(600).fadeOut(300);
$('#wrap').css('display', 'block');
});
</script>
--------------------------------
HTML
--------------------------------
<!--left-block-->
<div id="left-block">
<div class="left-box1">
<div class="data-text">
<span class="date"></span><span>の消費電力</span>
</div><div class="view">
<div class="element total-display-label">
１日の消費電力
</div>
<div id="loader-bg">
<div id="loader">
<img src="images/loader.gif" width="80" height="80" alt="Now Loading..." />
<p>Now Loading...</p>
</div>
</div>
<div class="data" id="wrap-ld">
<span style="font-size: 20px;" class="today-bought"></span><span>kWh</span>
</div>
</div>
<div class="date-select blue">
<div class="easy" id="easyselect1-block">
<div id="easyselect1-dialog" class="easyselect-dialog" title="簡易選択">
<select>
<option>今日</option>
<option>昨日</option>
<option>2日前</option>
<option>3日前</option>
<option>1週間前</option>
<option>2週間前</option>
<option>3週間前</option>
</select>
</div>
<button type="button" class="easyselect" id="easyselect1">簡易選択</button>
<div class="data date"></div>
</div>
<div class="direct">
<input type="hidden" />
<button type="button" class="dateselect1">ダイレクト選択</button>
<div class="data date"></div>
</div>
</div>
</div>
<div class="left-box2">
<div class="comparison">
<div class="text">
比較する
</div>
<div class="switch">
<button></button>
</div>
</div>
<div class="date-select red">
<div class="easy" id="easyselect2-block">
<div id="easyselect2-dialog" class="easyselect-dialog" title="簡易選択">
<select>
<option>昨日</option>
<option>2日前</option>
<option>3日前</option>
<option>1週間前</option>
<option>2週間前</option>
<option>3週間前</option>
</select>
</div>
<button type="button" class="easyselect" id="easyselect2">簡易選択</button>
<div class="data comp-date">昨日</div>
</div>
<div class="direct">
<input type="hidden" />
<button type="button" class="dateselect2">ダイレクト選択</button>
<div class="data comp-date">昨日</div>
</div>
</div>
</div>
<div id="unit-switch">
<div id="arrow"></div>
<span>グラフ単位<br />切替</span>
<a href="power.html?range=year" id="unit-year">年</a>
<a href="power.html?range=month" id="unit-month">月</a>
<a href="power.html?range=day" class="active" id="unit-day">日</a>
</div>
</div>
<!--left-block-->
--------------------------------
上記の両方のJavaScriptを動作させる方法はありますでしょうか。
恐れ入りますが、アドバイスいただけましたら幸いです。
何卒よろしくお願いいたします。
ログイン