Nav Buttons don't function if SlideOut is present

[damianharvey]

If you have a SlideOut then any buttons in the nav (eg. placed to the right) will cease to function. Reproducible on the CodePen SlideOut example: http://codepen.io/anon/pen/KitlF (forked)

[sourcebits-robertbiggs]

Damian,

In the codepen example you provided, I don’t see any event hooked up to the “contact” button. What do you want that to do? You need to do something like

$(‘#contacts’).on(‘singletap’, function() { // Do something here. });

Regular buttons are incapable of doing anything until we wire up an event for them.

Robert Biggs Product Director ChocolateChip-UI www.sourcebits.com

(415) 288-3697 Sourcebits, Inc. 211 Sutter Street. STE 200 San Francisco, CA 94108

On Feb 21, 2014, at 4:50 PM, damianharvey notifications@github.com wrote:

If you have a SlideOut then any buttons in the nav (eg. placed to the right) will cease to function. Reproducible on the CodePen SlideOut example: http://codepen.io/anon/pen/KitlF (forked)

— Reply to this email directly or view it on GitHub.

[damianharvey]

Hi Robert,

Sorry about that. New to Codepen. Try it now. It still fails me. If you comment out the $.UISlideOut the "Test" button will work. I haven't figured out the exact cause yet but it's something to do with the slide-out-app class on the body.

I've rolled my own SlideOut panel but the consequence of that was that I had to wrap all of the pages (navs/articles) in a containing div (so I could slide it sideways as it sits on top of the menu). Do you see any potential problems with this wrapping? The docs say that the navs/articles should be at body level.

Thanks so much for this framework. I'm loving using it. Very easy and such a breath of fresh air after wading through jQuery mobile.

Regards,

Damian

On 22 February 2014 13:21, sourcebits-robertbiggs notifications@github.comwrote:

Damian,

In the codepen example you provided, I don't see any event hooked up to the "contact" button. What do you want that to do? You need to do something like

$('#contacts').on('singletap', function() { // Do something here. });

Regular buttons are incapable of doing anything until we wire up an event for them.

Robert Biggs Product Director ChocolateChip-UI www.sourcebits.com

(415) 288-3697 Sourcebits, Inc. 211 Sutter Street. STE 200 San Francisco, CA 94108

On Feb 21, 2014, at 4:50 PM, damianharvey notifications@github.com wrote:

If you have a SlideOut then any buttons in the nav (eg. placed to the right) will cease to function. Reproducible on the CodePen SlideOut example: http://codepen.io/anon/pen/KitlF (forked)

Reply to this email directly or view it on GitHub.

Reply to this email directly or view it on GitHubhttps://github.com/sourcebitsllc/chocolatechip-ui/issues/49#issuecomment-35792043 .

[sourcebits-robertbiggs]

I’ll put together a codepen for this tomorrow. It’s getting late here.

Robert Biggs Product Director ChocolateChip-UI www.sourcebits.com

(415) 288-3697 Sourcebits, Inc. 211 Sutter Street. STE 200 San Francisco, CA 94108

On Feb 21, 2014, at 7:25 PM, damianharvey notifications@github.com wrote:

Hi Robert,

Sorry about that. New to Codepen. Try it now. It still fails me. If you comment out the $.UISlideOut the "Test" button will work. I haven't figured out the exact cause yet but it's something to do with the slide-out-app class on the body.

I've rolled my own SlideOut panel but the consequence of that was that I had to wrap all of the pages (navs/articles) in a containing div (so I could slide it sideways as it sits on top of the menu). Do you see any potential problems with this wrapping? The docs say that the navs/articles should be at body level.

Thanks so much for this framework. I'm loving using it. Very easy and such a breath of fresh air after wading through jQuery mobile.

Regards,

Damian

On 22 February 2014 13:21, sourcebits-robertbiggs notifications@github.comwrote:

Damian,

In the codepen example you provided, I don't see any event hooked up to the "contact" button. What do you want that to do? You need to do something like

$('#contacts').on('singletap', function() { // Do something here. });

Regular buttons are incapable of doing anything until we wire up an event for them.

Robert Biggs Product Director ChocolateChip-UI www.sourcebits.com

(415) 288-3697 Sourcebits, Inc. 211 Sutter Street. STE 200 San Francisco, CA 94108

On Feb 21, 2014, at 4:50 PM, damianharvey notifications@github.com wrote:

If you have a SlideOut then any buttons in the nav (eg. placed to the right) will cease to function. Reproducible on the CodePen SlideOut example: http://codepen.io/anon/pen/KitlF (forked)

Reply to this email directly or view it on GitHub.

Reply to this email directly or view it on GitHubhttps://github.com/sourcebitsllc/chocolatechip-ui/issues/49#issuecomment-35792043 .

— Reply to this email directly or view it on GitHub.

[sourcebits-robertbiggs]

Damian,

Could you post me a link perhaps to chocolatechipui@gmail.com I want to see what you’re doing. I’m on the West Coast of the US, Pacific time zone. I’d be up for a Skype chat if that’d help sort this out for you. Let me know.

Cheers Robert Biggs Product Director ChocolateChip-UI www.sourcebits.com

(415) 288-3697 Sourcebits, Inc. 211 Sutter Street. STE 200 San Francisco, CA 94108

On Feb 21, 2014, at 7:25 PM, damianharvey notifications@github.com wrote:

Hi Robert,

Sorry about that. New to Codepen. Try it now. It still fails me. If you comment out the $.UISlideOut the "Test" button will work. I haven't figured out the exact cause yet but it's something to do with the slide-out-app class on the body.

I've rolled my own SlideOut panel but the consequence of that was that I had to wrap all of the pages (navs/articles) in a containing div (so I could slide it sideways as it sits on top of the menu). Do you see any potential problems with this wrapping? The docs say that the navs/articles should be at body level.

Thanks so much for this framework. I'm loving using it. Very easy and such a breath of fresh air after wading through jQuery mobile.

Regards,

Damian

On 22 February 2014 13:21, sourcebits-robertbiggs notifications@github.comwrote:

Damian,

In the codepen example you provided, I don't see any event hooked up to the "contact" button. What do you want that to do? You need to do something like

$('#contacts').on('singletap', function() { // Do something here. });

Regular buttons are incapable of doing anything until we wire up an event for them.

Robert Biggs Product Director ChocolateChip-UI www.sourcebits.com

(415) 288-3697 Sourcebits, Inc. 211 Sutter Street. STE 200 San Francisco, CA 94108

On Feb 21, 2014, at 4:50 PM, damianharvey notifications@github.com wrote:

If you have a SlideOut then any buttons in the nav (eg. placed to the right) will cease to function. Reproducible on the CodePen SlideOut example: http://codepen.io/anon/pen/KitlF (forked)

Reply to this email directly or view it on GitHub.

Reply to this email directly or view it on GitHubhttps://github.com/sourcebitsllc/chocolatechip-ui/issues/49#issuecomment-35792043 .

— Reply to this email directly or view it on GitHub.

[ajmalmsali]

I did a work around by a dedicated listener with the id, even though not recommended to use, you may find this useful, until its fixed, chUI is awesome, this even misses the transition.

https://gist.github.com/ajmalmsali/9249594

[rbiggs]

Yup, I'm aware of that. I currently working on a bunch of adjustments for the Windows theme. I should have all of this checked in by end of day Friday. Seems like in particular the small screen of the cheaper Lumias needed quite a few adjustments to be useable. 

On Thursday, February 27, 2014 5:01 AM, ajmalmsali notifications@github.com wrote:

I did a work around by a dedicated listener with the id, even tough not recommended to use, you may find this useful, until its fixed, chUI is awesome, this even misses the transition. https://gist.github.com/ajmalmsali/9249594 — Reply to this email directly or view it on GitHub.

[sourcebits-robertbiggs]

Damain, I took a look at your Codepen. Yeah, that will not work. That is just not a good approach for navigation. Buttons in the nav or toolbar are not for navigation but to implement actions on content in the current article. This is just standard behavior across all mobile operating systems. If you're using a slide-out, it should be your primary means of navigation. Now a button in the nav might reveal some type of relevant information or even a set of tools in a modal dialog, a sheet or some or modal artifice. These however would not be navigational in nature.They would be for acting on the currently displayed content.

ChocolateChip-UI's navigation patterns are created on those that Apple uses in iOS: navigation lists and tabbars. The slide out is an extra provided because it has become popular in so many apps. There are also several artifices to navigate content in a particular article, such as the paging control, segmented buttons, etc. These do not take the user to another article.

Our company has created over 500 apps on Apple's app store over the past six years. Out of those, over 30 have been in the top 10 list. One thing we've learned is that users do not like inappropriate use of standard controls. Furthermore, if you intend to Phonegap your app to submit to Apple for distribution on their app store, if your navigation is non-standard, it will almost certainly be denied for violating Apple's Human Interface Guidelines. Such violations are a primary reason for rejection.

The UIGoToArticle method is for use with a standard navigation list for navigating through articles. The user would know that the navigation list works that way due to the visual cues of the right pointing navigation indicators on each list item. And after reaching the next article, the user would be able to return to where they came by the presence of a back button. Back buttons don't make sense when your app is using a slide-out navigation system. The slide-out itself is the means of accessing the various articles of the app, similar to how a tab bar works. Instead of having a button in the nav, that should be an item in the slide-out. You can do some staying to make it stand out from the other items in the slide-out.

When creating an app, it is very important to first define clearly what the user workflow is. This will inform how the user will access the content of the app - whether it uses a navigation list, tab bar, slide-out, paging control, popups, popovers, sheets, etc.

Hope this help clear up the use cases for the various navigation schemes that ChocolateChip-UI offers.