Hello,
I'm trying to enable functionality in my web app to allow users to click on the company's logo to link back to the main page of the web app using JQtouch. With my current code, I'm getting the an error in the web inspector saying that there are "No pages in the history" when I click on the image.
Here is an example:
<a href="#mainScreen"><img src="images/logo.gif"></a>
Basically, I want to use this image as a link, have the animation transition work properly and have the flexibility of using # notation to reference different screens of my html file.
current code:
<html>
<head>
<title>main</title>
<link type="text/css" rel="stylesheet" media="screen" href="jqtouch/jqtouch.css">
<link type ="text/css" rel="stylesheet" media="screen" href="themes/jqt/theme.css">
<script type="text/javascript" src="jqtouch/jquery.js"></script>
<script type="text/javascript" src="main.js"></script>
<script type="text/javascript" src="jqtouch/jqtouch.js"></script>
<script type="text/javascript">
var jQT = $.jQTouch({
statusBar: 'black'
});
</script>
</head>
<body id="stackLayout">
<div id="mainScreen">
<div class="toolbar">
<a class="button flip" href="#friends" style="margin-right: 250px">Friends</a>
<a class="button flip" href="#nearby" style="margin-right: 193px">Nearby</a>
<a class="button flip" href="#me" style="margin-right: 160px">Me</a>
<a class="button flip" href="#settings" style="margin-right: 80px">Settings</a>
<img style="float: right; margin-right: -14px; margin-top: -10px" src="images/logo.jpg" onclick="logo_onClickHandler(event)">
</div>
</div>
<form method="post" style="margin: 150px 0 0 0">
<ul>
<li><input placeholder="When" type="text" name="when" id="whenField" /></li>
<li><input placeholder="Where" type="text" name="where"
id="whereField" /></li>
<li><input placeholder="" type="text" name="weight"
id="weight" /></li>
<li><input type="submit" class="submit" name="action"
value="Post" /></li>
</ul>
</form>
</div>
Here is my JS:
$(document).ready(function(){
});
function logo_onClickHandler(event) {
var views = document.getElementById('stackLayout')
var main = document.getElementById('mainScreen');
if (views && views.object && main){
views.object.setCurrentView(main, true);
}
}