I've built a Cordova 2.0 App for iOS with jQuery Mobile 1.2. Framework inside. I've successfully installed the Childbrowser plugin (in this version and with this guide. Thanks for the help from these nice guys at this point,
Now I can call the Childbrowser directly with an onclick event with this javascript in the head:
<script type="text/javascript">
app.initialize();
function launchCB() {
if(window.plugins.childBrowser != null) {
window.plugins.childBrowser.onLocationChange = function(loc){};
window.plugins.childBrowser.onClose = function(){};
window.plugins.childBrowser.onOpenExternal = function(){};
window.plugins.childBrowser.showWebPage('http://www.google.de');
} else {
alert('not found');
}
}
</script>
OR directly with for example
Google
Now I want to open all links with the attribute target="_blank". Therefore I've found this thread and picked up the solution by Charlie Gorichanaz.
But when I start the application in the iPhone simulator, all I get is the sandclock or rather the spinning wheel of death of jQuery mobile.
I'm happy for every helpful advice, I never coded before this app. Here's my index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name = "format-detection" content = "telephone=no"/>
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width;" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Cordova</title>
<script type="text/javascript" src="cordova-2.0.0.js"></script>
<script type="text/javascript" src="ChildBrowser.js"></script>
<gap:plugin name="ChildBrowser" /> <!-- latest release -->
<script type="text/javascript" charset="utf-8" src="EmailComposer.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
function launchCB() {
if(window.plugins.childBrowser != null) {
window.plugins.childBrowser.onLocationChange = function(loc){};
window.plugins.childBrowser.onClose = function(){};
window.plugins.childBrowser.onOpenExternal = function(){};
window.plugins.childBrowser.showWebPage('http://www.google.de');
} else {
alert('not found');
}
}
/*
var args;
cordova.exec(null, null, "EmailComposer", "showEmailComposer", [args]);
*/
</script>
<!-- jQuery mobile -->
<link type="text/css" rel="stylesheet" media="screen" href="jqm/jquery.mobile-1.2.0-alpha.1.min.css">
<link type="text/css" rel="stylesheet" media="screen" href="jqm/Changes.css">
<script type="text/javascript" src="jqm/jquery-1.7.2.min.js"></script>
<script>
// for using childbrowser to open pdf on remote sites
$(document).bind( "mobileinit", function() {
$.mobile.allowCrossDomainPages = true;
}
);
// the function i want to implement
$(document).bind("pageinit", function() {
onDeviceReady();
});
function onDeviceReady() {
var root = this;
cb = window.plugins.childBrowser;
if (cb != null) {
$('a[target="_blank"]').click(function(event) {
cb.showWebPage($(this).attr('href'));
event.preventDefault();
event.stopImmediatePropagation();
return false;
});
}
}
// don't know is this thing is right in place...
document.addEventListener("deviceready", onDeviceReady, false);
</script>
<script src="jqm/jquery.mobile-1.2.0-alpha.1.min.js"></script>
</head>
<body>
<section data-role="page" id="home" data-theme="a" data-position="fixed">
<div data-role="header"> <!-- header -->
<h1>Test</h1>
<div style="position:absolute; top:0px; right:5px;">
<a href="#about" data-transition="pop">
<img src="images/schlange-sw.png" alt="Schlange">
</a>
</div>
</div>
<!-- /header -->
<div data-role="content"> <!-- content -->
<a id="domainbut" onclick='launchCB()'>Working </a>
not working
</div>
<!-- content -->
<div data-role="footer" data-theme="a" data-position="fixed"></div>
</section>
<section data-role="dialog" id="about" data-close-btn-text="Close This Dialog">
<div data-role="header">
<h1>Über</h1>
</div>
<div data-role="content">
<h1 style="text-align: center;"></h1>
<div align="center">
</div>
<p style="text-align: center;">The owner of this app</p>
<button onclick="cordova.exec(null, null, 'EmailComposer', 'showEmailComposer', [args]);">Compose Email</button>
<p>
OK
</p>
</div>
</section>
</body>
</html>
Thank you in advance.
Regards
Kieke
#Kieke, if you decide to do away with ChildBrowser, I found the following worked for me.
NOTE: Assuming you are using PhoneGap 2.x
In your Cordova.plist set OpenAllWhitelistURLsInWebView = YES and set your ExternalHosts list, * is fine. Anything you want the webview not to block (viewed in Safari or in the app) has to be in your ExternalHosts list.
In your MainViewController.m add the following code to the bottom, you can manually redirect any URL to Safari, see the if statement for www.loadDomainInSafari.com:
- (BOOL) webView:(UIWebView*)theWebView shouldStartLoadWithRequest:(NSURLRequest*)request navigationType:(UIWebViewNavigationType)navigationType
{
NSURL *requestURL =[ [ request URL ] retain ];
NSString *host = [ [ requestURL host] retain ];
// if YES, directs to WebView
// otherwise, takes OpenAllWhitelistURLsInWebView setting
// if www.loadDomainInSafari.com, open in Safari by explictly stating NO.
// otherwise take OpenAllWhitelistURLsInWebView setting of YES
if ([host isEqualToString:#"www.loadDomainInSafari.com"]) {
return ![ [ UIApplication sharedApplication ] openURL: [ requestURL autorelease] ];
}
[ requestURL release ];
return [super webView:theWebView shouldStartLoadWithRequest:request navigationType:navigationType];
}
In your Cordova.plist, do you have OpenAllWhitelistURLsInWebView = YES and are all the domains (eg. www.google.com, localhost) you are connecting to are in your ExternalHosts list?
Look in the console of your Xcode debugger as #Littm describes, you will see if your link are being blocked because they aren't in the whitelist.
You can also check your system.log as well, tail /var/log/system.log for any errors after you execute.
Related
controller.js
var app = angular.module('startervideo', ['ionic','ngCordova'])
app.controller('VideoCtrl', function($scope,$cordovaCapture) {
$scope.data = {
videoPath: ""
};
$scope.captureVideo = $scope.captureVideo = function() {
var options = {duration: 15 };
$cordovaCapture.captureVideo(options).then(
function(videoData) {
// Success! Video data is here
$scope.data.videoPath = "file:/" + videoData[0].fullPath;
console.log(videoData);
}, function(err) {
// An error occurred. Show a message to the user
console.log(err);
});
}
});
app.js
var app = angular.module('starter', ['ionic','ngCordova','startervideo'])
app.directive("cordovaVideo", function () {
return {
restrict: 'AEC',
scope: {src: '='},
link: function(scope, element, attrs) {
scope.$watch('src', function(newVal, oldVal) {
if (scope.src != "") {
// Create a div object
var div = document.createElement('div');
div.innerHTML = "<video id=\"myCordovaVideo\"controls>"+
"<source src=\"" + scope.src + "\" type=\"video/quicktime\">"+ "</video>";
// Delete previous video if exists
var previousDiv = document.getElementById('myCordovaVideo');
if (previousDiv)
previousDiv.remove();
// Append new <video> tag into the DOM
element.append(div);
}
}); }
} });
#myCordovaVideo {
background: red;
width: 100%;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controller.js"></script>
</head>
<body ng-app="starter" ng-controller="VideoCtrl">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">VideoPro</h1>
</ion-header-bar>
<ion-content>
<button class="button button-calm button-full"
ng-click="captureVideo()">Capture Video</button>
<cordova-video src="data.videoPath"></cordova-video>
</ion-content>
</ion-pane>
</body>
</html>
Hi everyone I am new in ionic1 framework been trying to develop an application that can capture video display them on the UI and ultimately store in a remote serve, so far the code that I have can capture video but it does not display it on the UI.The example that I am following comes from ionic cookbook I am in desperate need of help here is the code that I have
I've created a similar Ionic app that captures video and uploads it to a remote server. You may find it useful
https://github.com/aliasav/ionic-video
I would like to create a ionic project for wifi-network-detection. I came across some plugins like wifiwizards,cordova plugin diagnostic to check wifi connection and also cordova plugin hotspot. But how should I include these plugins to my ionic project. Should I create a blank ionic project to add these plugins or how should I put these plugins to my index.html and app.js file. Please someone help me with these as I'm new to these.
Sample Project:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!--ngCordova script-->
<script src = "lib/ngCordova/dist/ng-cordova.min.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content padding = "true">
<div class = "card">
<div class = "item item-text-wrap">
<h1>Network: {{network}}</h1>
</div>
</div>
<div class = "card">
<div class = "item item-text-wrap">
<ion-toggle ng-model = "isOnline" ng-checked = "item.checked">
<h1 ng-show = "isOnline">I'm into Wifi</h1>
<h1 ng-show = "! isOnline">I'm out off Wifi</h1>
</ion-toggle>
</div>
</div>
</ion-content>
</ion-pane>
</body>
</html>
app.js where I included the plugin(ngCordova)
angular.module('starter', ['ionic', 'ngCordova'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.controller('MyCtrl', function($scope, $cordovaNetwork, $rootScope){
document.addEventListener("deviceready", function(){
$scope.network = $cordovaNetwork.getNetwork();
$scope.isOnline = $cordovaNetwork.isOnline();
$scope.$apply();
//listen for onloine event
$rootscope.$on('$cordovaNetwork:online', function(event, networkState){
$scope.isOnline = true;
$scope.network = $cordovaNetwork.getNetwork();
$scope.$apply();
})
//listen for offline event
$rootScope.$on('$cordovaNetwork:offline', function(event, networkState){
console.log("got offline");
$scope.isOnline = false;
$scope.network = $cordovaNetwork.getNetwork();
$scope.$apply();
})
}, false);
});
Now how to write to check for the wifi detection and connectivity. The plugin I used is the cordova-network-information
Choose a template to start from (blank, sidemenu, tabs etc). Create your new project using ionic start [name] [templateName] step into the folder and add the plugins you need by calling ionic plugin add [plugin].
Now read the documentation for the plugins and start by implementing the examples they often show in their github repo. Then modify to your needs.
I am trying to create a simple that will read the data from a qr code, the apps is working perfectly, it can open the camera and capture the image, the problem is, it cannot show the data/data is blank in the alert as below code.
this is how i do it
cordova plugin add https://github.com/wildabeast/BarcodeScanner.git
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="lib/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
<div class="card">
<div class="item" ng-controller="ScanCtrl">
<button class="button button-block button-positive" ng-click="scanBarcode()">
<i class="icon ion-qr-scanner"></i>
Scan With Scope
</button>
</div>
</div>
</ion-content>
</ion-pane>
</body>
</html>
app.js
angular.module('starter', ['ionic', 'starter.controllers', 'ngCordova'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
controllers.js
angular.module('starter.controllers', [])
.controller('ScanCtrl', function($scope, $cordovaBarcodeScanner){
$scope.scanBarcode = function(){
$cordovaBarcodeScanner.scan().then(function(imgData){
alert(imgData.text);
},function(error){
alert("Error");
}
);
}
});
Any helps would really appreciated.
I have an desktop application using swiper to slide page, but when I put a select tag in slide page ,the select tag can not pop the drop-drown box, anyone has happend the problem?
Thanks advance!
here demo is:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="styles/swiper/idangerous.swiper.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"> </script>
<!-- 翻页 依赖jquery -->
<script type="text/javascript" src="js/swiper/idangerous.swiper-1.9.js"></script>
<title>swiper demo</title>
<script type="text/javascript">
$(function(){
$('.swiper-container, .swiper-slide').css({
height: ($(window).height()) + 'px',
width: '100%'
});
var mySwiper = $('.swiper-container').swiper({
//Your options here:
mode:'horizontal',
loop: false,
keyboardControl: true,
// mousewheelControl: true,
onSlideChangeStart: function(swiper){
pageCurrentNum = swiper.realIndex;
$('#currentPage').text(pageCurrentNum + 1);
gridster = null;
gridster = $('#gridster' + pageCurrentNum +'>ul').gridster(gridsterOpts).data('gridster');
if(!confingInfo.isDebug){
gridster.disable();
}
},
});
})
</script>
</head>
<body>
<div class="swiper-container responsive">
<div class="swiper-wrapper" style="background:red;">
<!--First Slide-->
<div class="swiper-slide ">
page1
<select>
<option>test1</option>
<option>test2</option>
<option>test3</option>
</select>
</div>
<!--Second Slide-->
<div class="swiper-slide">
page2
</div>
</div>
</div>
</body>
</html>
I solved the problem by using the codes underline:
$('.swiper-slide select').on('mousedown touchstart MSPointerDown', function(e){
e.stopPropagation();
});
Hope this can help you who has happened the same problem like me!
I know this is old question.
But on Swiper 3, Dean's answer does not work.
My solution is add class="swiper-no-swiping" to SELECT tag.
Hope this helps.
Or if you don't need the touch events on desktop, you can disable it with the option simulateTouch.
See: http://idangero.us/swiper/api/
I would like to append some code to a page using jQuery/jQuery mobile,
but I am tripping up on some of the page() and pageshow and refresh methods.
Here is my code. you can cut, paste and run as is.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b2/jquery.mobile-1.0b2.min.js"></script>
<script>
//$(document).ready(function() // get error when I use this
$('div').live('pageshow', function () {
function fnCreateGroups(){
var section = "<p>and add a whole bunch of html code...</p>";
myClone = $(section);
alert((myClone).html()); // this works
myClone.appendTo("#placeholder").page(); // but not appending
}
fnCreateGroups();
});
</script>
</head>
<body>
<div data-role="page">
<div id="placeholder">
<div data-role="content">
<div id="placeholder">this is a small amount of html code.</div>
</div>
</div>
</div>
</body>
</html>
Beta2 release notes:
http://jquerymobile.com/blog/2011/08/03/jquery-mobile-beta-2-released/
instead of:
myClone.appendTo("#placeholder").page();
try
myClone.appendTo("#placeholder").trigger('create');
From your comment:
You are running the live() on all div's
$('div').live('pageshow', function ()
try using the page id instead
$('#change_this_page_only').live('pageshow', function ()
and this:
<div data-role="page">
to something like this:
<div data-role="page" id="change_this_page_only">