I'm new to phonegap and I'm still trying to understand the basics. I want to make a simple app that when it starts up it checks to see if it has an internet connection and if it does I want it to redirect to a website or load that website in the web view. If it doesn't have an internet connection, then I want it to stay on the app and just display static content.
Here's what I have so far.
<!DOCTYPE html>
<html>
<head>
<title>Online Example</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.1.0.js"></script>
<script type="text/javascript" charset="utf-8">
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
// Cordova is loaded and it is now safe to make calls Cordova methods
//
function onDeviceReady() {
document.addEventListener("online", onOnline, false);
}
// Handle the online event example
//
function onOnline() {
window.location.href ="http://google.com";
}
</script>
</head>
<body onload="onLoad()">
</body>
</html>
I also set OpenAllWhitelistURLsInWebView to true.
Does the online event only work if the app was offline then gets called when the app goes back online?
Thanks in advance!
No, Online event is fired when the app starts if internet is connected and it is also called when the app goes from offline to online mode.
If you want to open a external website in phonegap you can add a child browser plugin for the same Or else you can open a website in a embedded webveiw. window.location.href doesn't work in Phonegap.
I don't know whether you are working on iOS or Android so the link for iOS and for Android
Move your wiring up of the online event handler (i.e. this line):
document.addEventListener("online", onOnline, false);
up into your onLoad() function. I found that the online/offline events need to be registered on load, rather than later for some reason.
Related
I am having some problems with Tizen wearable Web Widgets.
I just created a sample project with HTML + JS and tried to update page on events described in life-cycle -> On load / visibility change
the sample code can be found at: https://github.com/Ryccoo/widget-test/blob/master/widget/StockQuote/js/main.js
When I add widget I can see the text "something" -> meaning that onload function was successfully called.
However swiping to another widget and back does not trigger the visibilityChange event as described.
How do I correctly upload the contents when user scrolls to this widget ?
Another question is just how to debug the web widgets? You cant run debug to interactively debug the program with widgets (only for web apps) and when I want to print something to console I only see
The web console logging API (console.log, console.info, console.warn, console.error) has been disabled.
To activate it, you should launch project with Debug mode.
How do I launch the widget in Debug mode ?
Thank you
Web Widget Debug feature is not Supported yet on Tizen Studio.
But I've test the code for Visibility Change event, and It worked fine on my Samsung Gear S3. Visibility Change callback is being called every time I change between widgets. You may give this code sample a try:
Project folder > Widget folder> index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<div class="main-container Panel">
<div id="Visibility"> Visibilty: Init </div>
</div>
<script src="js/main.js"></script>
</body>
</html>
Project folder > Widget folder> js > main.js
window.onload = function() {
};
document.addEventListener('visibilitychange', visibilitychange);
function visibilitychange() {
if (document.visibilityState === 'hidden') {
document.getElementById("Visibility").textContent = "Hidden";
} else {
document.getElementById("Visibility").textContent = "Visible";
}
}
I've made page with sidebar, which can be hidden. I added JQ mobile becouse I need swipe event for handling it on mobile devices, but JQ mobile broke the page completely.
All forms are submitted by AJAX (I found event for forms and links in G Chrome- developers) and all links also tries to load content by AJAX.
Is there any way how to disable it for whole page (some global config, not just with data-ajax=”false” which doesn't work for me at all)?
Could anyone help me fixing that? Thank you :)
After few hours browsing documentation, I've found, what I needed. I just needed to move config code before JQ Mobile script loading.
Now it works;
<script src="files/script/lib/jquery.min.js"></script>
<script type="text/javascript">
$(document).on("mobileinit", function () {
$.extend($.mobile, {autoInitializePage: false});
});
</script>
<script src="files/script/lib/jquery-mobile.min.js"></script>
I would like to remove the "Mark Task Complete" button from the Task Ribbon on my Project Web App to prevent users from clicking on it. I have been successful in adding a custom JavaScript Web Part to hide the button after a 200 millisecond delay because the JavaScript has to wait for the page to load. However, this not only leads to a bad user experience but also it is not guaranteed that the page will fully load in 200 milliseconds and thus leaves the possibility of the users seeing the button and being able to interact with it. Here is that JavaScript.
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("li.ms-cui-tt a:eq(1)").trigger("click");
});
window.onload = function(){
setTimeout(function(){
document.getElementById('Ribbon.ContextualTabs.MyWork.Home.Tasks.MarkComplete-Large').style.display = 'none';
}, 200);
};
</script>
</body>
</html>
Is there a way to accomplish the desired affect without using a delay?
You can use CSS for the same result, note that you have to substitute the dot in the class name with \.
It should look a bit like this (In a Scritp Editor Web Part on the Page):
<style type="text/css">
#Ribbon.ContextualTabs.MyWork.Home.Tasks.MarkComplete-Large {
display: none
}
</style>
I'm trying to generate Bing map ajax scripts on the fly depending on user selections in an access form. I would like to be able to display the map in an Access web browser control.
The problem is that two identical looking htm files act differently.
Good.htm loads in access, IE, firefox and opera fine.
Auto.htm, the one generated by code, opens in opera, firefox with no bugs in firefly, but not in access. It opens in IE but with the pop-up "Internet Explorer restricted this webpage from running scripts or ActiveX controls". When I click the "Allow blocked content" button it loads fine.
It will not load in access, if I put buttons in they will show, but the map won't.
I wrote a program to check both files for any differences in characters, there are none.
I can copy the script from auto.htm and paste it into good.htm and it will still be good.
One thing I did notice though, is that the properties that windows reports for good.htm, oddly, has "This file came from another computer and might be blocked...". If I click "unblock" then it will no longer work. auto.htm doesn't have that restriction.
I made good.htm by copying the html from "Bing Maps V7 Interactive SDK" and pasting it into a text file, them changing the extension to .htm.
For what it's worh, here's the script
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"enter code here"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Map view (bounds)</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0"></script>
<script type="text/javascript">
var map = null;
function getMap()
{
var boundingBox = Microsoft.Maps.LocationRect.fromString("42.3262, -83.8191, 42.2322, -83.6713");
map = new Microsoft.Maps.Map(document.getElementById('myMap'),
{credentials: 'my basic developer key',
bounds: boundingBox,
heigth: 590,
width: 850
});
}
</script>
</head>
<body onload="getMap();">
<div id='myMap' style="position:relative; width:850px; height:590px;"></div>
</body>
</html>
You could try adding the "Mark Of the Web":
Http://msdn.microsoft.com/en-us/library/ms537628(v=vs.85).aspx
I have a page where I want to redirect users to the Instagram app when it's installed. That part works well, but when the user doesn't have the app installed it prompts them to go to the app store and download the app, which is not what I want.
I'm seeing this behavior on OS X in Safari, and the HTML involved is ({username} would be populated by my application based on the user submitting the form):
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="refresh" content="0; url=instagram://user?username={username}">
</head>
<body>
<div>
Taking you to Instagram...
</div>
<script src="https://code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
setTimeout(function() {
window.location = "https://instagram.com/{username}";
}, 200);
});
</script>
</body>
</html>
EDIT
Specifically, what's happening is the line <meta http-equiv="refresh" content="0; url=instagram://user?username={username}"> is showing the following dialog:
I'd like for that dialog not to display and let the "window.location =" in the take over and redirect the user to Instagram within the browser.
My question is how can I modify the "instagram://" redirect to not ask users to install the Instagram app on their machine?
There is no (official) way to detect in the browser if an app (like Instagram) is installed and thus you cannot use a custom url scheme without offering an alternative. You should let the choice to the end-user and prompt to open the website (https scheme) or the app (Instagram scheme).
The user will know if the app is installed.
If you know already that the user has the Instagram app installed, you can look at the browser agent to see if you are on an iOS device.