Here is some code that shows you how you can click a link with JavaScript (without using the mouse):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="" />
<title>Click a link with JavaScript</title>
<style type="text/css">
* { margin: 0; padding: 0; border: 0; }
</style>
</head>
<body>
<a id="myLink" href="http://www.bennyn.de/">Hyperlink</a>
<script type="text/javascript">
function clickLink(id){
var theEvent = document.createEvent("MouseEvent");
theEvent.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
var element = document.getElementById(id);
element.dispatchEvent(theEvent);
while (element){
if (element.tagName == "A" && element.href != ""){
if (element.target == "_blank") { window.open(element.href, element.target); }
else { document.location = element.href; }
element = null;
}
else{
element = element.parentElement;
}
}
}
clickLink('myLink');
</script>
</body>
</html> |
A very fast and easy way to debug your JavaScript applications on mobile devices is to use a remote JavaScript console listener, like jsconsole.com.
All you have to do is:
- Insert this code snippet with a unique id:
<script src="http://jsconsole.com/remote.js?BE73V55D"></script>
- Go to http://jsconsole.com/
- Type in:
:listen BE73V55D
- Watch your
console.logstatements, when using your application
JavaScript is able to zoom in and zoom out of a web page. All you need is just this (for 200% zoom):
window.parent.document.body.style.zoom=2.0;
In modern mobile devices and HTML5 browsers you can set the viewport content (for example the webpage zoom and webpage dimension) with a single meta tag:
<meta name="viewport" content="width=device-width,initial-scale=2.0,minimum-scale=2.0,maximum-scale=2.0, user-scalable=no">
If you want to do this with JavaScript, then you need a viewport meta-tag with empty content:
<meta name="viewport" content="" />
Then you can change the content by using JavaScript:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | function setViewPort(viewPortContent){ var metas = document.getElementsByTagName('meta'); var i; if (navigator.userAgent.match(/iPhone/i)) { for (i=0; i<metas.length; i++) { if (metas[i].name == 'viewport') { metas[i].content = viewPortContent; } } } } var viewPortContent = 'width=device-width,initial-scale=2.0,minimum-scale=2.0,maximum-scale=2.0, user-scalable=no'; setViewPort(viewPortContent); |
If you want to constantly hide the address bar on mobile devices like iPhone, iPad and Android smartphones/tablets, then you have to scroll the window even if the device is turned:
1 2 3 4 5 6 7 8 9 10 | <script type="text/javascript"> function hideAddressBar(){ window.scrollTo(0, 1); } window.onload = hideAddressBar; window.onscroll = hideAddressBar; window.onresize = hideAddressBar; window.onorientationchange = hideAddressBar; </script> |
Short version:
<script> window.onload = window.onscroll = window.onresize = window.onorientationchange = function(){ window.scrollTo(0, 1); }; </script>
Setting or changing background images with jQuery is super simple:
$('html').css('background-image','url("../../images/photo.png")');
0