DOMContentLoaded could not load a function()
I ran into a problem where my DOMContentLoaded could not load a function(); on a specific version of Appcelerator (Titanium). Like:
<script type="text/javascript">
var scroll1, scroll2, myScroll;
function loaded() {
//iScroll - Scroll up and down
scroll1 = new iScroll('RightContent', { useTransition:true });
scroll2 = new iScroll('MainContent2', { useTransition:true });
//iScroll - Snap left and right
myScroll = new iScroll('wrapper', {
snap: true,
momentum: false,
hScrollbar: false,
onScrollEnd: function () {
document.querySelector('#indicator > li.active').className = '';
document.querySelector('#indicator > li:nth-child(' + (this.currPageX+1) + ')').className = 'active';
}
});
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
</script>But if I changed it so DOMContentLoaded loaded the code directly it worked again.
<script type="text/javascript">
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
window.addEventListener('DOMContentLoaded', function () {
var scroll1, scroll2, myScroll;
//iScroll - Scroll up and down
scroll1 = new iScroll('RightContent', { useTransition:true });
scroll2 = new iScroll('MainContent2', { useTransition:true });
//iScroll - Snap left and right
myScroll = new iScroll('wrapper', {
snap: true,
momentum: false,
hScrollbar: false,
onScrollEnd: function () {
document.querySelector('#indicator > li.active').className = '';
document.querySelector('#indicator > li:nth-child(' + (this.currPageX+1) + ')').className = 'active';
}
});
});
</script>Hope this will help other in the same situation.
Force iScroll to refresh
If you add or remove items inside your content. You need to refresh your iScroll script.
Insert this javascript line.
setTimeout(function () { myScroll.refresh(); }, 0);
myScroll is the name of your call like:
myScroll = new iScroll('RightContent', { useTransition:true });
Touch Scroll for Iphone and Ipad with finger scrolling
While there are plenty of frameworks (e.g. jQuery Mobile, SenchaTouch, etc.) that can help get you started with mobile web apps. I found a pure JavaScript library called iScroll 4 very helpfull to create mobile websites. It have a list of nice features like:
'Scroll up and down'
'Snap to element'
'Pinch / Zoom'
iScroll support both iPhone/Ipod touch, iPad and Android.
In this tutorial I will teach you how to use iScroll 4 and implement a pages where you can scroll a part of a window with finger up and down without moving the rest of the screen.
Download iScroll's javascript file from this site:
http://cubiq.org/iscroll-4 - Click on download.
Insert this code in your
tag:<script type="application/javascript" src="iscroll.js"></script>
<script type="text/javascript">
var myScroll;
function loaded() {
myScroll = new iScroll('wrapper');
}
document.addEventListener('DOMContentLoaded', loaded, false);
</script>Remember to change src="iscroll.js" to where your placed the file.
Insert this code in your
tag:<div id="wrapper">
<div id="scroller">
<ul>
<li>Content</li>
..
..
</ul>
</div>
</div>In this example the UL element will be scrolled. The iScroll must be applied to the wrapper of the scrolling area.
Final result:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>iScroll demo</title>
<script type="text/javascript" src="../../src/iscroll.js"></script>
<script type="text/javascript">
var scroll1;
function loaded() {
scroll1 = new iScroll('standard');
}
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', loaded, false);
</script>
<style type="text/css" media="all">
ul,li {
padding:0;
margin:0;
border:0;
}
body {
font-size:12px;
-webkit-user-select:none;
-webkit-text-size-adjust:none;
font-family:helvetica;
padding:20px;
}
#standard {
position:relative; z-index:1;
display:block; float:left;
width:300px; height:400px;
background:#aaa;
overflow:auto;
border:1px solid #aaa;
}
.scroller {
position:absolute; z-index:1;
/* -webkit-touch-callout:none;*/
-webkit-tap-highlight-color:rgba(0,0,0,0);
width:100%;
padding:0;
}
.scroller ul {
list-style:none;
padding:0;
margin:0;
width:100%;
text-align:left;
}
.scroller li {
padding:0 10px;
height:40px;
line-height:40px;
border-bottom:1px solid #ccc;
border-top:1px solid #fff;
background-color:#fafafa;
font-size:14px;
}
#myFrame {
position:absolute;
top:0; left:0;
}
</style>
</head>
<body>
<div id="standard">
<div class="scroller">
<ul>
<li><strong>Standard iScroll</strong></li>
<li>Pretty row 2</li>
<li>Pretty row 3</li>
<li>Pretty row 4</li>
<li>Pretty row 5</li>
<li>Pretty row 6</li>
<li>Pretty row 7</li>
<li>Pretty row 8</li>
</ul>
</div>
</div>
</body>
</html>