April 24, 2012
how to disable scrolling in HTML files in iPad web
Question by Jackson J
I am using following code for my webpage but i have removed script but it still page swaping is with finger for ipad how to remove this. I have removed all the scripts but again it is swaping.I have tried
<body scroll='no'>
but does not get any response
HTML file code
<!DOCTYPE HTML>
<html manifest="draxxin.manifest">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="apple-touch-icon" href="icon.png" />
<title>BRD</title>
<link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.2.6.css"
/>
<link rel="shortcut icon" type="image/ico" href="images/favicon.gif" />
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen"
/>
<link type="text/css" href="newstyle.css" rel="stylesheet" />
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/jquery-ui-1.8.18.custom.min.js"></script>
<script language="javascript" type="text/javascript">
function showHideDiv()
{
document.getElementById("one").style.visibility = "visible";
document.getElementById("two").style.visibility = "visible";
document.getElementById("three").style.visibility = "hidden";
document.getElementById("four").style.visibility = "hidden";
}
</script>
<script language="javascript" type="text/javascript">
function showHideView()
{
document.getElementById("one").style.visibility = "hidden";
document.getElementById("two").style.visibility = "hidden";
document.getElementById("three").style.visibility = "visible";
document.getElementById("four").style.visibility = "visible";
}
</script>
<script type="text/javascript">
$(document).ready(function ()
{
$(".linkbutton").click(function ()
{
/* <!-- var address= $(this).attr("src");-->*/
var address = $(this).attr("data-light");
$("#popup").fadeIn("slow");
$("#lightbox").attr("src", address);
});
$("#close").click(function ()
{
$("#popup").fadeOut("fast");
});
});
</script>
<script type="text/javascript">
$(document).ready(function ()
{
$(".linkbutton_one").click(function ()
{
/* <!-- var address= $(this).attr("src");-->*/
var address = $(this).attr("data-light-one");
$("#popup_one").fadeIn("slow");
$("#lightbox_one").attr("src", address);
});
$("#close_one").click(function ()
{
$("#popup_one").fadeOut("fast");
});
});
</script>
<script type="text/javascript">
$(document).ready(function ()
{
$(".linkbutton_two").click(function ()
{
/* <!-- var address= $(this).attr("src");-->*/
var address = $(this).attr("data-light-two");
$("#popup_two").fadeIn("slow");
$("#lightbox_two").attr("src", address);
});
$("#close_two").click(function ()
{
$("#popup_two").fadeOut("fast");
});
});
</script>
<style type="text/css">
#popup {
background:#FFFFFF;
height:75%;
width: 100%;
position:absolute;
display: none;
}
#center {
border: 10px solid #121212;
margin: 6% 0 0 20%;
width: 572px;
}
#close {
float: right;
position:absolute;
margin:25px 0px 0 0;
top:0px;
left:510px;
}
</style>
<style type="text/css">
#popup_one {
background:#FFFFFF;
height:100%;
width: 100%;
position:absolute;
display: none;
}
#center_one {
border: 10px solid #121212;
margin: 6% 0 0 20%;
width: 318px;
}
#close_one {
float: right;
position:absolute;
margin:25px 0px 0 0;
top:0px;
left:510px;
}
</style>
<style type="text/css">
#popup_two {
background:#FFFFFF;
height:100%;
width: 100%;
position:absolute;
display: none;
}
#center_two {
border: 10px solid #121212;
margin: 6% 0 0 20%;
width: 318px;
}
#close_two {
float: right;
position:absolute;
position:relative;
margin:25px 0px 0 0;
top:0px;
left:510px;
}
</style>
</head>
<BODY onLoad="showHideDiv()">
<body>
<div id="container">
<div id="page_one" class="panel">
<div class="main_heading">Overview</div>
<div class="menu">
<ul>
<li class="stix"></li>
<li>
<a href="#page_one"><img src="image/overview_active.png"/></a>
</li>
<li class="stix"></li>
<li>
<a href="#page_two"><img src="image/strategy.gif"/></a>
</li>
<li class="stix"></li>
<li>
<a href="#"><img src="image/draxxin.gif"/></a>
</li>
<li class="stix"></li>
<li>
<a href="#"><img src="image/excede.gif"/></a>
</li>
<li class="stix"></li>
<li>
<a href="#"><img src="image/results.gif"/></a>
</li>
<li class="stix"></li>
<li>
<a href="#"><img src="image/reference.gif"/></a>
</li>
<li class="stix"></li>
</ul>
</div>
<div class="rightclass">
<img src="image/pageone_image.png" />
</div>
<div>
<ul>
<li class="midmenu">
<a href="index.html"><img src="image/backward.png"/></a>
</li>
<!--#page_one-->
<li class="midmenu1">
<a href="#page_two"><img src="image/forward.png"/></a>
</li>
</ul>
</div>
<div class="text_paragraph">
<p>Bovine Respiratory Disease (BRD) is the leading cause of economic loss
in the beef industry.
<small>1, 2</small>
</p>
</div>
<div class="text_paragraph_1">
<b>Economic loss:</b>
<ul>
<li>Costs the industry an estimated $1 billion each year.
<small>3, 4</small>
</li>
<li>Losses can be attributed to death, reduced feed and treatment costs.
<small>3,4</small>
</li>
<li>Economic losses range from an estimated $57.48 to $239.69 per head.
<small>1, 2</small>
</li>
</ul>
</div>
<div class="text_paragraph_2">
<b>Bacterial Culprits:</b>
<p>Four bacterial pathogens are commonly associated with BRD.</p>
<ul>
<li>Mannheimia haemolytica</li>
<li>Pasteurella multocida</li>
<li>Histophilus somni</li>
<li>Mycoplasma bovis</li>
</ul>
</div>
<div>
<img src="image/smallicon_2.png" class="linkbutton">
<img src="image/smallicon_2.png" class="linkbutton" data-light="image/popup_page_1.png"
/>
</div>
<div id="popup">
<div id="center">
<img id="lightbox" src="image/popup_page_1.png">
<img id="close" src="images/close.png" alt="close">
</div>
<!-- #center -->
</div>
</div>
<!-- End of page one-->
<div id="page_two" class="panel">
<div class="main_heading_two">Strategy</div>
<div class="menu">
<ul>
<li class="stix"></li>
<li>
<a href="#page_one"><img src="image/overview.gif" /></a>
</li>
<li class="stix"></li>
<li>
<a href="#page_two"><img src="image/strategy_active.png"/></a>
</li>
<li class="stix"></li>
<li>
<a href="#"><img src="image/draxxin.gif"/></a>
</li>
<li class="stix"></li>
<li>
<a href="#"><img src="image/excede.gif"/></a>
</li>
<li class="stix"></li>
<li>
<a href="#"><img src="image/results.gif"/></a>
</li>
<li class="stix"></li>
<li>
<a href="#"><img src="image/reference.gif"/></a>
</li>
<li class="stix"></li>
</ul>
</div>
<div class="rightclass_one">
<img src="image/whiteslide.png" />
</div>
<div class="pagetwo_text">
<p>Get up to 21 days of BRD therapy strategy using longer-duration antimicrobials
DRAXXIN ® (tulathromycin) Injectable Solution and EXCEDE ® (ceftiofur crystalline
free acid) Sterile Suspension.</p>
</div>
<div class="pagetwo_list_text">Advantages for Producers:
<ul>
<li>Fewer treatments</li>
<li>Less stress on cattle</li>
<li>Fewer mortalities</li>
<li>Cattle can recover in their own pen</li>
<li>Lower treatment costs and higher profits</li>
</ul>
</div>
<div class="pagetwo_list_text2">Extended duration strategy</div>
<div>
<ul>
<li class="midmenu_1">
<a href="#page_one"><img src="image/backward.png"/></a>
</li>
<li class="midmenu_2">
<a href="#page_two"><img src="image/forward.png"/></a>
</li>
</ul>
</div>
<div class="right_text">
<p>Either way you use them, it takes both DRAXXIN and EXCEDE for control
and treatment of BRD in high-risk cattle to give you the longest duration
of BRD therapy</p>
</div>
<div class="image_21">
<img src="image/pagetwo_graph_two_4.png" />
</div>
<div class="ratemeter">
<img src="image/pagetwo_graph_one.png" />
</div>
<div id="one" class="image_one">
<img src="image/optiononetwo.png" />
</div>
<div id="two" class="image_two">
<img src="image/optiononeone.png" />
</div>
<div id="three" class="image_one_one">
<img src="image/pagetwo_graph_two_11.png" />
</div>
<div id="four" class="image_two_two">
<img src="image/pagetwo_graph_two_22.png" />
</div>
<div class="option_image">
<img src="image/option_1.png" onclick="showHideDiv()" />
</div>
<div class="option_image_label">Option 1</div>
<div class="option_image_one">
<img src="image/option_1.png" onclick="showHideView()" />
</div>
<div class="option_image_label_one">Option 2</div>
<div class="fourteen_day">
<img src="image/button_14days.PNG" />
</div>
<div class="heading_one">Post Metaphylaxis Interval (PMI)</div>
<div>
<img src="image/smallicon_1.png" class="linkbutton_one">
<img src="image/smallicon_1.png" class="linkbutton_one" data-light-one="image/popup_2_page_2.png"
/>
</div>
<div id="popup_one">
<div id="center_one">
<img id="lightbox_one" src="image/popup_2_page_2.png">
<img id="close_one" src="images/close.png" alt="close">
</div>
<!-- #center -->
</div>
<div class="seven_day">
<img src="image/button_7days.PNG" />
</div>
<div class="heading_two">Post Treatment Interval (PTI)</div>
<!-- <div class="linkbutton_two">
<a href="image/popup_2_page_2.png" rel="lightbox"><img src="image/smallicon_1.png" alt="" /></a>
</div>
-->
<div>
<img src="image/smallicon_1.png" class="linkbutton_two">
<img src="image/smallicon_1.png" class="linkbutton_two" data-light-two="image/popup_2_page_2.png"
/>
</div>
<div id="popup_two">
<div id="center_two">
<img id="lightbox_two" src="image/popup_2_page_2.png">
<img id="close_two" src="images/close.png" alt="close">
</div>
<!-- #center -->
</div>
</div>
<!-- End of page two-->
</div>
</body>
</html>
Answer by Starx
