A couple of questions regarding my app

ionic-v1
1

Hi, I decided to stop to wait for the beta release and to start develop my app (updating Ionic every time). I would to do an iOS webapp without public it on the App Store (so letting users to only save it on the Home Screen pressing “add to Home” in iOS 7). I’m doing this to learn a little more of javascript, html5, css3 and to introduce myself to angularJS.

I would ask to the Ionic developers what are the best ways to do my app using Ionic, so here’re the questions:

  • I would to realize an app with the SideMenu that will look like the iOS 7 App Store, the iOS 7 Facebook apps, so with a lot (2000+) pages inside and the same header for each page (it will be only able to change the title, and I would to see it stable like in the apps I mentioned before, in the OS apps). Is it possible to achieve this? Which would be the best way (maybe adding some transitions when the pages change)?

  • Like Facebook on iOS 7, I would to do the same status bar: a blue status bar when the SideMenu is hidden, and a transition that will fade its color to black while the SideMenu is dragged in.

I know in Ionic there’re a DOM element for the center content (pane side-menu-content), a DOM element for the side content (side-menu) and a DOM element with both them inside (side-menus). I thought to use a black-translucent status bar for my “capable” webapp, to add a div 16px high, with the same background-color of the header div, before of side-menus (to not slide it with the center content) and to use different css for window.navigator.standalone and !window.navigator.standalone (to remove the status bar DOM element when the user uses Safari and to add a 16px magin-top to headers and contents).
Is it the best way to do it? How would a Ionic developer act?

  • If the user slides down the header bar, he slides down all the html page breaking the natural iOS look of the app. How I could disable this in Ionic? Is it anything that will be added in future releases of this awesome framework?

  • Like I wrote in the first two questions, I would add a SideMenu to my app. In Ionic, when the SideMenu is open, to close it you can only tap on the button controller, tap on the central content or slide the central content to left/right. Is it possible to do the SideMenu like in Facebook for iOS 7? I would to be able to slide everywhere in the screen to close the menu, not only in the center content, and to see the controller button:active for all the slide animation (not only for a frame… the users cannot see the button:active css ahah)?

  • Last question: is it possibile to add a sort of “waiting time” for links and buttons when the user scrolls? (if you’re using iOS, a, form, input, etc. change the status to :active only if you hold buttons and links withouth scrolling; vice versa if you scroll the :active status is removed: I think it will surely reduce lag in item lists with links and :active animations)
    Is it anything that will be in next releases of Ionic?

Thanks for reading and thanks for the opportunity to ask directly to the team Ionic related things in an official forum :slight_smile:

I never completed a project, and I really would to complete this one.
Thanks in advance for replies from the Ionic staff! :slight_smile:

2

Hey @xAlien95, I’m not ignoring your question. I just read through it and did some searching, so I’ll have a better response for you tonight or tomorrow. Thanks for your patience :slight_smile:

1 Like
3

Sorry for the delay :frowning: I’ve replied in order:

1 - so you want tabs that have content that navigates inside of each tab pane? We are working on fixing this right now, so it should be something that works fine in a week or two.

2 - I spent a few hours today making this tutorial which I think does what you are describing. Make sure to use the new version of Ionic: http://ionicframework.com/tutorials/fade-status-bar/

3 - For the down dragging, you need to make sure you have the proper config values in Cordova set:

    <preference name="webviewbounce" value="false" />
    <preference name="UIWebViewBounce" value="false" />
    <preference name="DisallowOverscroll" value="true" />

I’m not too sure about the last question though.

We’ve got lots planned, mainly in relation to better navigation, list performance, and other things. Stay tuned!

4

[quote=“max, post:3, topic:171”]
1 - so you want tabs that have content that navigates inside of each tab pane? We are working on fixing this right now, so it should be something that works fine in a week or two.
[/quote]Tabs? I don’t need them because I could add that links in the sidemenu (:
I was talking about the possibility to build a… hmm… iOS Settings app: the possibility to have a “< back” button that changes the name dipending on the previus page loaded ("< Settings", “< General”, etc.). I saw Ionic has a NavRouter, maybe it’s what I need.

[quote=“max, post:3, topic:171”]
2 - I spent a few hours today making this tutorial which I think does what you are describing. Make sure to use the new version of Ionic: http://ionicframework.com/tutorials/fade-status-bar/
[/quote]Woh!! Amazing!! Thanks!! It works great, but, I don’t why, when I press the controller icon when the sidemenu is open, it doesn’t slide back on mobile Safari (on desktop Chrome it works correctly). You could try opening your example app on Safari.

EDIT: With Ionic alpha 0.9.18 it works, thank you!

I know… I’m asking too much :sweat_smile:
Is there a way to open and close the sidemenu sliding everywhere on the screen?
At the moment you can slide only on the center pane, while in Facebook you can slide everywhere. Also in that app, when the sidemenu is open, I’m not able to scroll up or down the content of the center pane, bacause it 's inactive and only touching it the sidemenu slides back (so not only touching the controller icon in the header bar).
I don’t know which are the goals of Ionic; if adding features of not official apps isn’t one of them, don’t take care of the question eheh

[quote=“max, post:3, topic:171”]
3 - For the down dragging, you need to make sure you have the proper config values in Cordova set
[/quote]If I wouldn’t use Cordova? I would let users to add my website to the springboard and use it like a “capable” iOS web app.

For the last question of the first post: try to open Facebook for iOS, open the friend list sidemenu, hold a friend name (which in ionic will be an item element) without moving your finger. The friend name will change the backgorund color, the font color, etc… Now if you scroll up or down it stops to “be held” while you scroll. This is present in every area of iOS, Settings app, lists, buttons, links. I think it should be added in Ionic to make it look more native than an html5 page (I don’t know how a ionic app looks at the moment, if this is only present in Safari or if this is present also when building native apps).
Thanks for the support!! :slight_smile: