Reputation: 20
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 show.when click the dictonary my keybord is show but the event is goes to keyboard hide function(so my footer is shown) ..i dont know why..
i attached my code and design .Kindly solve this issue
<script type="text/javascript">
$(document).ready(function ()
{
document.addEventListener("hidekeyboard", onHide, false);
document.addEventListener("showkeyboard", onShow, false);
});
function onHide()
{
$("#footer").show();
}
function onShow()
{
$("#footer").hide();
}
</script>
<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>
</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>
images
Upvotes: 1
Views: 5093
Reputation: 8946
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();
}
Upvotes: 0
Reputation: 14370
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>
Upvotes: 1