If I try to add cordova-1.9.0.js in my html file, i have "Uncaught TypeError: object is not a function at file chocolatechip.js:352" .
I am on Android 2.3.6 emulator

I'm using note2 to view chui,it show just like it

it's bug,and how to fix it?

Hi Robert, I was playing with the examples when evaluating CHUI, and ran across a problem when running this example:

/examples-android-zepto/templates/app-handlebars.html

The $.getJSON call throws a syntax error exception because of the semicolons in data.json. I removed the two semicolons and the example worked fine.

Cheers.

While the SplitView has support for the navigation list popover in portrait orientation for the iPad, is there any way to implement a custom popover or popovers in an app?

An XML microformat setup for ChUI would be wonderful, this is because I am working on producing a Chui app generator(HTMLJS/CSS in a .ZIP), written PHP, taking XML input files. This would work with a Java/Python app which would enable visual app production. This would enable Mass app production complete with native style GUIs, written with the speed of Zepto.

Here is an Example XML App Markup at:
https://raw.github.com/gist/4141100/e7649af12a6b34018f1b35bc94499e40ab4417cc/app.xml

I think that an example index linked also online it would be wonderful.

I tested CHUI's Popup Control on my Android device such errors appear below:
CHUI GL ERROR - after deleteUnusedTextures () glError (0x502)

When using tabbar with views the $.UINavigationList array is not updated when the user switch to any view using tabs, this behavior prevents the back button from working correctly.

I'm not a fan of extending DOM prototypes because of the issues it has caused libs like PrototypeJS.
See http://perfectionkills.com/whats-wrong-with-extending-the-dom/.

WebKit now has DOM4 mutation method support for append(), prepend(), before(), after(), replace(), and remove(). See https://plus.google.com/u/0/113127438179392830442/posts/KLfpJKLDEsv.

ChocolateChip's added methods conflict and introduce inconsistencies in behavior.

Problem: I needed a tablecell to have details and be deleteable. So I used both and when you try to click the animation is fired taking it to the the href.

Fix:
chui.ios.js v2.1.1 line 1555:

$(disclosure).on($.userAction, function(e) {
e.stopPropagation();

And due to the fact that my name is not Tom and that I'm not running Mac OS X, the build fails.

A good solution would be to build in a folder inside the repository directory.

When implementing a deletion table, I found that if I want the clicking of the table cells to navigate away from the page, that it still does so even after you have hit the "edit" button and are trying to choose which table cells you want to delete. After digging in your code I came up with some simple fixes if you would like to see them. Basically I found that if you save where the href attribute is going and remove it from the table cell immediately after you have clicked the "edit" button, and add the href attribute back tot he table cell after you have clicked done, then it keeps the page from navigating away to somewhere you do not want to go yet. Another fix in my code that you may notice with the comment blocks around it is that when you are trying to choose which table cell you want to delete you have to click right on the small circle that appears. To fix this I bound the click to the "parentNode" which is the entire table cell. This way when you click edit, you can touch anywhere inside the table cell to make the red check mark appear or disappear. Here is my code and please let me know if this is something that you are working on currently or there is anything else you wish to know about my code.

 var UIEditExecution = function() {
       $(toolbar + " > uibutton[ui-implements=edit]").bind("click", function() {
           if ($("label", this).text() === "Edit") {
               /****************************EDITED***************************/
               // The href tag needs to be deactivated in order to ensure that
               // when the table cell is clicked in edit mode to put a check next
               // to the item, that it does not go to another page.  BUG FIX
               $$("tablecell", listEl).forEach(function(tbc) {
                   var location = tbc.getAttribute("href");
                   tbc.removeAttribute("href");
               });
               /*************************************************************/
               this.UIToggleButtonLabel("Edit", "Done");
               this.setAttribute("ui-implements", "done");
               listEl.addClass("ui-show-delete-disclosures");
               this.parentNode.firstElementChild.style.display = "-webkit-inline-box";
               if (/uibutton/i.test(toolbarEl.children[1].nodeName)) {
                   toolbarEl.children[1].css("display", "none;");
               }
               $$("tablecell > img", listEl).forEach(function(img) {
                img.css("{-webkit-transform: translate3d(40px, 0, 0)}");
               });
           } else {
               /****************************EDITED***************************/
               // This re-enables the href tags on all of the table cells
               // so that after edit mode is complete, you can still navigate
               // to another page.
               $$("tablecell", listEl).forEach(function(tbc) {
                  tbc.setAttribute("href", location);
               });
               /*************************************************************/
               this.UIToggleButtonLabel("Edit", "Done");
               this.removeAttribute("ui-implements");
               this.parentNode.firstElementChild.style.display = "none";
               listEl.removeClass("ui-show-delete-disclosures");
               $$("deletedisclosure").forEach(function(disclosure) {
                   disclosure.removeClass("checked");
                   disclosure.ancestorByTag("tablecell").removeClass("deletable");
               });
               if (/uibutton/i.test(toolbarEl.children[1].nodeName)) {
                   toolbarEl.children[1].css("display", "-webkit-inline-box;");
               }
               $("uibutton[ui-implements=delete]").addClass("disabled");

               $$("tablecell > img", listEl).forEach(function(img) {
                img.css("{-webkit-transform: translate3d(0, 0, 0)}");
               });
           }
       });
    };
    var UIDeleteDisclosureSelection = function() {
        $$("deletedisclosure").forEach(function(disclosure) {
            /****************************EDITED***************************/
            // Changed the bind to the parent node instead of the disclosure because the
            // parent node is the table cell.  This enables us to click anywhere in the 
            // table cell and it activate the check box next to the item that may be deleted.
           // the if-statement is to check to make sure that we are actually in edit mode. 
           // if not in edit mode then there is a bug that will remember the touches to the 
           // table cell and will bring up the box checked as soon as the edit button is pressed.
           // It is checking the button to say "done" because that is the text of the button when
           // in edit mode.
            disclosure.parentNode.bind("click", function() {
                if( $("uibutton[ui-implements=done]").getAttribute("ui-implements") == "done" ) {
            /*************************************************************/
                    disclosure.toggleClass("checked");
                    disclosure.ancestorByTag("tablecell").toggleClass("deletable");
                    $("uibutton[ui-implements=delete]").removeClass("disabled");
                    if (!disclosure.ancestorByTag("tablecell").hasClass("deletable")) {
                        listEl.setAttribute("data-deletable-items", parseInt(listEl.data("deletable-items"), 10) - 1);
                        if (parseInt(listEl.data("deletable-items"), 10) === 0) {
                            toolbarEl.firstElementChild.addClass("disabled");
                        }
                    } else {
                        listEl.data("deletable-items", parseInt(listEl.data("deletable-items"), 10) + 1);
                    }    
                }

            }); 
        });
    };

Here is an example implementation that follows the spec a bit more:
https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Object/keys#Compatiblity

Your main issue is Object.keys should throw an error if not passed an object.

This is more of a look and feel issue, but UIButtons when touched do not revert to their unselected state after being touched without another element being touched on. I imagine this is a focus issue (button having focus, being highlighted by Safari).

Consequently, this also applies to similar items like UISwitches.

ChUI has very good IOS and Android CSS. I would like to see more themes based on Native styling(Windows 8/Blackberry/Android Settings). I would like to do help out with the production.

Hi,

My name is Vickey and I am working on a simple app. I made this app using chocolate chip ui and phonegap. In ios it is working very good but in android i am having some difficulty in fixing scroller. In my app, I have a view for form and it contains a lot of input element.s with type number. When I am coming to this view than scroller is working perfectly but when I enter some value in my last element at that moment scroller just stopped working and it is not allowing me to move up. I am not using WAML here I am sending you my code and css for the testing

Element Calculation

                <div class="txts">

                    <input type="number" id="txt_ft" class="txts_tx"   placeholder="°C" placeholder2="°C" cid="delFt">

                        <img src="images/delete.png" width="20" style="" cid="txt_ft" id="delFt" class="txtBox" onclick="txtBoxAd($(this))" val="°C"/>
                        </div>

                <!--<input type="number" id="txt_ft" class="txts" onkeyup="txtsAd($(this).attr('id'),event)" placeholder="°C" cid="delFt">-->
            </div>
            <div class="rowAd">
                Dewpoint, Dp
                <div class="txts">
                    <input type="number" id="txt_dp" class="txts_tx" onkeyup="txtsAd($(this).attr('id'),event)" placeholder="°C" placeholder2="°C" cid="delDp">
                        <img src="images/delete.png" width="20" style="" cid="txt_dp" id="delDp" class="txtBox" onclick="txtBoxAd($(this))" val="°C"/>
                        </div>

            </div>
            <div class="rowAd rowCl" style="border-bottom-left-radius:8px;border-bottom-right-radius:8px; border-bottom:none;" page="atmSel" hover='1' onclick="rowClAd($(this),'atmSel')">
                <div class="selTxt">Atmosphere</div>
                <div class="arrAdTxt"></div>
                <div id="atmVal" class="selectedVal"></div>
            </div>
        </div>

        <div class='titleAdTxt'>Element data input</div>
        <div class="boxRadiusAd" style="margin-top:3px;">

            <div class="rowAd rowCl" style="border-top-left-radius:8px;border-top-right-radius:8px;" page="gradeSel" hover='1' onclick="rowClAd($(this),'gradeSel')">
                <div class="selTxt">Grade</div>
                <div class="arrAdTxt"></div>
                <div id="gradeVal" class="selectedVal"></div>
            </div>

            <div class="rowAd rowCl" style="" page="hzdSel" hover='1' onclick="rowClAd($(this),'hzdSel')">
                <div class="selTxt">Hot zone diameter, d</div>
                <div class="arrAdTxt"></div>
                <div id="hzdVal" class="selectedVal"></div>
            </div>

            <div class="rowAd rowCl" style="" page="tdSel" hover='1' onclick="rowClAd($(this),'tdSel')">
                <div class="selTxt">Terminal diameter, D</div>
                <div class="arrAdTxt"></div>
                <div id="tdVal" class="selectedVal"></div>
            </div>

            <div class="rowAd">
                Shanks
                <div class="txts">

                        <input type="number" id="txt_shanks" class="txts_tx" onfocus="scrollAdNone($(this).attr('id'))" onkeyup="txtsAd($(this).attr('id'),event)"cid="delShank" value="" >
                         <img src="images/delete.png" width="20" style="" cid="txt_shanks" id="delShank" class="txtBox" onclick="txtBoxAd($(this))" val="" />
                </div>
            </div>

            <div class="rowAd">
                Terminal length, Lu

                    <div class="txts">
                    <input type="number" id="txt_tl" class="txts_tx" onfocus="scrollAdNone($(this).attr('id'))" onkeyup="txtsAd($(this).attr('id'),event)"cid="delTl" placeholder="mm" placeholder2="mm">
                        <img src="images/delete.png" width="20" style="" cid="txt_tl" id="delTl" class="txtBox" onclick="txtBoxAd($(this))" val="mm"/>

                    </div>
            </div>

            <div class="rowAd">
                Hot zone length, Le
                <!--<div class="txts"><img src="images/delete.png" width="20" style="" cid="txt_hzl" id="delHzl" class="txtBox" onclick="txtBoxAd($(this))" val="mm"/>-->
                    <div class="txts">
                    <input type="number" id="txt_hzl" class="txts_tx" onfocus="scrollAdNone($(this).attr('id'))" onkeyup="txtsAd($(this).attr('id'),event)"cid="delHzl" placeholder="mm" placeholder2="mm">
                        <img src="images/delete.png" width="20" style="" cid="txt_hzl" id="delHzl" class="txtBox" onclick="txtBoxAd($(this))" val="mm"/>

                    </div>
            </div>

            <div class="rowAd">
                Shank distance (c-c), a
                <div class="txts">

                    <input type="number" id="txt_sd" class="txts_tx" onfocus="scrollAdNone($(this).attr('id'))" onkeyup="txtsAd($(this).attr('id'),event)"cid="delSd" placeholder="mm" placeholder2="mm">
                        <img src="images/delete.png" width="20" style="" cid="txt_sd" id="delSd" class="txtBox" onclick="txtBoxAd($(this))" val="mm"/>
                </div>
            </div>

            <div class="rowAd">
                Intermediate shank length, B
                <div class="txts">

                    <input type="number" id="txt_isl" class="txts_tx" onfocus="scrollAdNone($(this).attr('id'))" onkeyup="txtsAd($(this).attr('id'),event)"cid="delIsl" placeholder="mm" placeholder2="mm">
                <img src="images/delete.png" width="20" style="" cid="txt_isl" id="delIsl" class="txtBox" onclick="txtBoxAd($(this))" val="mm"/>        
                </div>
            </div>

            <div class="rowAd">
                Surface load
                <div class="txts">

                    <input type="number" id="txt_sl" class="txts_tx" onfocus="scrollAdNone($(this).attr('id'))" onkeyup="txtsAd($(this).attr('id'),event)"placeholder="w/m2" placeholder2="w/m2" cid="delSl">
                        <img src="images/delete.png" width="20" style="" cid="txt_sl" id="delSl" class="txtBox" onclick="txtBoxAd($(this))" val="w/m2"/>
                </div>
            </div>

            <div class="rowAd">
                No. of elements in series
                <div class="txts">

                    <input type="number" id="txt_noeis" class="txts_tx" onfocus="scrollAdNone($(this).attr('id'))" onkeyup="txtsAd($(this).attr('id'),event)"placeholder="pcs" placeholder2="pcs" cid="delNoeis">
                <img src="images/delete.png" width="20" style="" cid="txt_noeis" id="delNoeis" class="txtBox" onclick="txtBoxAd($(this))" val="pcs"/>
                </div>
            </div>

            <div class="rowAd rowCl" style="" page="ecSel" hover='1' onclick="rowClAd($(this),'ecSel')">
                <div class="selTxt">Element connection</div>
                <div class="arrAdTxt"></div>
                <div id="ecVal" class="selectedVal"></div>
            </div>

            <div class="rowAd">
                Number of groups
                <div class="txts">

                    <input type="number" id="txt_nog" class="txts_tx" onfocus="scrollAdNone($(this).attr('id'))" onkeyup="txtsAd($(this).attr('id'),event)"placeholder="pcs" placeholder2="pcs" cid="delNog">
                <img src="images/delete.png" width="20" style="" cid="txt_nog" id="delNog" class="txtBox" onclick="txtBoxAd($(this))" val="pcs"/>
                </div>
            </div>

            <div class="rowAd"  style="border-bottom:none;">
                Total no. of elements/group
                <div class="txts">

                    <input type="number" id="txt_tnoeg" class="txts_tx" onfocus="scrollAdNone($(this).attr('id'))" onkeyup="txtsAd($(this).attr('id'),event)"cid="delTnoeg">
                <img src="images/delete.png" width="20" style=" " cid="txt_tnoeg" id="delTnoeg" class="txtBox" onclick="txtBoxAd($(this))" val=""/>
                </div>
            </div>

        </div>
        <div style="clear:both; height:2px;"></div>

        <div class="backButton" id="calcBtn" ui-state="">Calculate</div>

        <div style="clear:both; height:33px;"></div>
                </panel>
            </scrollpanel>
        </subview>
    </view>

Our project has two levels of navigation. The content should be displayed on the right side.

When you call some of the content inexplicable things happen:

1. Every second time I call the content, the content appears on the right and on the left view.
2. The call of the content needs sometimes two clicks, so it appears on the right side.

PS: "chocolate chip UI" is realy great.

Hi, first many thanks for your awesome framework.

I encountered a problem about input box in a form. The input box will be moved up if focused. (Please see the captured image.) It seems if no chui.x.js is included, the input box don't float.

I tested it in the browser in Android 2.3.6(Huawei U8806). The test file is examples-android-chocolatechip/forms/login.html.

Our project has four levels of navigation.
When clicking on the "back button" in the fourth level, you can see how it goes two plane back - two animations.

This effect occurs under the iPad, iPhone and IOS simulator. Safari works as fine.

I supposed to use Chui as the web framework to work with PhoneGap, because Chui is lighter and smoother than Sench Touch!
This is my first time to use chui, and a strange exception occured. Here is the main code.

js code:
<script type="text/javascript">
// Waiting for PhoneGap
document.addEventListener("deviceready", onDeviceReady, false);

        // PhoneGap Done
        function onDeviceReady() {
            // show all the contacts
            function onSuccess(contacts) {
                //alert(contacts.length);
                var html = "";
                for (var i=0; i<contacts.length; i++) {
                    html += '<tablecell><celltitle>' + contacts[i].displayName + '</celltitle></tablecell>';
                }
                $('#list').append(html);
            };

            function onError(contactError) {
                alert('onError!');
            };

            // find all contacts
            var options = new ContactFindOptions();
            options.filter=""; 
            options.multiple=true;
            var filter = ["displayName","nickname"];
            navigator.contacts.find(filter, onSuccess, onError, options);
        }
</script>

html partial code:

Contacts

I chose the zepto-ios version right now. and the problems are:

1. Rendering new tableview items costs a very long time, i have less than 300 hundreds contacts, and my phone(Android ics) owns a 4-core cpu with 1G ram, guess what? 10s for the first time!
2. After rendered the new items, the scrollpanel couldn't work normally. not matter how i tried to tap and drag the list, position didn't change any more( yes the tableview slided up and down follow my finger, but after that it would go back to position zero). i guess the question is iscroller didn't adjust itselt after rendering finished.

So sorry to interrupt you and thanks for your 'listening'.

Placing a UIButton in the navbar in a root view prevents other elements from being selected. Once the button has been used, the other buttons become pressable.

If you use Tab key on your keyboard with Safari/Chrome and similarly use " Previous | Next " found on the ios keypad, one would be able to tab into "upcoming" layouts thereby revealing them and putting them entire app in an inconsistent state.

The simplest app page from the tutorial (nothing but an empty view with a navbar and a toolbar) fails to work on my iPhone3GS (latest iOS5), because the toolbar is not sitting at the bottom of the screen, but right under the navbar, on top. No content added to the scrollview shows.

when there is more than one stack the scrolling is not going to work, current solution is to remove any previous stack before running this function.

Tested on multiple devices, physical and otherwise, across multiple popular versions of the mobile operating system and the scrolling simply doesn't happen. The scroll bar itself renders, but touch scrolling simply doesn't happen.

Edit: Using the newest version of ChUI and have tested on physical devices ranging from 2.3 to 4.1 for Android.

$.UIScrollers no longer exists. It used to be used by $.UIEnableScrolling but doesn't seem to be anymore. It's still in the documentation, but not the actual code.

$.UIEnableScrolling used to check if a scroller was already on a scrollpanel and if so refresh it... otherwise it would create one.

Because of this, calling $.UIEnableScrolling() doesn't refresh the scroll after dynamically adding content... now it just adds moar scrollers :)

I am using https://github.com/rbiggs/chocolatechip-ui latest.

In the screenshot below you can see the second scrollbar on the demo that has had some content added then had $.UIEnableScrolling() run on it...

I have been playing with chui for a few weeks and it is a slick tool. I ran into a somewhat odd issue with the UIPaging control that may be me missing something so I am throwing it out. I have a bunch of pages created (150 or so) but it happens with less. What seems to happen is that if you swipe too quickly the card content changes on the fly. In watching the web inspector, it seems that it goes back to the first card prior to going to the next card.

Is there a way to slow down the swipe so it controls someone trying to swipe at mach speed, or is there a way to get it to not move the class to the first card prior to going to the next card?

Thanks again for a great framework and I am hoping to get to use it soon.
Jeff

Hi Robert

In your latest version there is s problem with the carousel code. The following error occurs:

TypeError: 'null' is not an object (evaluating 'that.wrapper.style')

I started getting this error in my app when I updated to the latest version of chui where I was using the carousel stack. When I tried running your examples I got the same errors.

Stefan

Please provide a date picket widget as in iOS.
That would be really helpful