I'm using Titanium Alloy to build an iOS app. I've run into a particularly frustrating issue that I've been stuck on for quite a bit now.
Once the user logs in, my goal is to have the login window animate (flip) to the dashboard window. This works well, except for this one bug. The Login navigation top bar seems to show for a second before the Player dashboard bar jumps downward to the right spot.
It looks like this until the flip animation is completed:
Upon completion of the animation it jumps to this:
The dashboard page is a TabGroup, akin to this, and the initial tab has the title "Player":
<TabGroup>
<Tab icon="player_icon.png">
<Window id="playerTab" title="Player"/>
</Tab>
</TabGroup>
The login controller is a NavigationWindow with a Login window and a Registration window.
On the successful submission of the login form, I create the index controller (the dashboard):
Alloy.createController('index', { animate: true, loginSuccess: true });
Which has the initialization code shown here:
if (!AppData.isLoggedIn() && !args['loginSuccess']) {
// Splash contains the register/login forms
Alloy.createController('splash');
} else {
// Check if the user is logging in or resuming previous state
if(args['animate']) {
$.index.open({ transition: Ti.UI.iPhone.AnimationStyle.FLIP_FROM_LEFT });
} else {
$.index.open();
}
}
Does anyone have any idea why this bug might be occurring? I appreciate any help!
Thanks!
Figured it out! Turns out the flip animation wasn't accounting for the status bar height until the animation was finished, so I set an initial top margin of 20 for the TabGroup and removed the margin after the animation completed.
Works great now!
Related
I have a navigation bar and I've set its position to change to fixed when the user scrolls down past it and vice versa when the user scrolls up past that point by using the following waypoint:
var $navbar = $('.navbar-default');
$navbar.waypoint(function(){
if ($('#navigation-bar').hasClass('navbar')){
$('#navigation-bar').toggleClass('navbar-fixed');
} else{
($('#navigation-bar').toggleClass('navbar'));
}
}, { offset: '28%' });
This ensures the navbar stays on the users screen only past a certain point. This works as intended most of the time, however the issue is if the user scrolls down past that waypoint and then refreshes the page the navbar will jump back to its original position, which then causes undefined behaviour if you scroll back up past it.
Is there a way to ensure everything that is on the screen remains at that exact same spot when the user refreshes?
You can use the window.scrollTo function when the page loads
//scrollTo(x, y)
window.scrollTo(0, 0);
//the rest of your code...
This will scroll to the top-left of the page everytime the page loads.
Edit:
The answer from this question may also work:
* {
overflow-anchor: none;
}
I would like to create an animation when the page changes.
I had in mind an animation from bottom to top, the first loading animation works correctly, but if you go down the page and click on the link to change the page no longer works.
This problem is due to the fact that once shook the angular page no longer considers the top of the window but considers scroll the page.
I tried with date-autoscroll = "false", the page is repositioned well but you lose the animation.
Some idea?
**DEMO** http://plnkr.co/edit/j7r3s33Y3GcTyH2Fop9K?p=preview
The solution is to add this in the main controller:
// RESET NG-VIEW TOP POSITION
$scope.$on("$routeChangeSuccess", function (event, currentRoute, previousRoute) {
window.scrollTo(0, 0);
});
Some apps (facebook, 9gag) have this functionality. When the user scrolls up the navigation bar gradually hides itself to a point where vanishes. Then when the user scrolls down the navigationBar gradually shows itself (depending on the speed of the scroll).
We tried to implement this on Titanium by adjusting the height of the nav view on the scroll event, but it is lagged and very slow:
scrollView.addEventListener('touchstart',function(e){
boolScroll=true;
});
scrollView.addEventListener('scroll',function(e){
if(boolScroll){
auxScroll=e.y;
boolScroll=false;
}
var bh=bars.height;
var sh=scrolls.height;
if(auxScroll<e.y)//scrolling down
if(bars.height>appHeight*0.08){
bars.height=bh-appHeight*0.005; //rate for hiding
if(scrolls.height<appHeight*0.7)
scrolls.height=sh+appHeight*0.005;//same rate to increase the height of the scroll
}
if(auxScroll>e.y)//scrolling up
if(bars.height<appHeight*0.08){
bars.height=bh+appHeight*0.005;
if(scrolls.height>appHeight*0.7)
scrolls.height=sh-appHeight*0.005;
}
});
We also tried doing it with translate animation on the view, but is still slow.
There is a solution for iOS on this question. Any help would be appreciated!
Don't know if you solved this problem but I did a trick that's working well for me ( at least for the navigation bar )
Here's the snippet :
self.addEventListener('scroll',function(e){
if(e.contentOffset.y > 20) NavigationWindow.window.hideNavBar();
if(e.contentOffset.y < 20) NavigationWindow.window.showNavBar();
});
NavigationWindow is an instance of Ti.UI.iOS.createNavigationWindow, self can be a tableview,view,scrollview or a window ( in my example )
this is actually a really nice feature to have. Appcelerator just tackled it and should be available on release 6.0 according to this ticket: https://jira.appcelerator.org/browse/TIMOB-23684
Is it possible to hide the address URL bar but not the Smart App Banner on iOS Safari?
I have tried the solutions from this question: Hiding address bar without hiding the smart app banner on iOS 6, but it doesn't seem to work. The Smart Banner still gets hidden when I use MBP.hideUrlBarOnLoad from https://github.com/h5bp/mobile-boilerplate/blob/master/js/helper.js, as the answer suggests to do.
I use:
$(document).ready(function () {
mob.SetUpEvents();
setTimeout(function () {
if (jQuery("html.iphone").length > 0) {
jQuery('html').css( "height", ( jQuery(window).height() + 60) + 'px');
window.ScrollTo(0, 1);
}
}, 400);
});
I hope this helps!
The only reason this works is because it throws a javascript error on
mob.SetUpEvents();
Which makes it disable the scroll jump. It will however mess up additional javascript.
You can change it to anything which throws a javascript error and the banner will not hide.
This solution is not an effective one.
Thank You
The website volotea.com that you have linked to does not work, when the page loads it jumps and hides the smart app banner and the url bar both. We have to scroll up to see the smart-app-banner.
I want to create a navigation bar similar to this site's:
http://www.mysupermarket.co.uk/#/shelves/top_offers_in_asda.html
Can anyone tell me how to create that navigation bar, which follows you as you scroll the page down, but not following you at the initial loading of page?
When you access to the given website, try to scrolling down and you will understand what I am talking about. The navigation bar that consists of MY SHOP, OFFERS, IDEAS & LIFESTYLE, BAKERY and so-on...
I have really no idea what it's called. At least tell me what it's called, so I'll be able to search.
Here is the solution I've done
window.onscroll = function(){
if(getScrollTop()>140) {
document.getElementById("menu").style.position="fixed";
} else {
document.getElementById("menu").style.position="";
}
}
function getScrollTop() {
if (window.onscroll) {
// Most browsers
return window.pageYOffset;
}
var d = document.documentElement;
if (d.clientHeight) {
// IE in standards mode
return d.scrollTop;
}
// IE in quirks mode
return document.body.scrollTop;
}
Holding an element on same position can be achieved by fixed position styling.
If you want your navigation bar to stay on exact same location, position:fixed; is enough. (At least non IE6)
You can find a working example and some details here
However, if you want your navigation bar to move from it's initial location to the top border of page as you scroll the page down, you must implement some JavaScript to catch page scroll event and move the <div> accordingly.
See this question for an example on how to do that.
Note: this won't work with the Android 2.3 browser; position:fixed will not behave as expected - it kinda of temporarily attaches its position to the scrolling element before jumping back to the top.
if you want you could just set the z-index to be a specific No. and that should work.
example
z-index:100;