i follow this link to use the keyboard event by using [Simon mac donald Defination][1] In that event i show my footer when keyboard hide and hide my footer when keyboard is
Remove the .ready()
function and add the listeners in the deviceready
<style type="text/css">
#footer {
position:absolute;
bottom:0; left:0;
width:100%;
height:7%;
background-color:#00458D;
padding:0;
border-width:3px;
padding-top:3%;
padding-bottom:2%;
padding-right:0px;
padding-left:0px;
background-color:#00458D;
}
#content {
position:absolute; bottom:0;
top:0;
width:100%;
overflow:auto;
}
</style>
<script type="text/javascript">
document.addEventListener("deviceready",onDeviceReady,false);
function onDeviceReady () {
document.addEventListener("hidekeyboard", onHide, false);
document.addEventListener("showkeyboard", onShow, false);
}
function onHide()
{
$("#footer").show();
}
function onShow()
{
$("#footer").hide();
}
</script>
</head>
<body >
<div id="content">
<input type="text" style="width=70%">
<br/>
<br/>
<div id="footer" align="center">
<table width=100%>
<input type="image" src="../images/Home.PNG" style="width:23%" onClick="home()"/>
<input type="image" src="../images/messages-menu.jpg" style="width:23%" onClick="inbox()"/>
<input type="image" src="../images/settings-menu.jpg" style="width:23%" onClick="settings()"/>
<input type="image" src="../images/close-menu.png" style="width:23%" onClick="callServiceFunction()"/>
</table>
</div>
</div>
</body>
</html>
Try it in OndeviceReady ()
$(document).ready(function ()
{
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady()
{
document.addEventListener("hidekeyboard", onHide, false);
document.addEventListener("showkeyboard", onShow, false);
}
function onHide()
{
$("#footer").show();
}
function onShow()
{
$("#footer").hide();
}