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>Force your content to load before your advertisements
You can easy improve your reader's experience on your website with this little tip. With help from Javascript you can force your content to load before all your advertisements. Your readers will fill that your website it's faster and that can maybe in the end give more traffic.
Here is how you do it.
In the top of the page insert.
<div id="topslotloader" style="display:none;">
<script language="javascript1.1" src="http://adserver.adtech.de................."></script>
</div><div id="topslot">loading...</div>
In the bottom of the page insert.
<script type="text/javascript">
document.getElementById("topslot").innerHTML = document.getElementById("topslotloader").innerHTML;
</script>All lines / content before the last 3 lines og Javascript will now load before all your ads.
Load content with ajax load function
It can be a smart move to implement all external elements inside ajax calls, like ads, scriptning and stuff like that. So your readers don't need to wait for all element on the website to be done.
In this article i use a Javascript framework called jquery.
Here it how you can implement a ajax load function.
Load the feeds.html file into the div with the ID feeds.
$("#feeds").load("feeds.html");
HTML:
<div id="feeds"><!-- Some Content --></div>
Result:
<div id="feeds">Text from html file feeds.html</div>
Complete example:
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div id="feeds"></div>
<script>
$("#feeds").load("feeds.html");
</script>
</body>
</html>Javascript: Flyt indhold mellem div elementer
Med funktionen innerHTML i javascript kan man flytte indhold fra det ene område til et andet. Meget smart hvis man f.eks. arbejder i et system med område begræsninger.
ArticleParagraphFirstItem der hvor javascriptet skal kopirer fra, derfor gør vi det usynligt.
<div id="ArticleParagraphFirstItem" style="display:none;">
<br>
[%<%Picture%>%]
[%<%Facts%>%]
[%<span class="ingress_artikkel"><%Heading%></span><br>%]
[%<span class="bodystyle"><%Body%></span><br>%]
</div>
<div id="ArticleParagraphFirstItemMove"></div>
<script language="javascript">
document.getElementById('ArticleParagraphFirstItemMove').innerHTML = document.getElementById('ArticleParagraphFirstItem').innerHTML
</script>
Det usynlige område bliver nu flyttet til et andet div element som hedder ArticleParagraphFirstItemMove.
Javascript: Find X og Y koordinater fra musen
Få vist koordinaterne fra musens placering på skærmen via Javascript.
Javascript
<script type="text/javascript">
function getMousePos(myEvent) {
//NS
if (document.layers||document.getElementById&&!document.all) {
document.getElementById("myX").innerHTML = myEvent.pageX;
document.getElementById("myY").innerHTML = myEvent.pageY;
}
//IE
else if (document.all) {
document.getElementById("myX").innerHTML = window.event.clientY;
document.getElementById("myY").innerHTML = window.event.clientY;
}
}
document.onmousemove = getMousePos;
</script>html
<b>Page X koordinater:</b>
<span id="myX">0</span><br>
<b>Page Y koordinater:</b>
<span id="myY">0</span>
Javascript: Validering af om input er tal
Javascript der tjekker efter om input informationerne er tal.
Javascript
<script>
function validering()
{
error = 0;
// Tjekker om feltet indeholder tal
if(!document.formular.postnr.value.match(/^[0-9\+ ]+$/) && (error==0))
{
alert('Post Nr. M? kun indeholde tal !');
document.formular.postnr.focus();
error = 1;
}
if(error == 0)
document.formular.submit();
}
</script>
html
<form action="viskurv3.asp" name="formular" method="post" onsubmit="validering();return false;">
Post nr: <input type="text" name="postnr"><br>
<input type="submit" value="OK">
</form>
Javascript: Validering af tal værdi
Tjek via javascript at værdien skal være over en bestemt størrelse.
Javascript
<script type="text/javascript">
function validering()
{
error = 0;
// postnr Nummer skal være over 1000
if(document.formular.postnr.value < 1000)
{
alert('post nr. skal være over 1000');
document.formular.postnr.focus();
error = 1;
}
if(error == 0)
document.formular.submit();
}
</script>
html
<form action="viskurv3.asp" name="formular" method="post" onsubmit="validering();return false;">
Post nr: <input type="text" value="1" name="postnr"><br>
<input type="submit" value="OK">
</form>