I am working on a project which uses backbone.js, jqmnavigator, require.js, jquerymobile and phonegap.
For some reason the app works fine in simulator but when I put the same app on the device , the views overlap after few screen transitions.
Any ideas?
Looks like i found the reason for overlapping views.
One of the reason was , i was doing some intensive work in side "render" call. So i think it was causing the view to overlap.
When i moved it to , "'pageshow': 'this_pageshowHandler'" this_pageshowHandler(), the overlapping of the views went off.
Also, i followed some tips from :
http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance/
Related
I am dealing with a weird bug on Ionic's iOS native build where I sometimes cannot swipe back or switch tabs once I transition to a new page using router.navigateByURL(...), and trying to debug this issue has been troublesome since I can't "see" how the gestures are handled. Does anyone know where I should be looking in the code for handling transition gestures?
Here's a video demo of the problem: https://streamable.com/hk9c0
In the video, you can see me:
Swiping down to refresh using the ion-refresher element and you can see the page beneath (already entered a bug report for that part: https://github.com/ionic-team/ionic/issues/18284 )
Trying to tap the back arrow in the left corner
Attempting to swipe left to right to go back a page (hard to show that one)
Tapping the bottom tabs to transition to new tab, at one point, I tap on a tab that has an ion-fab element which appears in the bottom right because its z-index is higher than the "stuck" page.
Currently the best I've been able to do is by looking at the css classes that are added to the pages, but it's not much use....
Where app-release is the page you can see in the video and app-home is the page underneath the stack. It's my understanding that Ionic uses hammer.jsfor gestures, so I added it as a tag, please correct me if I am wrong. I cannot, for the life of me, recreate this bug consistently, but will often trigger 1 out of 50 tries.
I've been digging through the utils in Ionic Core to see where elements are being added and removed, with no luck.
I created a bug request for this here as well: https://github.com/ionic-team/ionic/issues/18305
Are you using #angular/animations to make the transitions between the pages? I had some issues like yours, as you can see in my question.
Router navigate on Ionic with animation blinking on ios using angular animations
If I am right about the use of #angualar/animations I suggest to use a custom animation of the Ionic itself, and not te angular's. You can see an working example here of its use here:
https://github.com/mhartington/ionic4-custom-animation
Since I have less tem 50 rep I cant comment so I had to post this anwser not knowing if it was really your case. Hope it helps.
Working with Cordova and Ionic at the moment and trying to make an app as backwards compatible as possible (which is going surprisingly well) except I have stumbled upon one small issue.
The navbar after iOS 7 is bigger in that it covers the background of the status bar as well, as seen below.
So when I load the app on a phone running iOS 6 or earlier, the status bar doesn't get resized, the whole page just gets moved down, hiding some of the content in the footer.
Any help would be greatly appreciated. I'm probably missing something simple.
If I'm understanding correctly, then you need to add padding like this:
document.body.style.marginTop = "20px";
This should make the navbar view correctly.
See this - http://coenraets.org/blog/2013/09/phonegap-and-cordova-with-ios-7/
I am working on an app in which there are several screens and each screen has the same layout, just different data passed in, then I want the user to be able to swipe from one screen to the next.
So far I got something working using the UIPageViewController project template using the transition style UIPageViewControllerTransitionStyleScroll. What I have done so far works ok, although its resource intensive because it instantiates a new view controller each time I swipe to a new page but I am loooking into working around that.
The thing I am concerned about is that it is not strictly a page application in the sense of ibooks so even though I am able to make it look like a scrolling app, using the transition style setting, I wonder if there is a reason why people seem to only use this template for book type apps, unless I am mistaken
Also there seems to be an alternative approach of using a UIScrollView and PageControl to do similar functionality
http://developer.apple.com/library/ios/#samplecode/PageControl/Introduction/Intro.html
I am not sure which approach is better to solve the problem I am trying to fix, so am looking for some feedback. Each page will need to be a separate instance of a view controller as there are several elements to display on each page.
Using UIScrollView is much more difficult. If you're targeting iOS 6 you should almost certainly use UIPageViewController. If you're targeting iOS 5 then UIPageViewController might not be perfect because the only page transition available is "scroll" which looks like a page flip.
If you're worried about the resource usage, you can reuse view controllers.
See the WWDC 2012 session 223:
https://developer.apple.com/videos/play/wwdc2012/223/
I've been developing an iPad web app over the past three days, and I'm trying to have internal horizontal scrolling, without allowing the rest of the page to move/zoom in ect. Essentially I want to lock it to specific co-ordinates, whilst allowing certain elements to scroll. If you're on an iPad you can see it here: http://streamerforipad.webs.com/app.html. It'll look kinda weird on a desktop. Also, sorry for my abysmal coding skills, I plan to clean it up with external CSS at some point.
P.S. Remember this is a web app so native code is a no-go.
Thanks!
You can disable scrolling within certain element areas using the following:
$("element,element2").bind("touchmove",function(e){
e.preventDefault();
});
I am developing a small web application optimized for iPad (using mainly javascript & CSS quirks and hacks). However, there is an issue that I just can not find or come up how to resolve.
The thing is that if I change the orientation of the iPad, during the rotation animation a transparent ("checkered") background is shown in the places that were not rendered in previous orientation. One guy on forums.macrumors.com posted an excellent screenshot illustrating this behavior. The thing is, since my application has a rather dark look and & feel, this checkered background showing during the rotation seems to be awkwardly out of place.
However, this guy's screenshot was for the iPhone - that said, and considering that stackoverflow.com is more programming-focused, I thought I'd ask if anyone struggled with and, hopefully, successfully resolved this issue.
Safari displays the checkered background when the rendering can't keep up (try scrolling really fast). As far as I know there is no way of changing the pattern.