triceam/app-ui

app-UI is a collection of user interface components that may be helpful to web and mobile developers for creating interactive applications using HTML and JavaScript, especially those targeting mobile devices. app-UI is a continual work in progress - it was born out of the necessity to have rich & native-feeling interfaces in HTML/JS experiences, and it works great with PhoneGap applications (http://www.phonegap.com). app-UI can easily be styled/customized using CSS.

app-ui's Issues

Simple ViewNavigator exemple for noob

hello, sorry for my english.
i want to use app-ui to display content and i use the Simple ViewNavigator exemple.
but in the exemple, all the link have the same target (var html) and the same result (Cable television is a system of providing television programs to consumers...)

my question is how can i modify the function to display different links and different content.

thanks you very much for helping me

HTML 5 range tag doesn't work

@triceam. I implemented the basic slidingview on iPhone. Sliding view perfectly fine but it stopped the HTML 5 range tag. Can you please help me to fix the issue.

touchstart in App UI slidingview

Hey Andrew,

I'm working on a small app and i used App UI "sliding view" as a start to have a fb style side menu. While working on this i have a small issue: I have a gallery (swipeview) in the #body div. The touchstart event from app UI is observing a swipe in the #body div so now when i swipe in my img gallery the side menu gets triggerd..

Any idea on how i can make the slidingview.js a bit smarter so it doesn't show the menu on a swipe in the gallery (swipe in the div#slider)? the div #slider is in the #body div so its good that the swipe event gets triggerd but i would like to disable it for the #slider div.

Android S3 Jelly Bean 4.1.2

@triceam I was wondering if you could tell me what I am doing different, i am using your Fresh Food Finder as an example, when I loaded up the app from google market the animation works smoothly my test is just pressing the About button then back. My issue is when i try to recreate the app the animation header "Welcome" when i click about the back button and the title sort of flinches left to right, when i click the back button it places the welcome position to the right and chopped off part of m and e.

Toggle button for oriDomi sidebar

Hi,

Can some one help me? I want to add a toggle button for open and close the oriDomi sidebar. I'm working with example 03 - slidingView/04 - oridomi/index.html

Thanks you so much

SlidingView sidebar breaks JQuery mobile buttons

Using JQuery mobile items like data-role="btn" doesn't work in the sidebar. Is there a way to resolve the css so that JQuery mobile still applies within the sidebar div?

Splitviewnavigator on small screens

It would be cool if the left side menu of a Splitviewnavigator would move automatically to a MENU button in the top bar if the app/website is run on a standard phone instead of a tablet. In this way, one app/website can be developed for small & large screens at the same time.

Scrollbar not intuitive on desktop browsers

To scroll a page on desktop browsers, users have to use the "click and pull down" movement with their mouse. Furthermore, clicking and pulling activates the link underneath the mouse.

Perhaps a detection system should be put in place to disable mobile scrolling on a desktop pc?

Choppy page transition

Hi,

I'm using the view navigator to transition between page and I'm getting a very choppy transition. Basically it looks like the screen 'flickers' on every transition. However, when I slow down the animation, I see that the view that is sliding in takes too long to appear (basically it's almost like it gets rendered in chunks).

Any idea how to solve this issue?

Cheers,
Eugene

Viewnavigator not working correctly on Android

Severe cosmetic bugs using the viewnavigator menu on Android browser (tested on ICS).

Event listeners on views disappear

Event listeners disappearing on a view once a new view has been pushed into the view navigator.

separate views for mobile and tablet

Hey Andrew,

Not really an issue but i'm using split view right now and that looks great on a tablet but for mobile it isn't optimal... especially when you put your mobile in landscape and the nav view shows op. So i'm thinking about handling actions different bases on device, for example instead of pushing html to pushSidebarView() using pushBodyView for nav pages.. So i have to make the action bases on the device.

I notice this.winPhone in SplitViewNavigator.js and i thought maybe its an idea to add a var like device = "isMobile" or "isTablet" or something like that to make it possible to have device info and react to that.

I wonder how you think of this, maybe you have advice to handle mobile and tablet in the same code base with different views?

Thanks for you time, Daniel

ViewNavigator's Back Button not working after loading a view containing a youtube video

After pushing a view containing a youtube video ( via iframe ) , the back button is not working, after some investigations, it appeared that :
ViewNavigator.animating is set to true and therefore , ViewNavigator.prototype.popView returns without poping the view..
This behavior doesn't happen all the time, but after some few pushes and pops ( and has been noticed on android ).
To fix my problem, I removed the test ( this.animating ) from ViewNavigator.prototype.popView but I'm sure there is a better way to fix this.
Thank you.

Documentation

It's non-existant... need to fix that

BlackBerry Playbook buttons are very picky

Buttons on the view navigator are very picky, you have to be overly-precise for the click action to occur - this doesn't happen with other platforms, or with "normal" web links. Something in the framework is causing this behavior.

Back Button/History Integration

To integrate or not? That is the question. There are existing frameworks/plugins to allow history management in HTML/JS web apps... why reinvent the wheel?

select got from Ajax not working in Android 2.3.x

Hi,
I wrote an app for iOS and Android with App-ui. Everything's working well in iOS and Android ICS, but in Gingerbread, when I get select inputs from an Ajax request, the select won't open.
If I rote the phone, it's working well again. But before it doesn't work. The select which are set without Ajax (directly in the code) are working well.

It's been a week I'm looking for a solution.

Thanks a lot in advance.

enable sliding view using a button

Is there a way to open and close the "draw" in sliding view using a button like the button with 3 lines that some apps have in the top left
Is there a way to close the sidebar when someone clicks and item so that they can see their content without having to close the sidebar first

form fields are not working

Good afternoon,

when i insert a form, the fields are not working, in terms of its there but its a sort of disabled. you can click it. i think because of a 'layer' is on top of it but im not sure what do about it and maybe i'm missing something...

for example:

            var defaultView = { title: "Form field check", 
                      view:  $('<div id="defaultView"><input style="z-index:999;" type="text" class="span3" placeholder="Email"></div>')
                            };


            //Setup the ViewNavigator
            new SplitViewNavigator( 'body', "Menu", "btn primary" );    
            window.splitViewNavigator.pushSidebarView( controller.rootView );
            window.splitViewNavigator.pushBodyView( defaultView );

inserts a input type text in the Bodyview and in my project the text field is not working in Desktop browsers and safari mobile. I already give it a z-index:999 and removed the jquery click on 'this.contentOverlay' for testing but that doesn't make any difference.

I also would like to help to improve the code base but as there is no manual i'm not sure if its really a bug or that its my code...

Would like to know how form elements behave on your side?

Greetings, Daniel

Fixed toolbar/tabbar (request)

A toolbar / tabbar that stays fixed on the bottom of the screen would be a nice addition!

Posting

@triceam Is there a way to post to the next view or do a check on the android back button or the webview back button to see if the page on the history is the home page?

using "scroll: false" on a view descriptor doesn't actually disable scrolling

Using "scroll: false" on a view descriptor doesn't actually disable scrolling when pushing a new view into the ViewNavigator

Sliding fixed footer in body in slidingview (request )

Hi,
Is it possible to have a fixed footer at the bottom of the body, which stays put when vertical scrolling but moves along with the body when slided to the right ?
Thnx

ViewNavigator CSS breaks Bootstrap

Just by including the ViewNavigator CSS a Bootstrap site will break. Specifically - text that was previous under the black bar

http://www.evernote.com/shard/s3/sh/9760020c-539a-4602-be25-b4db624ba519/958e8089e4d072233634fae44b4b6eaf

gets pushed up:

http://www.evernote.com/shard/s3/sh/c440da62-535a-41b9-b2b8-f68f4e29daf0/e05f8d789b373da8a412549e9d12a965

It is the BODY declaration in the CSS.

sliding view mouse latching

On Safari 6 (10.8.1) as well as Chrome (haven't tried others yet)

http://triceam.github.com/app-UI/examples/samples/03%20-%20slidingView/01%20-%20basic/index.html

• Reload page
• Click, drag-to-expose-the-red-area
• With the mouse still down, move mouse outside of the window
• Return to the window (with mouse up or down)

Expected:
Mouse-out-of-window or at least a followup click cancels moving the divider and leaves the page slidable again

Observed:
Red-white divider continues to track the mouse once it returns to the window, and the original slide cannot be cancelled without refreshing the page.

How to Add Footer Same like Header in app-ui

Thanks for this wonderful framework.
hi I want to add the footer same like the header but with some navigation icon like in ios apps.

please help waiting for you reply.
Rahul Kumar

display loading indicator while rendering a page

How can i display the loading indicator while im rendering a page? i get the page content from rss feed so it can take a while.

Prevent reload when using back button

Hi,

I´m using App-UI and mustache.js. On one page mustache loads a template with a long list with links that takes you to new pages. Works perfectly. The thing is when you press the back button go get back to the list the page makes a refresh/reload that causes a flicker when the content is loaded again. on the first load you cant se this because your on the top of the page but when you go back from a page you are in the middle of the page where you pressed the link. I see the same behavior in the Fresh Food finder app when you go from marketdetailsview back to listview.

My question is, is there any way to prevent this reload/refresh? The content is static so there is no use for a refresh anyway.

Thank you for App-UI and thanks in advance for the helping hand.

ViewNavigation Issue With Jelly Bean.

@triceam
Thanks for these wonderful framework
working perfectly in iphone 4 and android lower version like 2.3

I did some changes in the ViewNavigator.js files according to me for header and footer.

I app is working fine in lower version of android version but not working in jelly bean.

when i click on the list item it automatically push the other method views then white screen will appears.

Thanks in advance. Please reply asap urgent.

Disable Header on Homeview

I was wondering if there is a good solution to hide the header on certain views?

For Example: In my app I have a homescreen where I don't want a header. On all other views I would like to display the header with the back button as usual.

I came up with this somewhat ugly solution:

function pushView(view) {
    window.viewNavigator.pushView( view );

    if(view.title === 'Home')
    {
        jQuery('.viewNavigator_content').css('top', 0)
    }
    else
    {
       jQuery('.viewNavigator_content').css('top', '46px') 
    }    
}

This however requires to also check everytime I press the backbutton etc...

Is there a more elegant solution? Thanks in advance for your help!

Using scrollToElement in App-UI

Hi,

First of all, thank you for App-UI! It´s lightweight, fast and amazing.

I have a long list divided in alphabetical order with a header for each letter. I have button for each letter on the top and want to scroll to the header when the button is pressed for each letter. I cant get this to work. I first tried with anchor-tags but that messed up the page badly. I have read Cubics iScroll-documentation and tried all tips I could find on google, no luck..

Im sure its not that hard but then again im still learning.
Any tips on how to do this?

Thanks in advance.

Refactor Navigator creation/constructors

currently has multiple parameters... should make it so it takes one parameter - an object that can have attributes. The param attributes would be used to overwrite default parameters. This will be more scalable in the long term.

scroll bar included in transistion

Hey Andrew,

First of all: thank you for app UI.

In my project i have some pretty long pages so iScroll comes in and adds the scroll bar to the container... Now when i load new content in the container by using window.splitViewNavigator.replaceBodyView( content ); the transition includes the scroll bar from iScroll. Only on Chrome and Safari desktop.. on mobile the bar disappears nicely after scrolling.

Would be nice to have the bar excluded from the transistion, any ideas?

Thanks, Daniel

iOS Styled Back Buttons

make them possible, with the left-side point like an arrow.

ViewNavigators Don't maintain scroll position

ViewNavigators don't maintain scroll position when navigating back using popView(), they always reset back at the top.

Missing demo for "sliding view"

The demo on page http://triceam.github.com/app-UI/examples/samples/03%20-%20slidingView/01%20-%20basic/index.html just shows "body here".

Make styles easier to customize

Restructure CSS for view navigator so that it is easier to customize.

auto option for backLabel

I added this in some code i'm writing, so i wouldn't have to pass around escaped titles throughout the application.

This is just a suggestion.

in ViewNavigator.prototype.replaceView
...
if (viewDescriptor.backLabel == 'auto') {
viewDescriptor.backLabel = this.history.length > 0 ? this.history[this.history.length-1].backLabel : null;
}
this.history.push...

in ViewNavigator.prototype.pushView
...
if (viewDescriptor.backLabel == 'auto') {
viewDescriptor.backLabel = this.history.length > 0 ? this.history[this.history.length-1].title : null;
}
this.history.push...

Thanks for app-ui.

SlidingView - Slide in from different direction

Has anybody implemented SlidingView where the side content comes in from the right instead of from the left?

Split View Navigator & Android

Orientation change happens before screen is actually resized, so the view navigator content doesn't resize correctly... Need to fix this.

Android odd behavior

Odd behavior on android... link/button highlights aren't aligned (not that big of an issue), but hover effects don't work properly. This is related to the CSS style:
-webkit-backface-visibility: hidden;

This style is required to have smooth animation on Android. Without it, Animations flicker on most Android devices.

Vertical scrolling not working

As soon as I include the following line in my test page
<script src="slidingview.js"></script>

I can no longer vertical scroll the page. Is this known or is there a bug here? I've tried playing with all sorts of overflow:scroll changes, but to no avail. As soon as I comment out the above line and refresh, then I can vertical scroll just fine.

Viewnavigator error on IE8

The viewnavigator sample at http://triceam.github.com/app-UI/examples/samples/01%20-%20viewnavigator/01%20-%20basic/index.html

returns the following error on IE8:

Line: 843
Error: Object doesn't support this property or method

How to back to home screen after 10 the view

i have list within list. now i am 10th list now i want to go back to first view.. what command should i used.

ViewNavigator Header Not Visible in FireFox

The header elements (button and label) do not show up in FireFox (desktop browser)

ViewNavigator CSS Style Issues in IE

The ViewNavigator works in IE, but has some CSS styling/layout issues. Not a high priority to fix, but worth noting.

Trying to create an application with slide menu, and JSON list with app-UI

Thank you in advance who will help me and sorry for my bad English. I'm trying to create a PhoneGap application with jquery mobile ios devices. The result is not bad but very slow, due to problems in the data-slide transition when data is imported from json are too many slow. The style used is that of the side menu with slide effect http://jquerymobile.com/demos/1.3.0-beta.1/docs/demos/panels/panel-nav-form.html. I have seen the extraordinary results of app-UI, trying https://github.com/triceam/Fresh-Food-Finder the application. I'd like to implement a slide left side menu with three links like youtube menu, where clicking on any of them opens a list imported from json and effect similar https://github.com/triceam/app-UI/blob/master/samples/01%20-%20viewnavigator/05%20-%20legacy/index.html, using app-UI, which is definitely faster and more efficient. I tried to implement, but I'm not an ace with javascript, and I'm a little demoralized. Can anyone give me some guideline to follow? thank you

SlidingViewNavigator doesn't work in Firefox

It fails and gives the error:
uncaught exception: [Exception... "Not enough arguments" nsresult: "0x80570001 (NS_ERROR_XPC_NOT_ENOUGH_ARGS)" location: "JS frame :: file:///Users/triceam/Documents/dev/JS%20ViewNavigator/JS%20ViewNavigator%20Framework/src/slidingview/slidingview.js :: anonymous :: line 39" data: no]

Although this works fine in webkit-based browsers.

Demo freezes on Android 2.3.6 phone

Hello,

The demo at http://triceam.github.com/app-UI/examples/samples/04%20-%20browser%20history/index.html on my Android phone, when navigating back to the list view

Support loading a view via HTTP

Allow me to do

viewNavigator.pushView("some relative url with optional jquery selector to get one dom item from it");