As per the FAQ, its possible to use a Kendo UI widget in a mobile application. I tried this by including references to these js scripts:
jquery-1.7.1.js
kendo.core.js
kendo.fx.js
kendo.popup.js
kendo.calendar.js
kendo.datepicker.js
and initialized it using:
$("#datePicker").kendoDatePicker();
but it never gets rendered correctly. Am I missing something? Any help is appreciated.
Yo
I am not sure what you might miss - here you can see all the JavaScript dependencies.
Also make sure you have added the CSS files.
<link href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css" rel="stylesheet" />
<link href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.mobile.all.min.css" rel="stylesheet" />
It might sound funny but did u create a kendo Application object(u have'nt mentioned that u did in your question), if u did not, create a kendo application object, something like -
var application = new kendo.mobile.Application($(document).body, { transition:"slide" });
Related
I'm developing an android app using cordova.
The index.html has the following:
<!DOCTYPE html>
<html>
<head>
<title>Mobile</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link type="text/css" rel="stylesheet" media="all" href="/style.css">
...
My problems concerns the link tag. Although logcat output shows the embedhttp server serving up the style.css, the styles don't get applied to the html.
In contrast, the js files I include, seem to be working perfectly fine.
<body>
<script type="text/javascript" src="/cordova.js"></script>
<script type="text/javascript" src="/lib/jquery-2.1.0.min.js"></script>
...
Has anyone else run into this issue?
I was experiencing the same problem and I solved writing the path to the images relative to css file location and not relative to .HTML file location.
I have the following structure:
css
index.css
images
mage1.png
index.html
My css class, declared inside índex.css file, must be like this one:
body {
background: url('../images/image1.png');
}
What you have to be aware of is that cordova counts relative paths differently than your normal browser. So I would recommend not using relative paths for images but use the absolute path from the project "home". Ex:
body {
background: url('images/image1.png');
}
This worked for me as I needed to keep a functioning version for a webapp as well as for a cordova nativified app.
I am trying to add some conditional css for device detecting, because of some conflicts in desktop and android tablet landscape res
- if android_device?
:css
#media only screen and (max-width : 1280px) and (-webkit-device-pixel-ratio:2) {
/*CSS*/
}
can any one help me out where I have to use this check?
I got this reference from this url:
URL
There is no way of detecting an operating system or web browser using strictly CSS.
I'd recommend using Javascript to detect the web browser / operating system, and attach classes to the <body> of the page accordingly.
You can then write CSS specific to each use case, which will only be honored if that particular criteria is encountered.
Here is an example on jsFiddle.
There is actually a nice way I found useful which is to use conditional media queries in your HTML as follows:
<html>
<head>
<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
<link rel="stylesheet" media="(orientation: portrait)" href="portrait.css">
<link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">
</head>
</html>
I believe it solves your problem
Source: github.com/googlesamples/web-fundamentals
Following code is invalid css:
- if android_device?
:css
If you want to write specific styles for desktop and android devices then:
1) you can directly include desktop styles without any media query in css.
2)Styles which ar specific to android device can be included in between media queries as
#media only screen and (min-device-width : 480px) and (max-device-width : 800px) {
/*CSS */
}
I have a WebView inside my android app, and this WebView is running a website with a fair bit of Javascript on it. Users have reported high power consumption when my app is running in the background, and I expect it is due to this javascript. However, I don't want to completely unload or remove the WebView, as this would hurt the time-to-resume.
Is there any way to selectively turn off Javascript and/or disable the WebView completely when the app is in the background (onPause())?
Accoring to http://www.mcseven.me/2011/12/how-to-kill-an-android-webview/ the only working way is to redirect to empty page with no javascript (and return back after resume).
In case of PhoneGap, the page should contain a code to return itself:
<!DOCTYPE html><html><head>
<script type="text/javascript" src="js/phonegap/cordova-2.9.0.js"></script>
<script type="text/javascript" src="js/jquery/jquery-1.9.1.min.js"></script>
</head><body>
<script type="application/javascript">
$(document).on('deviceready', function() {
$(document).on('resume', function() {
return history.back ? history.back() : history.go(-1);
});
});
</script>
</body></html>
Update: The above is for Cordova 2.x.x. In Cordova 3.x.x (not sure if since 3.0.0, but for sure in currect 3.7.x) you can simply add KeepRunning preference in your configuration XML:
<preference name="keepRunning" value="false" />
This will pause all JS timers until the APP is resumed again; see https://stackoverflow.com/a/21629586/2011448.
I have created a 9-patch image (splash.9.png) for my splash screen. The issue is, whenever I use this splash image, the app doesn't go past the splash screen. However, using a non-9patch image makes the app work. The same 9-patch image without that .9 extension also makes the app work. What is possibly wrong??
Code:
public class NafapplicationActivity extends DroidGap {
/** Called when the activity is first created. */
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.setIntegerProperty("splashscreen", R.drawable.splash);
super.loadUrl("file:///android_asset/www/index.html");
}
}
index.html :
<!DOCTYPE html>
<!--<html manifest="naf.manifest">-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Naf</title>
<script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script>
</head>
<body>
Hello World!!
</body>
</html>
Official Rep from PhoneGap says, in response to the question "Does PhoneGap Build support the use of 9-patch images":
The only platform that seems to support them is Android. Since we strive for cross platform currently it seems to be a bit of a toss up. However it is something we may look into further down the road.
Taken from: http://community.phonegap.com/nitobi/topics/does_phonegap_build_support_the_use_of_9_patch_images
So, to answer your question: Your splash doesn't work when it is a .9.png because PhoneGap doesn't, and may never, support 9-patch images because Android is the only major Platform to support them and PhoneGap is a Cross-Platform Framework.
Hope that helps!
I'm trying to access the data inside the assets/css from an external HTML file.
The process goes like this:
<html>
<head>
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, height=device-height, user-scalable=yes" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>ola</title>
<link rel="stylesheet" type="text/css" href="file:///android_asset/css/main.css" />
<link rel="stylesheet" type="text/css" href="file:///android_asset/css/sch.css" />
<script type="text/javascript" src="file:///android_asset/css/ethan.js" />
<script type="text/javascript" src="scripts/allinone.js" />
</head>
<body>
<input id="btnTest1" name="button" type="button" style="height:0px;width:0px;" />
</body>
</html>
So here the thing is that, I'm actually calling the HTML file using a link (since the HTML file is not locally present). But main.css, sch.css and ethan.js are locally present in the assets/css folder.
What I'm trying to do is to load the allinone.js which is obviously external and the other three files into the which are internal and run the script.
I found "file:///android_asset/css/main.css" but it looks like it doesn't work.
Please help....
I would be curious to know more about the use case here. My understanding is this:
You're loading an externally hosted HTML file into an Android Webview
You need to overlay some local styles/scripts, which can't be hosted on the external site along with the HTML (presumably because you're generating them dynamically).
If that's so -- and given that the logical approach you conceived of using the file:// URI does not work -- there would seem to be two options, each making use of the webView API:
Load the HTML file from the remote source, modify it, then set it as the webView's source. Locate the tag of the remote HTML and inject your local JS / CSS inline there.
Make use of the 'loadUrl' WebView method to inject your CSS/Javascript dynamically (this seems unnecessarily complicated if #1 is an option). For example:
mWebView.loadUrl("javascript:injectJavascript(js)");
where the parameter 'js' is some inline Javascript that you load within your Android code, and injectJavascript is a method in the remote HTML file that actually inserts it into your DOM. Take an analogous approach to insert your CSS ...
Admittedly these approaches are a bit hackish. Ideally you would use a custom method of the WebView class like 'addCssToDom' or something, but as far as I can see, no such methods are available.