Only one time welcome screen on android - javascript

i am making an html5/javascript application at Intel XDK and i would like to add a welcome screen which will be displayed only once ever.
any help is welcome.
thanks in advance!

You can use Cordova localStorage to save a value to detect first time or not.
Below is working sample:
<!DOCTYPE html>
<html>
<head>
<title>App</title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0;" />
</head>
<body>
<h1>Hello World</h1>
<script src="cordova.js"></script>
<script>
function onDeviceReady() {
welcomeScreen();
}
document.addEventListener("deviceready", onDeviceReady, false);
function welcomeScreen(){
var welcome = window.localStorage.getItem("welcome");
if(!welcome){
window.localStorage.setItem("welcome", "1");
alert("Welcome Message"); // replace with welcome screen display
}
}
</script>
</body>
</html>

Related

How do i run a node specific function on button click

I'm trying to change the context of a text file on an HTML button click.
I have this so far:
index.html:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Table</title>
<script src="node-main.js"></script>
</head>
<body>
<embed src="table.txt">
<button onclick="Update()">Update</button>
</body>
</html>
node-main.js:
const fs = require('fs');
function Update() {
fs.writeFileSync("table.txt", 'New text');
}
It does not do what I was expecting.
It gives me the error:require is not defined
Thanks in advance :)
You should run node-main.js as a server that receives fetch requests from your client. You're trying to run server-side scripts on the client.
Try using Express.js
https://expressjs.com/

Why doesn't my console.log message show when I press Start?

I'm learning to use event listeners, I wanted to log pressing the "Start" button to the console to make sure the button works but I'm not getting any results when I test the .html file in devtools.
I've verified the index.js name referenced in the .html file is the same
I've tried the source code in the header
I've added the src=index.js jQuery library through Google to the bottom before </body>
I've copied the code to repl.it to try a different environment
JAVASCRIPT:
function startQuiz() {
$('#startButton').click(function(event){
console.log("Keep Going");
});
}
HTML:
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Herbal Medicine: Adaptogens</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<link rel="questions" href="store.html">
</head>
<body>
<div class="container">
<p>Intro to Herbal Adaptogens explaining what they are</p>
<button id="startButton">Start</button>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="index.js"></script>
</body>
</html>
I expect the to see "Keep Going" in the console when I press "start" but instead nothing happens at all.
You have the JQuery click() function inside the startQuiz() function. So it won't work unless the outer function (startQuiz()) is run first. You should put it inside a ready function so that it loads once the page is 'ready'.
Change your javascript to look like this:
$(document).ready(function() {
$('#startButton').click(function(event) {
console.log("Keep Going");
});
});
No need to go with jQuery , you can just use js events.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Log Window</title>
</head>
<body>
<script>
function logMe() {console.log('clicked');}
</script>
<button onclick="logMe()">logMe</button>
</body>
</html>
You should put it inside a Jquery click function. This way it will fire when the document loads.
$(document).ready(function() {
$('#startButton').click(function(event) {
console.log("Keep Going");
}
});

html, javascript code works perfectly on my pc browser but not on my windows phone app

I'm trying to make a windows phone 8.1 app that send a get request using html5 css and javascript. the only problem is the my code works on my browser but when I build the app using visual studio the get request is sent only the first time. I have no clue why this happens.
The code for the page is this :
<!DOCTYPE html>
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(document).ready(function()
{
$("button").click(function()
{
$.get("http://192.168.1.100/gpio/0")
});
} );
</script>
</head>
<body>
<button>Send GET request </button>
</body>
</html>
The code that I use for the app is the same with just a few changes :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>App1</title>
<!-- WinJS references -->
<link href="//Microsoft.WinJS.2.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.2.0/js/base.js"></script>
<script src="//Microsoft.WinJS.2.0/js/ui.js"></script>
<!-- App1 references -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
<script src="/js/jquery-1.12.1.js"></script>
<script>
$(document).ready(function () {
$("button").click(function () {
$.get("http://192.168.1.100/gpio/0")
});
});
</script>
</head>
<body>
<button>Send GET request</button>
</body>
</html>

Need some advice with an Shoutcast app using intel XDK

I'm trying to develop an app that will just stream a shoutcast, the deal is I can't make it work, I'm testing my app on a android 4.2 and it seems to not work at all, I'm just doing the example from intel xdk documentation.
Here is the simple code i have made atm:
<!DOCTYPE html>
<html>
<head>
<title>Your New Application</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
<style type="text/css">
* { -webkit-user-select:none; -webkit-tap-highlight-color:rgba(255, 255, 255, 0); }
input, textarea { -webkit-user-select:text; }
body { background-color:white; color:black }
</style>
<script src='intelxdk.js'></script>
<script type="text/javascript">
var onDeviceReady=function(){
intel.xdk.device.hideSplashScreen();
};
document.addEventListener("intel.xdk.device.ready",onDeviceReady,false);
function PlayMe() {
intel.xdk.player.startShoutcast("http://209.9.238.10:8008/",true);
}
</script>
</head>
<body>
<button onClick="PlayMe();">PLAY ME</button>
</body>
</html>
This issue is only seen on Android devices with version 3.0 and above. With the change of the Android web browser and WebView's rendering engine to Webkit, the intel.xdk.startShoutcast() can not successfully executed since it is an internal modification to the browser's engine.
Please use this format, it will just stream a shoutcast without errors,
Here is the simple format I have made:
http://209.9.238.10:8008/;strem.mp3
I have tested my app on an android 4.3 and it seems to work well.

PhoneGap Javascript not working other than in index file

Hi I'm trying to run a javascript function (an alert to test) but it is not firing when in a page other than the index.html.
here is an example of a page that is not firing the javascript alert ( note that < is removed from all of the tags so as to render in stack overflow):
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
<script type="text/javascript" charset="utf-8">
document.addEventListener("deviceready", onDeviceReady, false);
// PhoneGap is loaded and it is now safe to make calls PhoneGap methods
//
function onDeviceReady() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
alert("test");
navigator.notification.alert("PhoneGap is working");
}
</script>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.css" />
<link rel="stylesheet" href="docs/_assets/css/jqm-docs.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="experiments/themeswitcher/jquery.mobile.themeswitcher.js"></script>
<script src="docs/_assets/js/jqm-docs.js"></script>
<script src="http://code.jquery.com/mobile/1.0rc1/jquery.mobile-1.0rc1.min.js"></script>
<link rel="stylesheet" href="n_style.css" />
</head>
<body onload="onBodyLoad()">
</body>
</html>
onDeviceReady only fires once when the app starts up. See documentation:
http://docs.phonegap.com/en/1.0.0/phonegap_events_events.md.html#deviceready
It's the function that indicates PhoneGap is fully loaded.
Your Javascript isn't running because you don't have an onBodyLoad function. I would wrap document.addEventListener("deviceready", onDeviceReady, false); in an onBodyLoad function. Also, if you are having javascript errors, try opening the page in firefox and using firebug to check for errors.

Categories