I am building a mobile version of an existing site, and I'm looking for an explanation to a problem I'm having (as a jQuery Mobile noob).
This page has a jquery reflection effect on the first image:
http://m.fijitourism.com/accommodation/coral-coast/bedarra-beach-inn/ (it does this by applying the effect to any image with a class of 'reflect').
If you go straight to the page, the js loads and the reflection works fine on the image. However, if you've navigated to the page from here, the parent page, the reflection js doesn't work:
http://m.fijitourism.com/accommodation/coral-coast/
From what I understand, this is to do with jquery mobile's ajax loading. I've found that if I use 'data-ajax="false"' on the link from the parent page, the reflection js loads okay.
My questions are:
-Is there a better/more correct way to achieve the reflection without using data-ajax="false" on the parent page link? I understand that this isn't really what 'data-ajax="false"' is designed for. The official documentation says to use it 'if you are linking from a mobile page that was loaded via Ajax to a page that contains multiple internal pages', which I am not.
-An explanation as to why the ajax loading prevents the reflection js would be great.
Turns out there was a page that I'd missed in the official documentation dealing with this exact issue:
http://jquerymobile.com/test/docs/pages/page-scripting.html
To execute code whenever a new page is loaded and created by the Ajax
navigation system, you must bind to the pagecreate event.
The pagecreate event is triggered on the page being initialized, right
after initialization occurs. We recommend binding to this event
instead of DOM ready() because this will work regardless of whether
the page is loaded directly or if the content is pulled into another
page as part of the Ajax navigation system.
$('#aboutPage').live('pagecreate',function(event){ alert('This page
was just enhanced by jQuery Mobile!'); });
This issue is explained here: http://view.jquerymobile.com/1.3.2/dist/demos/faq/scripts-and-styles-not-loading.html
First of all, after you make sure your script works when you refresh the page with the browser, you can fix the jquerymobile solution.
Basically scripts should be used on all pages in the navigation, and page-specific scripts should be written inside the data-role="page" element. As there was no good example on the jquerymobile site, and it was a bit tricky to actually make this work, I have an example here for making the code work both on jquerymobile ajax navigation, and a page refresh.
// this code is inside the data-role="page" element, as well as the possible script src tag
$(window).on('pageinit', function() {
// do normal $(document).ready() code here basically
});
});
I got a workaround for this issue by changing the way I load my pages.
I put target="_self" into the href element so it don't load using the # system.
I will put the below link on my index.html page that will navigate to my signup.html page.
Signup
NOTE: You will lose the 'fancy' jQuery Mobile page transition feature
Related
I am loading Website inside App using cordova.InAppBrowser.open('example.com', '_self', 'location=no,clearsessioncache=yes') and everything is works fine i.e it shows complete website mobile view inside the app, but now I am using some navigation inside assets\www\index.html file and when user will click on link the navaigation I want to load the website inside the div OR without losing the navigation.
function load_web(URL)
{
cordova.InAppBrowser.open(URL, '_self', 'location=no,clearsessioncache=yes');
}
<a href="javascript:load_web('example1.com')" >Web 1</a>
<a href="javascript:load_web('example2.com')" >Web 2</a>
In other words, you want to show a non-fullscreen external site using Cordova's InAppBrowser. You can't do this, as it will always cover the entire app window. You have to use iframes for this, but this may or may not cause your app to be rejected by the store.
Notice that iframes and InAppBrowsers are becoming more and more restricted and eventually, Google and Apple could simply delete all apps using iframes and InAppBrowsers for the so-called security concerns paranoia. (and I wouldn't blame them, for the ill-use of iframes that we see everywhere)
I want to implement native page transition curl effect on a WebView after the content changed (that means, the page is not being reloaded!).
One common solution is using Animations before loading a new page, e.g. with a custom WebViewClient: https://stackoverflow.com/a/8319579/1684030
However, this only works if there's actually a new page being loaded. In my case I have a WebView displaying a javascript app which just switches the contents of a div ("single page application"). Animating those content changes with javascript leads to a laggy solution, so I wanted to try to implement it natively.
For iOS, this seems to be possible (UIPageViewController with only one content view controller - I know, Android OS and iOS are not quite comparable, I just wanted to mention it) and I was asking myself if there is some similar solution for Android as well.
You can use javaScript bridge to call your Java method which performs the curl transition effect on webView.
mWebView.addJavaScriptInterface(new JsObject, "injectedObject");
Refer: Android developers - JS Interface
There are some implemented JS bridge in Github.
I am investigating writing an HTML version of a native-tablet app (Android) that a research facility uses to test user response time. That is: a screen is presented for a set time and then the time it takes a user to choose a response is measured.
What would be helpful is to know is whether this is as easily done via HTML as via native code — I need to know exactly the time between the presentation of a screen to a user and the time they touch for a response. Since HTML rendering is under the command of the browser, is there are way to know — very precisely — when the screen is actually rendered to the user, and hence when the timer should start? My thinking is that it might be best to do something like set a div state from 'hidden' to 'visible' — or to use an animation library such as Greensock, but I feel this could be "every problem is a nail when all you've got is a hammer" — that is, these are the tools I know, I don't know whether these are what I should use.
I'm trying to get a sense of whether this is feasible — I've not done any native code tablet development, have done a fair amount of HTML, need to convince them to switch if I'm going to do the work. Thanks for any info you can provide.
Maybe you could use javascript & JQuery in your HTML page to record the exact time of loading?
$(document).ready(function(){ //notice that $(document).ready is JQuery
// Your code here
});
I guess you call native Android methods via javascript in you WebView, but if not you can do so by first injecting your Object containing methods to be called when page is loaded:
WebView webView = (WebView) findViewById(R.id.webview);
webView.addJavascriptInterface(new WebAppInterface(this), "Android");
Then, the JQuery code above to notify a Java Object would be:
$(document).ready(function(){
Android.documentReady(); // method to call in Java Object
});
Notice:
This is highly experimental and I do not know whether it is a good idea to load JQuery into your WebApp, but as JQuery is used everywhere it should not be a problem.
Anyway, $(document).ready(function...) is called when the document/html page is fully loaded - doing a similar "listener" in standard javascript is not recommended, but possible. (more info if you want to skip JQuery; https://stackoverflow.com/a/7053197/3911640 )
More info about using JavaScript to call native Android Objects: http://developer.android.com/guide/webapps/webview.html
EDIT:
You could also do this with HTML5:
<body onload="Android.documentReady()">
Notice:
Not my area of expertise and not tested, but practically possible. I'd advice you to research which way is the fastest most reliable, but in theory both should be invoked when everything (images etc included) is loaded and presented to the user.
W3C documentation of the HTML5 functions: http://www.w3schools.com/jsref/dom_obj_event.asp
I am confused about how to architecture my phonegap application.
Do I use a single-page application wherein I load relevant views using ajax ?
Or should I use many local html files and keep navigating between them using href tags ? Also, window.location seems to load the second page in a browser window, which is undesirable. I want to have whole of my app running in the same webview.
How can I stay on the same webview, while navigating between the pages using javascript ?
Try using a javascript framework like backbone or sencha touch. Jquery-mobile will work but everything will be encapsulated on one page
This app already exists in the Apple App store and Android markets. It is an app that uses a lot of native code and is not a candidate to be fully html5ed.
Longwinded Description
I want to have a Web-based series of settings pages. Some of these pages will live locally on the mobile device, and some will be hosted on a remote server. The native app will need to communicate with the local web pages to get and set information in the webpage using javascript.
For instance, the first page shown in the WebView/UIWebview will be a local index page. If the remote website is down, the links on the index page to the remote pages will be greyed out. On loading the WebView, the native app will need to detect the reachability of that page and send javascript to the page to grey out the buttons. Likewise, some settings changes made in the local web pages need to be sent back to the Native app for processing.
Short and Sweet Requirements Summary
Embed remote and local webpages in a webview
Theses webpages will be the same for both Android and iOS
Local pages use JavaScript to get data from and send data to the Native Mobile App
Potential Solution Pathways
A. PhoneGap
I realize that Phonegap would work well for this if my application was entirely a web app. From my reading it seems like Phonegap doesn't really like to be embedded in a native app for part time work.
What? You say it's really easy and I've been grossly misinformed? Enlighten me oh wise one.
B. Roll My Own
I'm open to rolling my own solution, however the methods for getting and setting information via Javascript from the Webviews to the Native Apps seems quite disparate. More-so the getting than the setting (bogus URLs for iOS, very nice AddJavaScriptInterface for Android). Also, it seems like this path could lead to a severe maintenance headache in the future.
Say what? Your genius programmer friend has made a website describing this process in excruciating detail? Tell me more.
C. 3rd Party Library
The perfect 3rd party library that does everything I want (and more!) exists? Save me from my ignorance.
Decision
In the future, it seems like PhoneGap's 'Cleaver' project will be the best way to do this.
Since it's not ready for Android yet, it seems that the current (Early June '12) best solution for write-once-embedded-HTML is to use a fake URL scheme to communicate from the web page to the native app (both platforms can execute JS on the page directly when going from native app to web page).
For Android this is simpler to do. Take a look at WebView's addJavascriptInterface method. You can create your own object with methods that can be called directly in the HTML javascript.
iOS requires a bit of trickyness. Best solution for these types of problems is a couple things:
For callbacks to iOS you will need to basically make up your own URL scheme like native://somehost.com/somepath When your javascript wants to inform the iOS code use window.location = 'native://somehost.com/somepath';
Set the UIWebView delegate to an object that defines webView:shouldStartLoadWithRequest:navigationType: it will look something like this
if ([request.URL.scheme isEqualToString:#"native"]){
if([request.URL.host isEqualToString:#"somehost.com"]) {
//Do the code you need to do here, branch off depending
//on the path and/or host, you can parse parameters here too
return NO; //This will keep UIWebView from trying to actually load
//your made up scheme
}
}
return YES; //If the request isn't one you want to intercept return YES/true
//so UIWebView will load the page
To have your iOS code send information or call functions in your javascript you can use WebView's stringByEvaluatingJavaScriptFromString:. This will return the result of a javascript expression so you can also use it to get some information from the page itself. To call a function use something like this
[webview stringByEvaluationgJavaScriptFromString:#"myJavaScriptFunction();"]
You can also handle the made up scheme in Android by creating a custom WebViewClient and overriding the shouldOverrideUrlLoading method similarly to the iOS code above except the return calls are backwards, you return true if you handled the URL and the WebView should do nothing more, and false if you want the WebView to handle loading. Be sure to create and assign the custom WebViewClient to the WebView using setWebViewClient. To call javascript functions on the actual WebView do something like webview.loadUrl("javascript:myJavaScriptFunction();");
PhoneGap iOS has a concept called Cleaver where you can embed the web view into a native iOS app. Randy McMillian has a good example here. On the Android side work is being done to bring the same functionality. So we are not there yet but we will get there.