I am working on a iframe android app on phonegap. I use phonegap build to compile my code online. For a day,I am searching for a code that pop out confirmation box that shows "do you want to exit?" yes|no ?? I comeout with these code.But it is not working.Can you help out? do we have to add any plugin in config.xml?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test Layout</title>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
document.addEventListener("backbutton", onBackKeyDown, false); //Listen to the User clicking on the back button
}
function onBackKeyDown(e) {
e.preventDefault();
navigator.notification.confirm("Are you sure you want to exit ?", onConfirm, "Confirmation", "Yes,No");
// Prompt the user with the choice
}
function onConfirm(button) {
if(button==2){//If User selected No, then we just do nothing
return;
}else{
navigator.app.exitApp();// Otherwise we quit the app.
}
}
</script>
<style type="text/css">
body, html
{
margin: 0; padding: 0; height: 100%; overflow: hidden;
}
#content
{
position:absolute; left: 0; right: 0; bottom: 0; top: 0px;
}
</style>
</head>
<body>
<div id="content">
<iframe width="100%" height="100%" frameborder="0" src="#" />
</div>
</body>
</html>
For Apache Cordova / Phonegap you don't need any plug-in for the native events (like deviceready orbackbutton) but you need the cordova-plugin-dialogs plug-in to show the native alerts.
So, I'm guessing that your problem is not to catch the event, but to show the alert.
Please, try just ti print a classic window.alert(), to verify if the event is catch, after that you can try with the dialog plug-in.
I think two changes are there in your code
first, if you haven't added cordova.js then please add it to your header section of file
second, before calling backbutton event you need to give some time to complete loading of the page otherwise it will not understand the back button click event
So here I just added timeout to your function
function onDeviceReady() {
setTimeout(function(){
document.addEventListener("backbutton", onBackKeyDown, false); //Listen to the User clicking on the back button
},500);
}
Here is my working code too.
$(document).ready(function(){
setTimeout(function(){
document.addEventListener('backbutton', function(e){
if (confirm("Are you sure you want to exit app?"))
{
navigator.app.exitApp();
}
}, false);
}, 500);
}
here is my working code on pressing backbutton it will ask for exit
document.addEventListener("backbutton", function (e) {
e.preventDefault();
navigator.notification.confirm("Are you sure want to exit from App?", onConfirmExit, "Confirmation", "Yes,No");
}, false);
function onConfirmExit(button) {
if (button == 2) { //If User select a No, then return back;
return;
} else {
navigator.app.exitApp(); // If user select a Yes, quit from the app.
}
}
Related
I am writing an interactive application where user performs operations using keyboard. Most of the keystrokes are captured properly and executed, but on chrome when I press (ctrl + t) a new tab opens up, instead of calling my keypress event. Where as it works perfectly on Firefox and Internet Explorer, here is the sample code
<html>
<head>
<style>
#section {
width: 80%;
height: 500px;
background: grey;
margin: auto;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#section").keydown(function(e) {
stopEvent(e);
console.log(e.key + " down");
});
function stopEvent (e) {
e.stopPropagation();
e.preventDefault();
}
});
</script>
</head>
<body>
<div id="section" tabindex="1">
<h2>Keyboard operations</h2>
</div>
</body>
</html>
See if this is of any help,
From: http://unixpapa.com/js/key.html
On keydown and keyup, the event objects also have flags that indicate
which modifier keys were being pressed when the key was typed. These
are:
event.shiftKey
event.ctrlKey
event.altKey
event.metaKey
I've added a flash game to my site that for some reason requires a left mouse click anywhere on the page after it loads. The click then enables the arrow keys to work.
I've tried a js based mouse trigger in my html and added an id to my flash object, but it's still not working. Any advice?
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Donkey Kong</title>
<script type="text/javascript">
function swfLoadEvent(fn){
//Ensure fn is a valid function
if(typeof fn !== "function"){ return false; }
//This timeout ensures we don't try to access PercentLoaded too soon
var initialTimeout = setTimeout(function (){
//Ensure Flash Player's PercentLoaded method is available and returns a value
if(typeof e.ref.PercentLoaded !== "undefined" && e.ref.PercentLoaded()){
//Set up a timer to periodically check value of PercentLoaded
var loadCheckInterval = setInterval(function (){
//Once value == 100 (fully loaded) we can do whatever we want
if(e.ref.PercentLoaded() === 100){
//Execute function
fn();
//Clear timer
clearInterval(loadCheckInterval);
}
}, 1500);
}
}, 200);
}
</script>
<script type="text/javascript">
$("document").ready(function() {
setTimeout(function() {
$("#swf").trigger('click');
},5000);
});
</script>
</head>
<style type="text/css">
body, html{
height: 100%;
min-height: 100%;
}
body
{
border: 0px;
padding: 0px;
overflow: hidden;
margin: 0px;
}
object {
border: none;
outline: none;
}
</style>
<body style="background-color: #000000">
<table class="flash-container" style="height: 94%; width:100%">
<tr style="height: 100%; width:100%">
<td style="height: 100%; width:100%">
<script type="text/javascript">
//This function is invoked by SWFObject once the <object> has been created
var callback = function (e){
//Only execute if SWFObject embed was successful
if(!e.success || !e.ref){ return false; }
swfLoadEvent(function(){
alert("The SWF has finished loading!");
});
};
swfobject.embedSWF("donkey_kong.swf", "flashcontent", "550", "400", "9", false, false, false, false, callback);
</script>
</td>
</tr>
</table>
</body>
</html>
You need to poll for 100 percent loaded flash object. Check the solution here:
http://learnswfobject.com/advanced-topics/executing-javascript-when-the-swf-has-finished-loading/
EDIT:
Your current function has HTML in it. Remove the HTML so it looks like this:
swfLoadEvent(function(){
alert("The SWF has finished loading!");
});
I've seen there are a lot of answers about my problem but nothing works and I'm going mad.
I've a real simple iframe structure, what I want is that Back Button doesnt come back (page by page) but close app (hide or close is the same).
Think I'm really newbie, so please explain me everything step by step
This is my code:
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
// Register the event listener
document.addEventListener("backbutton", onBackKeyDown, false);
}
// Handle the back button
//
function onBackKeyDown() {
navigator.app.exitApp();
}
</script>
</head>
<body>
<div data-role="page" id="page">
<div data-role="content">
<div class="container">
<div class="content">
<iframe src="home.html" name="pagina" class="pagina"> </iframe>
</div>
THANKS!!!!
This has worked for me in the past.
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady(){
document.addEventListener("backbutton", function(e){
if($.mobile.activePage.is('#homepage')){
e.preventDefault();
navigator.app.exitApp();
}
else {
navigator.app.backHistory()
}
}, false);
}
Hope this helps.
I have also faced the same issue initially i am fed up. But after many iterations I have succeeded. Here is the snippet, add this in .run function of your app.js
.run(function($ionicPlatform,$ionicPopup) {
$ionicPlatform.registerBackButtonAction(function (event) {
if(0){
navigator.app.exitApp();
}
else {
navigator.app.backHistory();
}
}, 101);
})
In the above code 101 is the priority. For exitting the app the priority is 100. so we are increasing the priority to 101.
I want to detect mouse speed, for example the event will be fired only if the detected number is greater than 5
I found one example which I think is something similar: http://www.loganfranken.com/blog/49/capturing-cursor-speed/
but i am not able to make it see the number which is inside div and fire the event based on the resulting number, this is my attempt:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="jquery.cursometer.1.0.0.min.js"></script>
<script>
$(function() {
var $speedometer = $('#speedometer');
$('#test-area').cursometer({
onUpdateSpeed: function(speed) {
$speedometer.text(speed);
},
updateSpeedRate: 20
});
$("#test-area").mouseover(function(){
if(this.value > 5) {
console.log("asdasd");
}
else {
console.log("bbb");
}
})
});
</script>
<style>
#test-area
{
background-color: #CCC;
height: 300px;
}
</style>
</head>
<body>
<div id="test-area"></div>
<div id="speedometer"></div>
</body>
</html>
(I'm the author of the plug-in that's causing the trouble here)
The example isn't working because this.value isn't referring to the speed (it's undefined). Here's an updated version of your example:
http://jsfiddle.net/eY6Z9/
It would probably be more efficient to store the speed value in a variable rather than within the text value of an HTML element. Here’s an updated version with that enhancement:
http://jsfiddle.net/eY6Z9/2/
Hope that helps!
basically I'm trying to get #toggle_box to slide down using Jquery, the code below works if I'm just using document.body as the selector however it doesn't seem to work when #toggle is the selector! Any ideas why?
<html>
<head>
<title>JQuery Testage</title>
<style>
#toggle_box {
display: none;
}
#toggle {
background-color: #FFF000;
border: solid;
}
</style>
</head>
<body>
<script src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$("#toggle").click(function () {
if ($("#toggle_box").is(":hidden")) {
$("#toggle_box").slideDown("slow");
} else {
$("#toggle_box").hide();
}
});
</script>
<div id="toggle">Toggle</div>
<div id="toggle_box">This should silde using the Jquery library 1.4.2</div>
</body>
</html>
Give the click handler a $(document).ready(... wrap, and it should work:
$(document).ready(function() {
// your click handler and anything else that
// should run when the DOM is ready
});
Modify your code thus:
<script type="text/javascript">
$(document).ready(function() {
$("#toggle").click(function () {
if ($("#toggle_box").is(":hidden")) {
$("#toggle_box").slideDown("slow");
} else {
$("#toggle_box").hide();
}
});
});
</script>
The problem is that the javascript is loaded and executed before the toggle_box element is loaded. It works for the document body as that is loaded before the javascript.
Could it be because the DOM isn't ready yet?
Try wrapping your script in the following piece of code:
$(function() {
// your code here
});
That's a short code for $(document).ready(function(){ ...}); and may just be what's missing?