I've been coding an Ionic application using Intel XDK and I'm experiencing a weird issue using the Ionic framework. I am using nested states inside the side content of my drawer template and found a weird behaviour with the latest version of Ionic (1.2.4) which is pulled using Bower.
With the latest version I was getting a weird behaviour where when transition from state 1 to state 2 would look something like this: weird bug
Also when in State 2 the side content would no longer be able to swipe the side drawer open as it did in the previous state.
This is a link to the plunker were it uses the old 1.0.0 beta version of ionic http://embed.plnkr.co/mX9DJRYMfTNHz0bYyMgw/
The state transitions correctly and the second state still allows for the drawer to be swiped open. I obviously don't want to use an older version of ionic because it doesn't support fancy things like pop overs that I would like use in the app.
Thanks,
I was able to solve the problem, For the new version of ionic every state transition is cached. When the state transition occurs the side drawer is left open. This is why in the emulator you see the a weird layer lingering but don't see it on the phone. To close the drawer you must use the menu-close directive. I inserted it inside
<a menu-close ui-sref ="state2">
The menu-close directive will reset the entering view’s
history stack, making the new page the root of the history stack.
Related
Hi can anyone point me to a working solution for having page transitions with React while also changing the address in the nav bar. Any solution I have found that is more than 6 months old no longer works with the latest version of React (18.2.0). I have also downgraded to use react-router-dom v5 and older versions of react-router. I have tried react-spring, headlessUI and also TransitionGroup Nothing works.
I just need a clean, fresh example of a Home page transitioning into an About us page by clicking the About us button and you see the home page fade out or slide to the left as the About us page fades in or slides in from the right and during the transition you momentarily see both pages at the same time. In the address bar it needs to change from "/" or "/home" to "/about-us".
That's all.
Anyone?
I'm creating a third-party app, which is loaded through an iframe.
The iframe creates a draggable element in side it.
On first page load (before scrolling the page), the draggable (slider) works fine.
But after scrolling the page behind the iframe, it's hard to get the slider to slide again.
(Note that this is a mobile issue, safari on iOS especially, but also chrome on iOS)
In the following demo I have used the GSAP Draggable library with react to create the draggable element but have also tried to code it in plain react with no luck.
Here is a demo: https://unfjl.csb.app/
I have tried a lot of different things (css, touchevents etc), but cannot get it to work...
What could cause this behaviour?
Update (no iframe example)
Demo no iframe: https://p5cu9.csb.app/
Same example with slider as above, but in this example the draggable is rendered directly in the DOM and not in an iframe. The problem still occurs. I suspect it has something to do with the fixed css position of the slider...
This is gonna sound really strange, but a bug in iOS Safari causes that and the only way I know of to get around it (which I discovered today via Googling) is to add a "touchstart" listener to the of the top-level page (not the iframe)!
document.getElementsByTagName("body")[0].addEventListener("touchstart",function(){});
That isn't something I can add to Draggable because it wouldn't be able to access the parent document (outside the iframe) to add that properly (security restrictions in the browser).
You could also add a touchforcechange listener that prevents the default behavior (I'll be adding that to Draggable itself too):
yourDraggableElement.addEventListener("touchforcechange", function(event) {
event.preventDefault();
});
Browser bugs are fun, aren't they?! ;)
(Originally answered in the GreenSock forums at https://greensock.com/forums/topic/21450-draggable-in-iframe-on-mobile-is-buggy/?tab=comments#comment-101225)
we are using Ionic framework for an app which runs on ipad device, We have recently migrated to IOS9, several things are not working, Modal dialogues box is not getting opened, it goes to login page which we have declared in otherwise.
$urlRouterProvider.otherwise('login')
The same thing works in IOS8
As mentioned here http://blog.ionic.io/preparing-for-ios-9/
Also, empty href links <a href="#"> will trigger your otherwise state, so test those and remove the empty href if necessary.
It's pretty standard to be able to right click or ctrl click a link and open that link in a new tab. Angular ui router ui-sref's don't honor this at all. Any ideas on how this should be done? It has to be inside the framework clearly I can't do all my links a different way.
This was a bug in UI Router with Angular 1.3 that was resolved.
<a ui-sref="test"></a>
resolved to
instead of
They addressed and fixed this here: https://github.com/angular-ui/ui-router/issues/1408
Download the latest version of UI-Router (https://angular-ui.github.io/ui-router/) and update your project files to resolve this issue.
I downloaded on the Onsen UI boilerplate for a Tabbed application. I then added a second page navigator for one of the tabs. This second tab will have two pages available. The problem comes when I visit this tab, go to the second page of the tab and then use popPage to go back to the first page of the tab. After the page transition is complete, I get this:
Error: no such object: [object Navigator]
at Object.aliasStack.unregister (http://dev-m.scrippa.com/lib/onsen/js/onsenui.js:10848:17)
I'm using this method to pop:
<ons-button ng-click="placesNavigator.popPage()">Back</ons-button>
This seems like a navigator problem, but not sure what to change. This leads me to a question: How many navigators should an app have? And what is breaking?
Keith
I had trouble with this too.
I think you just have one navigator at the root page.