I have an Ionic page on which I'd like to be redirected to a custom page when swiping left. Just redirecting me back isn't good enough, since I can have that page open from a deep link, meaning I have no back on my window's history.
I saw that there's a gesture API, but it's a bit too much for such a common cause. Also, I saw that on previous versions there where swipe left/right events, but no reference for it on Ionic 4/5.
Doesn't Ionic 5 has an on-swipe-left event?
Another solution, if you didn't want to add a hammerjs dependency and just use Ionic would be to use the official ion-slides component to manage your pages as slides.
I've implemented this on a couple of apps and it works really well.
In your example, you would want to setup an <ion-slides> container and then your 'pages' would exist inside as <ion-slide> components.
You can then easily tap into the (ionSlideDidChange) event as follows:
<ion-slides
*ngIf="!isLoading && pages"
[options]="slideOptions"
(ionSlideDidChange)="onSlideChange()"
class="em-height-full"
#pages
>
Then in your .js or .ts file just create a method like:
async onSlideChange() {
this.pageIndex = await this.slides.getActiveIndex();
}
Then you could track the page with pageIndex. So in your case, you'd open the page from the deepLink (maybe have it route to 'page 2') and then when you swipe left on the slide component you could go to page 1.
You are looking for this: https://ionicframework.com/docs/utilities/gestures
Adding HammerJS is not a great idea since you might encounter buggy scenarios.
Related
I've created a stencil.js application (app starter) where I would like to use ionic components.
I included Ionic using the cdn following this tutorial (https://ionicframework.com/docs/installation/cdn). I have a problem with the style of some of the components like buttons, toggle etc. The problem is that the primary/secondary/x style is not applied also if I use
color="primary"
I've searched a lot to solve this problem and I saw that the property .ion-color-primary isn't apply to the button like it should, so none of the colors are applied to the button that remains white.
If I use Ionic from cdn in a html page (with no stencil.js) the problem don't happen so I think that the problem it's stencil.
I've the latest stencil version, 4.11.7.
Is there a way to use FB.XFBML.parse without rendering the a Facebook plugin again which cause it to "flicker" (disappear et reappear).
Will be using the Facebook Like button or Facebook Recommandations Bar.
Live example: http://www.gablabelle.com/eve-d
Slide to view the flickering in the lower right corner.
$.address.state(ajax_object.path).crawlable(true).value(whereiam);
$(".fb-recommendations-bar").data("href",whereiamurl);
//$(".fb-like").data("href",whereiamurl);
fburl = $(".fb-recommendations-bar").data("href");
//fburl = $(".fb-like").data("href");
console.log(fburl);
FB.XFBML.parse();
Many thanks for your help.
You can limit the scope of the re-parse by passing in the parent DOM element to FB.XFBML.parse.
Add an opacticy layer over the top of the facebook plugin div when a "page change" is needed. Animate it to fully opaque. Call the FB.XFBML.parse() and give it a few moments to re-render. Animate the layer to non-opaque, then remove the opacity layer from over the top of the facebook plugin div (or leave it there for the next time you need to do a "page change" without actually reloading the page.
This technique will give you a gracefully disappearing/reappearing plugin, rather than a jarringly harsh "flicker".
Cache the Facebook likes of the previous slide + current slide + next slide on a slide change event. So that when you go to the next or previous one and its Facebook like should already be ready/loaded, the user should not see a flickering. Unless he/she goes to fast with the slides.
I've had this recently.
I got around it by wrapping the XFMBL in a variable... don't know why but without it it seemed to flicker... a total hack of a way to stop the flickering but worked for me!!
if(call == 0){
FB.XFBML.parse();
call = 1;
}
DMCS provided what seems to be the only half-proper answer, but it's butt ugly. You don't know how long it'll take on each persons web browser to render the stuff. The callback which supposedly says it's rendered doesn't work either. Also the flicker isn't seen in firefox but only in google chrome.
I have a webapp used by jquery mobile, there is lots of pages this webapp. also added home screen button its feel like native app fullscreen, so i used common header for each pages, i don't want duplicate header every pages. there is a "Back" button this header, used following codes
<div data-role="header" data-theme="g" data-position="fixed" data-tap-toggle="false">
<a onclick=history.back() data-icon="back" data-direction="reverse" data-role="button">Back</a>
</div>
i used php cookies store function also each pages, that point when user resume this webapp return to previous position...
my problem is when user come back previous position my back button not working, is it possible to fix.? or iPhone not allow this function for webapp.?
Why do you set onclick=history.back() manually?
The framework automatically generates a "back" button on a header when the page plugin's addBackBtn option is true.
Source: http://jquerymobile.com/test/docs/toolbars/docs-headers.html (jump to "Adding Back buttons")
My own experience
I never ran into trouble with automatically generates back buttons on iPhone in my jQuery Mobile projects.
Ok, weird issue:
1) Go here on an iPhone (Safari browser): http://powellcreative.com/our-team/
2) Click any of the team images to get to the team member page
3) Click the back button on the browser
4) The image is disappeared on the Team page now
I know this question is kind of old, but I was looking for a solution to a similar problem and after searching, I found a solution. Hopefully this helps other people with the same problem. The problem is when you give iOS a javascript event like onmouseover or onmouseout it doesn't like it, mainly because when your finger is "mousing over" an element in iOS, you are actually clicking on it, so this is the solution I came up with that seems to reload images after hitting the back button in iOS.
Here it is:
Make sure all images are in their own separate div with a distinctive name.
Example:
<div name="div1"><img src="yourimage" onmouseover="javascript:this.src='yourimage2';" onmouseout="javascript:this.src='yourimage';"></div>
In the javascript head part of your page you want to insert this:
window.onpageshow =
function(event){
if (event.persisted){
//for every div and image you want changed back you can add a loop here to change all at once or just one div by name//
document.getElementById('div1').innerHTML = '<img src="yourimage" onmouseover="this.src="yourimage2";" onmouseout="this.src="yourimage";">';
}
}
This will check for page back since Mobile Safari uses bfcache and reload your image into the div. Hopefully this helps OP or someone else.
I'm looking for a tutorial without any javascript - pure CSS3.
I've created two pages (page1.html, page2.html) for the iPhone and I'm using CSS3 and the -webkit-properties.
To connect those sites I created a next- and a backbutton.
When tapping on the nextbutton page2.html is loaded, when tapping on the backbutton page1.html is loaded.
This is working so far.
I'd like to try using some more -webkit-properties to get the flip-effect like in this demo.
So, when clicking on my next-button page2.html should be flipped in. When clicking/tapping on the backbutton page1.html should be flipped in.
I'm new to this and hope to get some help here. Do you know a tutorial dealing with my problem?
Another question coming up to my mind was whether it is possible to load page2.html seperatly or whether I have to build only one page with the content of page1.html and page2.html?
You have to build only one page with two sections/divs with the flip-contents in it. Then you can use the transform: rotateY … or, maybe load the second page in with AXAJ or something else, but because it's CSS on my understanding you have to put everything in one page with two sections/divs
There are lots of pageflip demos on the interwebs. This is one we did It was inspired by Roman Cortes one - there are others that use more of a squeeze than a flip.