kikinteractive / app Goto Github PK

That's it, just downloaded app.js and changed from zapto to jquery and tryed testing it on my phone and it wont work, clean install, both with zapto and jquery the screen freezes when i select the "Go to page 2" section.

Any ideas ?

hello,

I am new to mobile app.

as I can find documentation on local storage (I guess sqlite) with app.js

First - very nice, this will be very fast to build working prototypes (we used JQM before but this is already a great replacement for that).
What's missing at first glance:
0) user forum (ie google group, etc) for questions and comments

1. drop down or slide in menus - workaround can send to a list on another page - we'll see if we can work up some css for a dropdown from another project
2. enhance list w/ icons, thumbnails, chevrons, .... like media object - we have some css for this - can submit this on a pull request if desired
3. working on bringing in json from postgres http call - will submit this for an example in docs
4. should probably change version to major.minor.fix (2.0.0)
5. some kind of grid / table - we're currently using flexbox for this

Dialog boxes are not receiving touch events in Chrome (36.0.1985.128) on Android. I am testing with Android 4.4.2 (out of the box). This bug is reproducible with the demo app on code.kik.com .

Earl

I was wondering how to deal with nested objects and populators, it doesn't to work at all. Any ideas?

Hello! When i focus on input, on android 4.0.3., i notice flickering. The flickering occurs, then, when keyboard opens and closes.

Different platforms（like ios,Android）use a different style and js .
From what you think about this. Are there some low version of the android does not support the ios effects? ( like the dialog ,is Performance issues or something else?)

Hi there,

My app worked perfectly on the desktop but when I went to use it in the Kik browser the pop-up keyboard would cover the input fields I was selecting.

Is this a known bug? Is there a fix you could point to?

this.ready (on a page populator) is being called before a page's appShow event is being sent. This is counter intuitive. One would expect the page to be populated and ready before it is pushed onto the display stack.

I know that v2 isn't released yet, but this behaviour might be worth documenting.

Earl

The suggested way to markup grouped items in a list is to use a label element:

<ul class="app-list">
  <label>Animals</label>
  <li>Dogs</li>
  <li>Cats</li>
  <label>Fruits</label>
  <li>Apples</li>
  <li>Oranges</li>
</ul>

However, the <label> element should only be use to markup the caption of a form element [1]. It should not be used willy-nilly wherever the term "label" may fit.

I suggest that this grouping could be achieved using nested <ul> elements instead:

<ul class="app-list">
  <li class="app-list-group">
    <p>Animals</p>
    <ul>
      <li>Dogs</li>
      <li>Cats</li>
    </ul>
  </li>
  <li class="app-list-group">
    <p>Fruits</p>
    <ul>
      <li>Apples</li>
      <li>Oranges</li>
    </ul>
  </li>
</ul>

[1] http://www.w3.org/TR/html5/forms.html#the-label-element

It would be nice to be able to inline a specific transition to be executed with a data-target.

Ex.

I need to use a offcanvas navigation and it's working well but on IOS it doesn't scroll.

I know in app.js there's code to disable scroll but i do not find how to make a div to scroll outside app-page.

I did added these css and it work on Android but not IOS

overflow-y: scroll;
-webkit-overflow-scrolling: touch;

I tried the class app-scrollable or app-scrollhack or the data-scrollable but it didn't work.

I did find a great IOS scrollfix and the bounce and scrolling is easier to implement and keep the IOS bounce behavior.
https://github.com/joelambert/ScrollFix

Under some circumstances, such as truncating a list, it is necessary to cancel infinite scrolling. It would be nice if there was a clean API to do this.

Earl

In the source code, appjs judges the os / platform depending on some conditions.
But I can't find the way to specify a platform, like android-4, at the beginning.
Is there a way to do it? Thanks.

Hi,
I want to help and improve appjs but first of all I need to have the source code for the demos from website(youtube, image search ...).
//and don't tell me about the /demos/basic.html :)
thx

I use bower to manage all my front-end dependencies. Does App.js gonna register on it?

This isn't a bug per se, but it's something that is worth documenting since the behaviour is not obvious.

I have a button in the navigation bar that is defined by the following code:

With a click handler setup as follows:

App.populator('feed', function(page) {
...
$(page).find('.app-button.profile_icon').on('click', function() {
// executes once only (see explanation below)
}
}

I arrive at this page from an earlier page, and did not want the app-button treated as a back button. It therefore seemed logical (and perhaps redundant) to set data-back="false". However, setting data-back="false" causes the click handler to be cleared after the first click. The 'active' class is also not removed from the element after the first click.

It would be nice to be able to pop the page stack back to a specific data-page, rather than having to make multiple calls to App.back(...).

The call should take options to allow the caller to suppress 'appShow' events in intermediate app-pages.

I'm using infinite scrolling to add items to a list. Each list item is an app-button with a data-target. When the newly created list items are added to the scrollable field, they are not setup for click handling. Non-dynamic list items are correctly setup.

This bug can be reproduced by slightly modifying the list items in the infinite scrolling sample in basic.html

• Item
• not cloned and deleted

The first element will be cloned and added to the list via the infinite scrolling callback. The second will be moved to the head of the list, and be the only list item that works correctly.

The following screenshots also illustrate the absence of a click handler from the second (and subsequent list items).

Earl

Is there any way to create a fixed footer for an app page? Currently, the "app-content" height is calculated based on the height of the page minus the height of the header.

Curious is there's anything out-of-the-box that supports fixed footers?

Which are the transition effects that work on android 2.3???

i'm not sure if this is the proper project, however the default.css looks fine on an iphone and the iphone emulation in chrome, but the android (well at least evo) either won't render a page at all (on device) or ends up looking like https://www.dropbox.com/s/vaelrpmg85mh1tm/Screenshot%202014-04-01%2014.07.17.png

here is the relevant page

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
    <meta name="viewport" content="width=device-width,
                                   initial-scale=1.0,
                                   maximum-scale=1.0,
                                   user-scalable=no">
    <link rel="stylesheet" href="http://cdn.kik.com/app/1/default.css">
  </head>
  <body>
    <div class="app-page" data-page="home">
      <div class="app-topbar">
        <div class="app-button left" id="newGame">New Game</div>
        <div class="app-title">TITLE</div>
      </div>
      <div class="app-content"></div>
    </div>
    <script src="http://zeptojs.com/zepto.min.js"></script>
    <script src="http://cdn.kik.com/app/1/app.js"></script>
    <script src="http://cdn.kik.com/kik/1.0.3/kik.js"></script>
    <script src="/zerver/API.js"></script>
    <script src="/js/main.js"></script>
    <script>
      var USER = undefined;
      App.load('home');
      kik.ready(function () {
        kik.getUser(function (user) {
          API.serverLog("Inside getUser");
          if ( !user ) {
            alert("Y U NO ALLOW!!!!!!!");
          } else {
            USER = user;
            API.serverLog(JSON.stringify(user));
          }
        });
      });
    </script>
  </body>
</html>

So is there a reason that the droid stuff is broken and the ios stuff seems to work fine, or am I missing something?

add less or sass?

Hello,
First off, thanks for adding infinite scrolling to app.js. :-) It would be nice if the callback for infinite scrolling accepted an array of jquery (and zepto) nodes as well. Passing an array of jquery nodes currently throws a TypeError.

Earl

Is possibile to create a html file per page?? Because is not very handy to create pages with a lot of code inside one html file

I load external content from json with getjson.

The .on('click', function () do not work on Android. At first i though that it was a problem with Android but when i added &app_platform=ios to the url on my Android device, the problem was fixed.
So there's is something in app.js that change the .on behavior on Android theme.

Again, sorry if this isn't the right place to ask about this. After I enter some text into an input field and retract the keyboard my app doesn't slide back into place:

All the CSS and JS tricks I normally use when building a mobile web app aren't working. Is there anything I should look out for specifically?

After I run bower install appjs --save，the dist directory is not installed.

why cancle button is hiden?

.app-android .app-dialog .button.cancel {
display: none;
}

Hi there,

I have a button on my topbar defined like this:

<div class="app-button menu-button left"></div>

My problem is that when I go the page containing that button then get automatically the title of the previous page.

I know there's some functionality like this for the Back Button but I don't want to use it in that button and I think that maybe is a bug.

Thanks! 👍

See the demo app on IOS 7. After loading the website, when you first transition from one page to another, the bottom of the page is missing, and you can see the page before it.

scrolling up and down corrects the missing bottom

Hello Jairaj,

App.js websites still do not work well outside of the Kik browser due to the fact that scrolling takes place within the page's content element. By fixing the body height, the iOS 7 browser cannot hide its chrome while the user scrolls down the document.

Do you have any plans on fixing this?

Earl

Hello,
Could you please add an example of scrollTop() to basic.html if it is currently supported.

Earl

expected: does not have an error
observed: does have an error

Under "Sections" the code example:

<ul class="app-list app-section">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</div>
<div class="app-section">
  <div class="app-button">Send</div>
</div>
<div class="app-section">
  <input class="app-input">
</div>

<ul> should be closed with </ul> not </div>

Hi, for icons i think that all top bar butons like: arrows, chevrons, share, more ect.. would be great to be icons fonts like here: http://ionicons.com/
All good icons for IOS and Android are there.
and the usefull thing it's light and we can easly change butons colors.

I want to add more buttons, like sharing button ect.
i think top bar buttons should be positioned float right and float left to add as many buttons we need.
For exemple, i want to add a icon bar or list button before the back arrow to access Off-Canvas menu like Facebook and many real apps.

By the way, i'm implementing a Off-Canvas based on pushy.js and it work and look very good.
https://github.com/christophery/pushy
and i'm working to add a floating left list or menu icon fonts button.

Great for touch but a mobile UI plugin should co-support desktop. Buttons need cursor: default or cursor: pointer in CSS.

FYI I tried to integrate this library into a meteor app and got the problems below:

Uncaught TypeError: Cannot read property 'className' of null app.min.js?e23e3be4cbb5b4f8c1dfaf23ed220d76548ac3d1:47
(anonymous function) app.min.js?e23e3be4cbb5b4f8c1dfaf23ed220d76548ac3d1:47
(anonymous function) app.min.js?e23e3be4cbb5b4f8c1dfaf23ed220d76548ac3d1:47
(anonymous function) app.min.js?e23e3be4cbb5b4f8c1dfaf23ed220d76548ac3d1:47
(anonymous function) app.min.js?e23e3be4cbb5b4f8c1dfaf23ed220d76548ac3d1:49
Uncaught ReferenceError: App is not defined kik.js?96c7428579184d18af6bed6f2c24ffbdd6153280:1
(anonymous function) kik.js?96c7428579184d18af6bed6f2c24ffbdd6153280:1
(anonymous function) kik.js?96c7428579184d18af6bed6f2c24ffbdd6153280:15

Hi,
App.js is very very nice but missing:
tab bar, side menu, a little hardware acceleration for transition(maybe you already using but compare with lungojs seems not), refresh for list(scroll).
How I can use your demo from the website, where can I find them(github) ?

I like a lot app.js and hope to keep up the good work !

thx

It would be interesting to do functions for many pages in one shot

App.controller('home, lists, buttons', function (page)

The problem is if i understand how App work.
If for exemple i want to create a share buton in every app-topbar of let's say on every 10 pages i have.
i will have to do 10 times a App.controller with a code like:
$(page).find('#share').on('click', function () {//my share function});
instead of doing it once like i'm used to do with others mobile framework?

Apologies if this is the wrong place to air this issue but I can't get kik.browser.setOrientationLock('portrait'); to work because kik.browser is showing up as undefined. I can see the function in the minified kik.js but I can't tell what object it should be working upon.

first page load has a transition which causes a delay while waiting for 'transitionend'. if there are no pages in stack it should be an 'instant' transiton

image showing delay while waiting for transtionend

The thing is, i have a input box at the middle of the screen, while i trigger the input, the input keyboard is faded in, and the input box was covered by the keyboard.
I have to scroll the content up to see the input box.
That is not that native, and feels not good.
Normally, the keyboard would push the input box to move up.

Is there a way to do things like that?

Thanks

I'm trying to add list items to an existing list (somelist). The existing list item (Foo) works as expected, it shows the expected data target (sometarget) when Foo is clicked. However, the list items that are dynamically added via populator doesn't work as expected (doesn't show sometarget).
Is there any example code on how to use clickable dynamic list item?

Here's the code snippet: https://gist.github.com/cliffano/b86e7a6ddf4d1c451e3e

Currently a data-page's state is stored during a stack push. This is great; however, it would be nice if the page state could be saved when loading a page without a back button.

This would be functionally equivalent to switching between tabs (for example tab bars under iOS).

An app-tab could be defined by a name and an app-page that would serve as a template for the first page that is displayed when loading the tab.

Earl

Any plans of beefing up the current documentation?

1. I have download the demo. and edit the code to a new demo.
2. the problem is that when the index.html page not include the end of body script tag of "//cdn.kik.com/kik/1.0.9/kik.js" . the directive data-target='xx' can not call. so my cellphone sumsung s5830i(android 2.3) can not navigation to a new page.
3. you can visit the website http://www.yz6970.com/ios/ to see it problem
4. you can download mycode to fix it. the website is http://www.yz6970.com/yung/system/jsp/rar_down.jsp
5. thanks, my email is [email protected]. from china, english is poor. can you catch My mean?

Hi there,

when you hope to launch the App.js v.2? I find it very interesting, the infinite scroll is a plus, and I'm waiting for it in order to update my app.

Thanks!
Miguel

Hi there!

I really like what app.js can do, but how do I package it all?