I am new to phonegap. I wish to implement slide menu in phonegap. For this I am using sidr of jquery. When I use sidr in a separate htl file, it works.
Here's the code:
<html>
<head>
<!-- Your stuff -->
<!-- Include Sidr bundled CSS theme -->
<link rel="stylesheet" href="css/jquery.sidr.dark.css">
</head>
<!-- Your stuff -->
<!-- Include jQuery -->
<script src="js/jquery.js"></script>
<!-- Include the Sidr JS -->
<script src="js/jquery.sidr.min.js"></script>
<body>
<a id="simple-menu" href="#sidr">Toggle menu</a>
<div id="sidr">
<!-- Your content -->
<ul>
<li><a href="#">List 1</a></li>
<li class="active"><a href="#">List 2</a></li>
<li><a href="#">List 3</a></li>
</ul>
</div>
<script>
$(document).ready(function() {
alert("sdf");
$('#simple-menu').sidr();
});
</script>
</body>
</html>
This same code is not working in ios phonegap. Here's the code:
<script type="text/javascript">
app.initialize();
</script>
<script type="text/javascript">
$(function() {
$('#simple-menu').click(function() {
alert("sdf");
return false;
});
});
</script>
<div id="sdf" class="topBar" align="left" style="padding-top:50px">
<a id="simple-menu" href="#sidr">Toggle menu</a>
</div>
<div id="sidr">
<!-- Your content -->
<ul>
<li><a href="#">List 1</a></li>
<li class="active"><a href="#">List 2</a></li>
<li><a href="#">List 3</a></li>
</ul>
</div>
Even alert is not fired. Where am I getting wrong? How do I solve this?
