Im trying to get a slider on an iphone web app, I'm using iui to handle the ui. The slider appears to be causing some kind of conflict with iui.js, when you drag the slider it tries to open another page. However it works fine when you just click on some part of the bar. I thought it was the slide event causing it but this event is triggered in both cases, so I'm a bit stuck. Any help would be greatly appreciated.
Simple test case (click through to get the slider):
<head>
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
<script type="application/x-javascript" src="http://www.joehewitt.com/iui/iui/iui.js"></script>
<link href="http://www.joehewitt.com/iui/iui/iui.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.slider.js"></script>
<link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
<script language="javascript">
$(document).ready(function(){
$("#slider").slider()
});
</script>
</head>
<body>
<div class="toolbar">
<h1 id="pageTitle"></h1>
<a id="backButton" class="button" href="#"></a>
</div>
<ul title="slider test" selected="true">
<li class="group">Page 1</li>
<li>
<a class="mainnav" href="#page2">page 2</a>
</li>
</ul>
<div id="page2" title="foo.inc">
<div id="slide_container">
<div id="slider"></div>
</div>
</div>
</body>