Transitions during page navigation in phonegap android app - android

I am developing a phonegap android application using jquery Mobile that consists three html pages. I want to include transitions during navigation from one page to another.
For navigation between pages i have used
window.location = "abc.html";
Each page consists some dynamic data that loads on page initialization.
I have tried data-transition="slide". But there isn't any effect.
How can i include slide transition for page navigation in my application ?

$.mobile.changePage('abc.html', { transition : 'slide'});

function change_page(page){
$.mobile.changePage( page, { transition: "slide", changeHash: false });
}
Call this function:change_page('#load_page'); OR change_page('mypage.html');

Related

Webview is disposed when swiping the Carousel Page

I have a CarouselPage that have three page and Webview is in the first page. There is no problem between webViewPage and second page but Whenever swiping third page, webview is recreating and refreshing.
This behavior is works good on iOS.
Expected Behavior
When we return to the webview page, it should present the webview as we left it.
XF 5.0.0.2244
in the App.css;
CarouselPage carouselPage = new CarouselPage();
carouselPage.Children.Add(new Page1()); // webViewPage
carouselPage.Children.Add(new Page2());
carouselPage.Children.Add(new Page3());
Page1.xaml;
<WebView Source="www.stackoverflow.com" MinimumHeightRequest="300"/>

Ionic 3 - How to implement viewpager?

I am currently developing an application using Ionic 3, the main screen consists of 3 tabs (ion-tabs) I created a function to change tabs according to the user's swipe, however my client asks for a transition equal to WhatsApp and I do not know to implement this. I thought of using ion-slides but I would have to migrate the code from the 3 tabs to a single view, is there a way to append the animation without having to change the component?
<ion-tabs #Tabs no-border tabsPlacement="top" tabsHighlight='true' color="secondary" >
<ion-tab [root]="disponiveisRoot" tabTitle="Disponiveis" ></ion-tab>
<ion-tab [root]="meusPedidosRoot" tabTitle="Meus pedidos" ></ion-tab>
<ion-tab [root]="finalizadosRoot" tabTitle="Finalizados" ></ion-tab>
</ion-tabs>
You can use ionic2-super-tabs. This library makes it possible to make swipable tabs easily. You have to check the github page for compatability and which version you should use.
With the library a basic example would be as below. It's almost the same as the tabs from Ionic it self.
Basic example
Component:
export class MyPage {
page1: any = Page1Page;
page2: any = Page2Page;
page3: any = Page3Page;
}
HTML:
<super-tabs>
<super-tab [root]="page1" title="First page"></super-tab>
<super-tab [root]="page2" title="Second page"></super-tab>
<super-tab [root]="page3" title="Third page"></super-tab>
</super-tabs>

Use Ionic Tabs for Actions

I really like the style of the Tabs in Ionic 3 when you have an icon and a text:
https://ionicframework.com/docs/components/#tabs-icon-text
However in the App I am using I have 4 Actions. For example open the Camera, open Google Maps and so on. And this I want to display on the bottom of the page exactly in this kind of style.
How can I achieve this, since this is not the real purpose of the Tabs and since I haven't found a similar Component.
Just like you can see in the Tab docs:
Sometimes you may want to call a method instead of navigating to a new
page. You can use the (ionSelect) event to call a method on your class
when the tab is selected.
<ion-tabs>
<ion-tab (ionSelect)="chat()" tabTitle="Show Modal"></ion-tab>
</ion-tabs>
And then
export class Tabs {
constructor(public modalCtrl: ModalController) {}
chat() {
let modal = this.modalCtrl.create(ChatPage);
modal.present();
}
}

Android 4.0.x (ICS) WebView does not update UI clicking <a> tags

I need WebView to show a HTML page A, there are hyperlink tags in page A, which will open page B when clicked. On action bar of my Activity, I have a Button which will call WebView.reload() when clicked. This should be a very simple case of WebView.
PROBLEM:
When running my app on Andorid 4.0.3 or 4.0.4, after click hyperlink ( tags) in page A, Android WevView stays on page A, nothing happend.
What-I-tried:
1. when the problem occurrs, click reload button, WevView is displaying page B correctly.
2. modify source code of page A and B, remove CSS code which affect how tag displays. Then WebView can jump to page B correctly after click hyperlinks in page A.
I think this is a bug in Android 4.0.x, It is not possilbe to remove CSS in HTML, I am stuck with the "reload solution".
Does anyone know the root cause of this bug or a better soluton?
Thanks
Use WebChromeClient for webView fucntionality it should work.Even then you are unable to load the html than debug your code and use alternative which function is not working . because java script and CSS both works in web view only the case if you have made mistake in java script or css thnt it should do strange behavior(not loading/blank load/hang screen).
Issue solved by WORKAROUND in web page source, not Android WebView.
add the following javascript inside html body:
try{
document.documentElement.clientHeight
} catch (e) {
};
above js trys to read web window height, but it will force a refresh of web page.
That's how this js solved this issue.
I guess this should be a bug in Android 4.0.3/4.0.4. But currently you can use this workaround to avoid it, only if your WebView load web pages developed by you.

Is there jQuery Mobile's equivalent to the Android's ViewPager?

I want to create a horizontal swiping effect using jQuery Mobile. After doing a little bit of research, I found out that ViewPager, which is generally found in the app details page of Android Market, does what I want. In the page specified the author describes it along with code in Android, but I wanted to know if there is an equivalent plug-in or feature in jQM.
I like SwipeJS, it's lightweight and I like the one-to-one slide factor it uses (when you slide your finger across the element, it moves at the same rate).
There is also iScroll 4 that works pretty well (it seems to be more difficult to setup than SwipeJS).
You can however utilize the built-in swipe events in jQuery Mobile. You can bind to the swipeleft or swiperight events for the data-role="page" element(s) and navigate the user to the correct page based on the current page:
$(document).delegate('#page-two', 'swipeleft', function () {
//next page
$.mobile.changePage($('#page-three'));
}).delegate('#page-two', 'swiperight', function () {
//prev page
$.mobile.changePage($('#page-one'), { reverse : true });
});
Here is a demo: http://jsfiddle.net/fFGvD/
Notice the { reverse : true } object being passed as the option object to the changePage() function so the animation will play in reverse.

Categories

Resources