Good day people. Anyone familiar with using the iscroll plugin for mobile development. Well I tried to implement it into one of my projects but unfortunately as the topic suggests, I it doesn’t work when the page is loaded. But when I rotate my mobile device and change orientation, it starts to work. Anyone ran into this problem? What’s the fix anyone? I’ll include the code below
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type = "text/javascript" src="http://code.jquery.com/jquery-latest.js"> </script>
<!--include JQM -->
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.css" />
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0-rc.1/jquery.mobile-1.3.0-rc.1.min.js"></script
<!--include i scroll plugin-->
<script type="application/javascript" src="js/iscroll/iscroll.js"> </script> <!--include the iscroll library-->
<script type="text/javascript">
var myScroll;
function loaded() {
setTimeout(function () {
myScroll = new iScroll("wrapper");
}, 100);
}
window.addEventListener("load", loaded, false);
</script>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div id = "active_games_page" class = "page" data-role = "page">
<div data-role = "header" data-position = "fixed"> </div>
<div data-role = "content" class = "content" style = "background:black">
<div id = "wrapper" data-role = "content" style = "position:relative;bottom:10%;height:75%;border:1px solid white">
<div id="scroll_this" data-role = "content" style = "margin:auto;width:70%;position:relative;top:0%;border:1px dotted white">
<p> <a style = "background:red;height:1%">vngxfgffff</a> <p>
<p> <a style = "background:red;height:1%">vhghgfghjg </a> <p>
<p> <a style = "background:red;height:1%">ggjsddjgh </a> <p>
<p> <a style = "background:red;height:1%">cvngghgcghg </a> <p>
<p> <a style = "background:red;height:1%">vjghssgg </a> <p>
<p> <a style = "background:red;height:1%">dfghgdvngh </a> <p>
<p> <a style = "background:red;height:1%">fghdgjdtst</a> <p>
<p> <a style = "background:red;height:1%">gjhdrthdt</a> <p>
<p> <a style = "background:red;height:1%">ghtbjyjyy </a> <p>
<p> <a style = "background:red;height:1%">htytrertr</a> <p>
<p> <a style = "background:red;height:1%">afdfdfdafdae</a> <p>
<p> <a style = "background:red;height:1%">dafdfdfdfdd</a> <p>
<p> <a style = "background:red;height:1%">gdadfdfdfdf </a> <p>
<p> <a style = "background:red;height:1%">agdereafee </a> <p>
<p> <a style = "background:red;height:1%">aerergadfd</a> <p>
<p> <a style = "background:red;height:1%"> </a> <p>
<p> <a style = "background:red;height:1%"> </a> <p>
<p> <a style = "background:red;height:1%"> </a> <p>
</div> <!--/scroll me-->
</div> <!--/wrapper-->
</div> <!--/content-->
</div> <!--/active games page-->
</body>
</html>