I 'm using WinJS in multi-device-hybrid app template in one of my page .But the code is not working fine (below is code).
HTML
<a id="facebook">
<img src="data:image/png;base64,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" />
</a>
Javascript-
ready: function (element, options) {
// TODO: Initialize the page here.
document.getElementById("facebook").onclick = function () {
if (checkconnection())
document.getElementById("facebook").href = "https://www.facebook.com/amit.porwal.14";
else
Windows.UI.Popups.MessageDialog("Check your Network Connection").showAsync();
}
function checkconnection() {
var connectivity = Windows.Networking.Connectivity;
var profile = connectivity.NetworkInformation.getInternetConnectionProfile();
if (profile) {
return true;
}
else
return false;
}
when i 'm not using checkconnection() function the app is working fine with navigation to the facebook website.
So is there any restriction on using winjs in multi-device-hybrid template .
I 'm debuging this on android device.
With that i 'm also using
Wins.xhr ,<x-ms-webview>
in my app but none of them is working .
Any API's that begin with Windows.* is a WinRT API and are not part of WinJS. WinJS APIs always start with WinJS.; the Windows. APIs work only on Windows/Windows Phone 8/8.1 and won't work on Android.
WinJS.xhr is just a simple wrapper for XMLHttpRequest, so should work on any system with the DOM API available. You typed Wins.xhr, however, so maybe you just have a typo.
As for , that also is an HTML element specific to the Windows app host, and isn't part of the standard DOM. If you're targeting Android you'll need to use its HTML Webview equivalent.
Related
I have a problem where I want to make my website when you first accessed through a mobile phone message to download the app or website.
What is needed? Can anyone help me solve my problem?
Javascript for example:
You can set a cookie.
<script>
var tehDiv = document.getElemenbyId('adiv');
if (localStorage.getItem('firstTime'){
theDiv.innerHTML='';
}else{
localStorage.setItem('firstTime', 'no');
theDiv.innerHTML='The html that shows download app buttons';
}
</script>
<body>
blablablabla
<div id="adiv">Here will be placed download buttons or not</div>
If need to know if is a mobile there are many scripts to that. For example this one: Detecting iOS / Android Operating system
I am trying to update my Spotify remote control app that is currently using the legacy API to use the new 1.x API. Is it possible using the 1.x API to access information about the currently playing track? models.player.track does not seem to exist anymore (though it's in the documentation).
For the curious, I am using this for my app running in Spotify Desktop which uses websockets to talk with a Python server, which then provides a web interface for phones and tablets to remotely control the instance of Spotify running on the desktop. This works great using the legacy API and I can control playback and get the now playing info from any connected remote. I assume this app is going to stop working at some point soon since Spotify says they are retiring the legacy API. (Unless my assumption that the app will stop working is wrong, then never mind).
Thanks.
It is possible to access the current playing track loading the track property of the Player.
You would do something like this:
require(['$api/models'], function(models) {
function printStatus(track) {
if (track === null) {
console.log('No track currently playing');
} else {
console.log('Now playing: ' + track.name);
}
}
// update on load
models.player.load('track').done(function(p) {
printStatus(p.track);
});
// update on change
models.player.addEventListener('change', function(p) {
printStatus(p.data.track);
});
});
You have a working example in the Tutorial App named Get the currently playing track.
I am developing a Web Application using node.js, express and jade. I have the following jade template which I am seeing using a WebView in a Phonegap application:
doctype mobile
html
head
script(src="cordova-2.1.0.js")
script
var ready = function() {
alert(\'Ready\');
}
document.addEventListener("deviceready", ready);
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
body
block content
h1= title
button(id='vibrateButton', onclick='navigator.notification.vibrate(2000);')Confirm
#services
- each service in services
div.service
a(href=service.link)!= service.name
div.desc= service.description
What this template will produce is a webpage with a list of items (a description and a link) which will be fetched from a mongo database. The page is served using node.js
Now, the cordova script is not loading because the alert ("Ready") is not being displayed. Also, if I hit the button the device won't vibrate and the console will display the following message:
Uncaught TypeError: Cannot call method 'vibrate' of undefined at http://xx.xxx.xx.x:3000/:5
How can I include the Phonegap script using jade? I have tried to load simple scripts with just an alert and it works, but in this case I don't know why it is not working.
Could anyone provide advise please? Thanks.
With recent changes to cordova, you should take a look into InAppBrowser api. That's the recommended way to deal with remote pages embedded in your application.
In the end, you'll probably have a single index.html on the application to make sure the cordova js api is loaded and everything is ok. Then you'll open an InAppBrowser targeting your remote page (remember to whitelist it on config.xml for a better experience!).
The dot after the script is missing. Read this:
"Often you might want large blocks of text within a tag. A good
example is with inline scripts or styles. To do this, just add a .
after the tag (with no preceding space)"
It's taken from the jade-lang reference.
Example:
script.
if (usingJade)
console.log('you are awesome')
else
console.log('use jade')
Will render:
<script>
if (usingJade)
console.log('you are awesome')
else
console.log('use jade')
</script>
these will never work.
the html pages needs to be on the client side( app side ) not in the server side(node).
Example. In a android phonegap proyect on the assets\www folder.
i dont know for wat SO is your app, but
App client side: views, phonegap, jquery .... and all the stuff to request the data to the node server.
Server side: dbStuff, and all the stuff to retrieve the data to the app requests.
hope it helps.
I suspect this is a total newbie question, but I seem to be missing the basics here. I am NOT new to coding and have a lifetime of experience (27 years) with various languages, but the plugin process is eluding me.
I have developed custom bookmarking system in php & js, it works great and I've been using it for months as I develop it.
I simply want to get the url of the page in the active tab and pass it to my php handler. I want my web site script return the html form into the popup. I can think of a thousand ways that "should" work.
ALL the code examples I am finding seem to over-complicate what should be a simple task.
In short I just want:
<script type="text/javascript">
<!--
var loadurl = "http://my.site.com?theUrl=" + window.location;
location.href = loadurl;
//-->
</script>
And have that page show in the popup. So far I'm at a loss. Even tried ajax calls etc.
Can somebody clue me in on how to achieve this simple task? Maybe I can get started writing extensions with the info.
For the record, most of the examples I have found are deprecated under manifest 2.0
Manifest 2.0 introduces a new feature contentSecurityPolicy. All external resources are blocked by default. For the best practice, you should include all needed asset files in the extension. The communication between your extension and your service (php side) is only data using XHR2.
So, In order to make bookmark extension work, I guess you need to something like this:
Add your service's domain to permissions array
{
...
permissions: ['*://my.site.com/*', 'tabs']
}
Move all javascript from popup.html to popup.js. In popup.js, You create a ajax request to your bookmarking service. More document here
function addBookmark(url) {
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://my.site.com/new_bookmark.php?url=" + encodeURIComponent(url), true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
var resp = xhr.responseText;
// handle service result here
}
}
xhr.send();
}
chrome.tabs.getSelected(null,function(tab) {
addBookmark(tab.url);
});
I have a mobile web app using jQuery Mobile 1 and Google Maps API v3. It appears there is a major memory leak when loading Google Maps inside jQuery Mobile. The memory taken by the Google Maps does not get released when the user leaves the map page. So, when the user returns to the map page the memory usage keep growing. This is especially a big issue on mobile web browsers. I test the following on Android and on a desktop version of Chrome. The leak can be triggered as follows:
Navigate to: http://www.mycoursewalk.com/mobile_course_walk/show/25
Click "View Course" and let the map load fully.
Then click the browser back button or the back button on the lower left corner.
Reclick "View Course" and let the map load fully.
Repeat. On every map load you see about 30MB added to the process of Chrome or the mobile browser.
How can I fix this? I can't find a Map API unload.
Thanks,
Nick,
I think you are calling createMap every time instead of checking whether or not the map already exists and re-using the object.
Try something like this:
var mapDisplay = {
mapCreated : false,
init: function() {
//some init stuff
},
showMap: function() {
if(!mapDisplay.mapCreated) {
mapDisplay._createMap();
mapDisplay.mapCreated = true;
}
$("#my_map").show();
$('#my_map').gmap('refresh');
},
_createMap : function() {
//options would be a json config object
$('#my_map').gmap(options);
},
//all the other methods you need
}
which would work with the libraries used in this jQuery gmap demo application