Comments (7)
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 [email protected] 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.
from chocolatechip-ui.
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
[email protected]:
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 94108On Feb 21, 2014, at 4:50 PM, damianharvey [email protected]
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//issues/49#issuecomment-35792043
.
from chocolatechip-ui.
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 [email protected] 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
[email protected]: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 94108On Feb 21, 2014, at 4:50 PM, damianharvey [email protected]
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//issues/49#issuecomment-35792043
.—
Reply to this email directly or view it on GitHub.
from chocolatechip-ui.
Damian,
Could you post me a link perhaps to [email protected]
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 [email protected] 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
[email protected]: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 94108On Feb 21, 2014, at 4:50 PM, damianharvey [email protected]
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//issues/49#issuecomment-35792043
.—
Reply to this email directly or view it on GitHub.
from chocolatechip-ui.
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
from chocolatechip-ui.
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 [email protected] 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.
from chocolatechip-ui.
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.
from chocolatechip-ui.
Related Issues (20)
- Example navigation-backto: scroll always results entering detail page HOT 2
- Grid do not work on Safari (iPad) HOT 2
- Chocolatechipjs in its own repo HOT 2
- Back button not rendering correctly on WP8 HOT 3
- Phonegap iOS scrolling singletap hadling issues HOT 23
- $.UIEditList callback function when an item is deleted HOT 6
- data-goto not functioning in Firefox 34, 35 HOT 7
- Chocolatechip-ui app freezes after iOS unlock HOT 2
- Keyboard autofocus being triggered on input fields
- data-goto syntax in docs is wrong HOT 1
- Where do I find example for buttons? HOT 2
- Cannot read property 'classList' of null HOT 4
- chui 3.5.5 does not work on Android Jellybean (4.2) HOT 12
- chocolatechip-ui.json purpose? HOT 3
- $.UIDeletable cannot read property 'on' of undefined HOT 13
- $.UIGoToArticle() loses history between tabs HOT 12
- wp8 nokia lumia 520 "back button issue" HOT 5
- Low Memory Warnings HOT 6
- Error when using $.UIGoToArticle HOT 9
- Tabbar on Android - with scrolled content double click needed HOT 11
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from chocolatechip-ui.