Jump to content

Iscroll won't fire untill device is flipped


drayarms

Recommended Posts

 

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>

 

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.