UISlideout breakes navigation

[sk91]

Hi guys, I am trying to create a list of items + global menu on my app.

My #main article has the list, and I use data-goto on li to view details.

<article id="main" class="current">
    <section>
        <ul class='list'>
            <li class='nav' data-goto='article1'>Article 1</li>
        </ul>
    </section>
</article>

For my global menu I wanted to use UISlideout but, each time I run $.UISlideout(), all navigation in the app breakes.

The function removes current, next, previous classes from all articles and put's show.

What am I doing wrong? How is this supposed to be used?

Thanks!

[sourcebits-robertbiggs]

Hey Kovalov,

Slideouts are easy to implement. If you have the latest version (3.0.6) of ChocolateChip-UI you can do it like this. First you create the slide out:

// Create an empty slide out menu: $.UISlideout();

This will create an empty slide out for you. You used to have to use [].append or whatever to populate the slide out with markup for the menu. However, that is no longer necessary. Now you can populate it very easily by using the $.UISlideout.populate method. You pass it an array of key value pairs, the key is the id of the article you want to show, and the value is the label the user will see. So, here’s an example.

// Populate the slide out: $.UISlideout.populate([{music:'Music'},{pictures:'Pictures'},{recipes:'Recipes'},{contacts:'Contacts'}]); This will create the following structure in the slide out:

• Music

• Pictures

• Recipes

• Contacts

If you’re still having problems, let me know. Cheers

On Nov 30, 2013, at 7:19 AM, Kovalov Maxim notifications@github.com wrote:

Hi guys, I am trying to create a list of items + global menu on my app.

My #main article has the list, and I use data-goto on li to view details.

• Article 1

For my global menu I wanted to use UISlideout but, each time I run $.UISlideout(), all navigation in the app breakes.

The function removes current, next, previous classes from all articles and put's show.

What am I doing wrong? How is this supposed to be used?

Thanks!

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

[sk91]

Hey,

Thanks for your response.

My problem is a little different though.

If I create the main article as I described above, then add the slide-out you have described the following happens:

1. Assuming I have all corresponding articles, the slide-out works as expected, it navigates without a problem.
2. All navigation from the main article (implemented with go-to) stops working.

I think that happens because the the $.UISlideout function removes all "current", "next" classes from my articles.

I assume it's a bug and should not be happening, or may be there is a special way to handle go-to navigation after the slideout is initialized?

[sk91]

Chrome throws the following error to the console when i hit the go-to li:

Uncaught TypeError: Cannot read property 'id' of undefined

[sourcebits-robertbiggs]

Oh, so you’re saying you have a navigation list AND you want to use a slide out with it? They are mutually exclusive. If you’re using a navigation list, you wouldn’t use a slide out. If you’re using a slide out, you wouldn’t need a navigation list. If you just have a few items, you might look at using a tab bar with a navigation list. That’s easy to pull off.

Normally the slide out is for apps that don’t want to have the user drilling down through lists. It’s an alternate way to implement navigation in your app. Because of that, it takes over handling the states of the articles the same way the navigation list does. Is there some reason you need the navigation list AND slide out?

On Dec 1, 2013, at 9:13 AM, Kovalov Maxim notifications@github.com wrote:

Hey,

Thanks for your response.

My problem is a little different though.

If I create the main article as I described above, then add the slide-out you have described the following happens:

Assuming I have all corresponding articles, the slide-out works as expected, it navigates without a problem. All navigation from the main article (implemented with go-to) stops working. I think that happens because the the $.UISlideout function removes all "current", "next" classes from my articles.

I assume it's a bug and should not be happening, or may be there is a special way to handle go-to navigation after the slideout is initialized?

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

[sk91]

Well, my app is a bit complex:

1. I have a person list, which should use navigation list to navigate to person details.
2. I want to use tabs or something similar on this nav list to filter different person types.
3. Next I thought to use the slide out as a global menu to navigate to other parts of the app, like Blog-articles list and articles themselves, user profile , some actions like logout, etc.

I guess I can implement a slide-out on my own for that. I need a second slide-out anyway coming from the second side for advanced filters.

[sourcebits-robertbiggs]

I see, that’s clearer. So, in app design there are several conventions that platforms follow and which ChocolateChip-UI therefore follows. Mobile apps tend to be rather focused in purpose. As such OS platforms offer several types of apps, tab bar apps, navigation list apps, and slide out apps. From the point of Information Architecture and User Experience, you might want to rethink how your putting this app together. Having too many kinds of navigation in the same app will lead to a confusing situation for your users. Best to rethink out to organize your workflow so that users can get to the things they need to as quickly as possible with consistent procedures throughout the app.

On Dec 1, 2013, at 9:18 AM, Kovalov Maxim notifications@github.com wrote:

Chrome throws the following error to the console when i hit the go-to li:

Uncaught TypeError: Cannot read property 'id' of undefined

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

[sk91]

Thanks! You have been very helpful.

Have a good night.