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>

 

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • 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.