モバイルWebサイトのページを下にスクロールすると、コンテンツが消え、灰色と白の小さな四角が表示されます。スクロールを停止すると、コンテンツが再び表示されます。
これを防ぐ方法はありますか？
私のコード：
<html>
<head>
<title>PHP Test</title>
<!-- Code within Head Tag -->
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(window).load(function(){
$("#loading").hide();
})
</script>
<!-- Code within Head Tag -->
<style type="text/css">
/* Document Styles */
#wrapper{
width:800px;
height:500px;
margin:0 auto;
padding:5px;
border:1px solid #CCC;
background:#CCC;
}
.desc{
margin:5 auto;
width:800px;
text-align:left;
}
/* Loading Div Style */
#loading{
position:absolute;
width:300px;
top:0px;
left:0%;
margin-left:5px;
text-align:left;
padding:7px 0 0 0;
font:bold 11px Arial, Helvetica, sans-serif;
}
body {
overflow: hidden
}
</style>
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<center>
<form>
<!-- Loading Div -->
<div id="loading">
Fetching Hotels, please wait..
<img src="loading.gif" alt="loading.." />
</div>
<!-- Loading Div -->
<br>
<input type=text value="destination" name=title onclick="this.value = '';"><br>
Date:<br>
<select name="month">
<option value="1">January
<option value="2">February
<option value="3">March
<option value="4">April
<option value="5">May
<option value="6">June
<option value="7">July
<option value="8">August
<option value="9">September
<option value="10">October
<option value="11">November
<option value="12">December
</select>
<select name="day">
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
<option value="5">5
<option value="6">6
<option value="7">7
<option value="8">8
<option value="9">9
<option value="10">10
<option value="11">11
<option value="12">12
<option value="13">13
<option value="14">14
<option value="15">15
<option value="16">16
<option value="17">17
<option value="18">18
<option value="19">19
<option value="20">20
<option value="21">21
<option value="22">22
<option value="23">23
<option value="24">24
<option value="25">25
<option value="26">26
<option value="27">27
<option value="28">28
<option value="29">29
<option value="30">30
<option value="31">31
</select>
<select name="year">
<option value="2012">2012
<option value="2013">2013
<option value="2014">2014
</select>
<br><br>
No. of Nights:
<select name="nights">
<option value="1">1
<option value="2">2
<option value="3">3
<option value="4">4
<option value="5">5
<option value="6">6
<option value="7">7
<option value="8">8
<option value="9">9
<option value="10">10
<option value="11">11
<option value="12">12
<option value="13">13
<option value="14">14
<option value="15">15
<option value="16">16
<option value="17">17
<option value="18">18
</select>
<input type=submit>
<?php
// specify url of xml file
$url = "http://xmlfeed.laterooms.com/index.aspx?aid=1000&rtype=4&kword=".$_GET['title']."&sdate=".$_GET['year']."-".$_GET['month']."-".$_GET['day']."&nights=".$_GET['nights']."&orderby=hoteldistance&sortorder=asc";
// get xml file contents
$xml = simplexml_load_file($url);
// loop begins
$i = 0;
foreach($xml->hotel as $hotel)
{
if (++$i > 20) {
// stop after 5 loops
break;
}
// begin new paragraph
echo "<p>";
echo "<img src=".$hotel->images." height=100 width=100><br/>";
echo "<strong>Hotel Name:</strong> ".$hotel->hotel_name."<br/>";
echo "<strong>Prices From:</strong> £".$hotel->prices_from."<br/>";
echo "<a href=".$hotel->hotel_link."><img src=http://affiliates.laterooms.com/AffiliateImages/en/buttons/more_details1.gif></a><br/>";
echo "<strong>Miles from ".$_GET['title']."</strong> ".$hotel->hotel_distance."<br/>";
echo "</p>";
// end paragraph
}
$cnt++;
// loop ends
?>
</form>
</center>
</body>
</html>