I'm doing one Ionic App and I'm trying to load some JS/CSS files but only if is iPad. Something like this:
<!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>Meeting App</title>
<!-- compiled css output -->
<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>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
// if ( is_ipad() ) :
<script src="css/just-ipad.css"></script>
<script src="js/just-ipad.js"></script>
// endif;
</head>
<body ng-app="starter">
<ion-nav-bar class="bar-stable" align-title="center">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<ion-nav-view></ion-nav-view>
</body>
</html>
I think this could be do it in the index.html. There will be files used in all the iPad views but not in the mobile views.
I know that I can use the Platform Classes but this doesn't cover my needs. I'm very new in Ionic and I don't know if this is possible.
Any help is welcome!
To add OR load file dynamically
Check for device if it is ipad ?
If its true then add your desired files this way (Script OR style).
If(ionic.Platform.isIPad()){
var script = document.createElement("script");
script.src = "https://maps.google.com/maps/api/js?&callback=loadGoogleMapsApiReady";
document.getElementsByTagName("head")[0].appendChild(script);
}
Regards.
I do believe you are looking for ionic.Platform.isIPad(); method as can be seen in the link provided.
Documentation
isIPad()
Returns: boolean Whether we are running on iPad.
Usage
It seems that they have some other helper functions as can be seen from the code snippet from their site below.
angular.module('PlatformApp', ['ionic'])
.controller('PlatformCtrl', function($scope) {
ionic.Platform.ready(function(){
// will execute when device is ready, or immediately if the device is already ready.
});
var deviceInformation = ionic.Platform.device();
var isWebView = ionic.Platform.isWebView();
var isIPad = ionic.Platform.isIPad();
var isIOS = ionic.Platform.isIOS();
var isAndroid = ionic.Platform.isAndroid();
var isWindowsPhone = ionic.Platform.isWindowsPhone();
var currentPlatform = ionic.Platform.platform();
var currentPlatformVersion = ionic.Platform.version();
ionic.Platform.exitApp(); // stops the app
});
ProTip
I simply Googled the following:
ionic check platform
and clicked the first link. In the future, consider using Google first.
Reading Material
ionic.Platform
Related
I'm having problems in using mathquill on my website.
I'm new to this.
I'm stuck in this part
<link rel="stylesheet" type="text/css" href="/path/to/mathquill.css">`
<script src="/path/to/mathquill.min.js"></script>
I dont know what to put on the hrefs because I'm not seeing those files from mathquill file i got from github..
i downloaded the latest mathquill files and its inside htdocs(xampp) or www(wamp) together with my index.php.
Do i have to place my index.php inside mqthquill-0.10.1 folder?
Here is my
<link rel="stylesheet" href="/path/to/mathquill.css"/>
<script src="jquery-3.2.1.min.js"></script>
<script src="/path/to/mathquill.js"></script>
I appreciate if someone could give me the steps on how to use mathquill.
thanks in advance
Option 1
You can either download the mathquill.css and mathquill.js files from github and use them from your directory.
If you have your folder (directory) structure as below:
appFolder
.. scripts
.... mathquill.js
.... index.js
.. css
.... mathquill.css
myPage.html
Here's how you would reference the CSS and JS files:
<link rel="stylesheet" type="text/css" href="/css/mathquill.css">`
<script src="/scripts/mathquill.min.js"></script>
An easy way to check if your paths are correct is to put the entire URL in the browser's address bar. For example, if you are browsing the page as:
www.mydomain.com/mypage.html
The links to css and js files in the example folder structure I mentioned above would be:
www.mydomain.com/scripts/mathquill.js
www.mydomain.com/css/mathquill.css
Option 2
You could use the CDN to get the JS and CSS files on your page. Just copy the below two lines on to your html page, and you are ready to go.
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/mathquill.min.css">`
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/mathquill.min.js" type="text/javascript"></script>
<!-- COPY AND PAST THIS CODE HTML IN SOME EDITOR FOR BETTER VISUALIZATION, AFTER RUN-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Run Mathquill</title>
<!-- YOU NEED mathquill.css , jquery and mathquill.js SEARCH AND PICK IT SOMEWHERE, SEARCH ON THE WEB IF THIS DOWN NOT RUN-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/mathquill.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathquill/0.10.1/mathquill.js"></script>
<!-- INFORM THE LATEST AVERSION INTERFACE WITH THIS CODE -->
<script>
var MQ = MathQuill.getInterface(2);
</script>
</head>
<body>
<!--EXAMPLE COMMON TEXT TRANSFORMED WITH MATHQUILL -->
<p>Solve <span id="problem">f(x) = ax^2 + bx + c + = 0</span>.</p>
<script>
var problemSpan = document.getElementById('problem');
MQ.StaticMath(problemSpan);
</script>
<!-- EXAMPLE TO CREATE AN EDITABLE MATH FIELD -->
<p><span id="answer">x=</span></p>
<script>
var answerSpan = document.getElementById('answer');
var answerMathField = MQ.MathField(answerSpan, {
handlers: {
edit: function() {
var enteredMath = answerMathField.latex(); // Get entered math in LaTeX format
checkAnswer(enteredMath);
}
}
});
</script>
</body>
</html>
My code is only shown for a split second after returning ionic serve and goes blank. I've everything needed to run this like nodejs, cordova, ionic, jdk, etc.
I'm new to ionic and would appreciate if someone can help me solve this.
This was run on internet explorer.
<!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">
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<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>
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
</head>
<body ng-app="starter">
<h1>asdf</h1>
<!--
The nav bar that will be updated as we navigate between views.
-->
<ion-nav-bar class="bar-stable">
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<!--
The views will be rendered in the <ion-nav-view> directive below
Templates are in the /templates folder (but you could also
have templates inline in this html file if you'd like).
-->
<ion-nav-view></ion-nav-view>
</body>
</html>
really you are very lost.
if you try to show
<h1>asdf</h1>
well that disappear because is replaced by the angular app in your code
<!-- your app's js -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/services.js"></script>
you do write your in angularjs for that you can check the docs of angular and ionic.
you can retire the class of body and write direct in index but that is the really bad way
Am absolutely new to Ionic and Firebase and was trying to create a Sample Project where I am trying to query from the Firebase Database using a check on a value. To make it clear since Firebase doesn't allow a WHERE clause in the SELECT query like conditions, so was trying to learn how to deal with that.
Here is a snapshot of my Firebase database.
My intention is simply to display on my View whichever data has the address value of 700030 in an array as we do in AngularJS using ng-repeat.
var app = angular.module('starter', ['ionic', 'firebase'])
app.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
app.controller('MainCtrl', function($scope, $firebaseArray){
var ref = new Firebase('https://helpee-70271.firebaseio.com');
$scope.result = $firebaseArray(ref);
ref.orderByChild("address").on("child_added", function(data) {
console.log("Initially :" + JSON.stringify($scope.result));
//console.log(data.val().address);
if(data.val().address == "700030"){
console.log(data.val().address);
$scope.result.push(data.val());
}
console.log(JSON.stringify($scope.result));
});
});
<!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>
<!--Firebase addition start -->
<script src="https://cdn.firebase.com/js/client/2.2.2/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script>
<!--Firebase addition end -->
<!-- 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 text-center">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content ng-controller="MainCtrl">
<div>
<div ng-repeat ="results in result">
<div>{{results.name}}</div>
<div>{{results.phNumber}}</div>
</div>
</div>
</ion-content>
</ion-pane>
</body>
</html>
Here is my Code snippet. The problem am getting is that while the checking and retrieving of data is being done properly but at the View am seeing that the array containing all the elements irrespective of the Address check is getting printed first followed by the values that should be printed.
Here is the snapshot of the View and the console of the browser
Can anyone please help me how to correct this issue and explain me where am going wrong? Would be highly indebted as am really new to this and am willing to learn. Thanks in advance!!
Your problem is that you are filling your array twice.
First with all the data using this line:
$scope.result = $firebaseArray(ref);
And secondly you add the data you actually want in the child_added listener:
$scope.result.push(data.val());
So the simple solution is to change that first line to:
$scope.result = [];
My ng-click events are firing twice in my Ionic app and I have not been able to figure out how to fix this. To test this error, I have compressed my code to the following (the error is still occurring in the iOS emulator and on the iOS device, however not in the browser nor on android):
Running version (rendered by browser, error is not produced): play.ionic.io/app/2fc7300bf4a6
JS
(function() {
var app = angular.module('nh-launch', ['ionic']);
app.controller('testCtrl', function($scope) {
$scope.testClick = function () {
alert("hello");
};
});
}());
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>NoHarm Safety Application</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>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="lib/angular-resource/angular-resource.js"></script>
<script src="lib/angular-random-string/src/angular-random-string.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="nh-launch">
<ion-pane>
<ion-content>
<div ng-controller="testCtrl">
<button ng-click="testClick()" class="button button-block button-calm">Test Click</button>
</div>
</ion-content>
</ion-pane>
</body>
</html>
Help is greatly appreciated!
This is a current bug with ionic. It is due to the alert() and $window.alert() functions. I have posted the issue here: https://github.com/driftyco/ionic/issues/4345#issuecomment-139026496
I am new to OPEN UI5, I have done the setup of importing Open UI5 in eclipse keepler version.
I can execute sample application inside my Javascript views but if I try using sap.ui.core library then I am unable to see the options/Classes inside it but I am able to see commons package and its content.
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<!-- Bootstrap Script to load Open UI5 at Runtime (Including library and Themes)-->
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons,sap.ui.table,sap.ui.ux3"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- Application Script (specific to the application ) -->
<script type="text/javascript">
sap.ui.localResources("TelephoneDirectory");
var view = sap.ui.view({id : "loginPage",
viewName : "TelephoneDirectory.LoginPage",
type : sap.ui.core.mvc.ViewType.JS});
view.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
Am I missing some bootstrap files ?
I want that the sap.ui.core functions will be visible in eclipse when I press ctrl+space.