In https://github.com/appMobi/jQ.Mobi/blob/master/jq.mobi.js#L631 your UA sniffing will flag Opera desktop as a mobile browser.

I'm getting an Uncaught TypeError: undefined is not a function when I try to use events in a Backbone View.

It barfs at line 967 of the backbone.js code in the delegateEvents method i.e.
$(this.el).delegate(selector, eventName, method);

Hi,

I was looking in to jQ.mobi in my Android Desire S using default browser. I observed that touch support for text field is not good and if I touch a field for editing it is highlighting wrong field and entering it in wrong field. Password field is even worse.

On the home page of the site

http://jqmobi.com/

How come it doesn't write out a headder div or back buttons. Is there a different library you are using

Thanks...

when I set a link on the page eg < a href="mylink" > I set returned an error: "Uncaught TypeError: Can not Sept. property 'title' of undefined" when I comment the line that gives me this error, it returns me another message saying that the url does not exist, and that usually access it via browser, could you help me?

I cannot make multiple Ajax Calls like these:

/* Para la portada */
var myPortada = $.ajax ({
type:'POST', //defaults to GET
url: objConecciones.principal, //defaults to window.location
contentType:'application/json', //defaults to application/x-www-form-urlencoded
dataType:'json', //defaults to text/html
success:callback, //function to call on successful Ajax request
error:callbackError //function to call when an error exists in the Ajax request

});

var myTicker = $.ajax ({ 
   type:'POST', //defaults to GET
   url:objConecciones.ticker , //defaults to window.location
   contentType:'application/json', //defaults to application/x-www-form-urlencoded
   dataType:'json', //defaults to text/html
   success:callbackTicker, //function to call on successful Ajax request
   error:errorTicker //function to call when an error exists in the Ajax request
});

It appears that they are making the same call on "success" ... can you please verify this...
My received data in "callback" doesnt fire but "callbackTicker" fires 2 times....

Android 3.2 on Samsung Galaxy Tab, using the test drive page, if you change the orientation from landscape to portrait, it does not fill the width of the page. When returning to landscape from portrait, the footer is not positioned correctly at the bottom of the viewport. Also, in portrait mode in general, the layout does not fill the width of the page.

Android 4.0 on Galaxy Nexus, using the test drive page, if you change orientation to landscape the layout stretches too far vertically beyond the viewable area and the footer is completely gone. When switching back to portrait, the footer often does not layout correctly at the bottom of the viewport. Also, on occasion, when transitioning between sections in either orientation, the layout shrinks to about 1/4 of the viewable area and does not return to full height and width.

Select boxes dont work at all on the online kitchen sink demo on my Samsung Vitality (2.3) or Archos tablet (3.2)... Works in chrome though. Boxes just lock up and you cant select anything!

when i do includes in this order (rails template)

    <%= javascript_include_tag 'jq.mobi.min' %>
    <%= javascript_include_tag 'jqmobi/plugins/jq.css3animate.js' %>
    <%= javascript_include_tag 'jq.ui.min' %>

line 115 in the css3animate plugin:

css3Animate.queue = function () {

am i mistaken in the order of includes? other orders also seem to give errors.

am also getting "Uncaught TypeError: undefined is not a function"
within jq.ui.min

In lists of links, if you scroll but pause even briefly before you release the link will be activated and it will animate to the next page. It results in a lot of accidental navigation. Any tap action should be cancelled if any drag has happened while the finger is down.

I saw this little nugget:

 this[i]['data-jqm-old-style'] = this[i].style.display;

And had to laugh.

It's clear that you don't actually understand how data-* attrs work, because if you did you'd know that they are accessible via node.dataset. An example, using your attribute name "data-jqm-old-style"...

this[i].dataset.jqmOldStyle

In IOS,
There is some problem with scrolling,
In Form Styles, click on select ( dropdown ) and click on next to go to textarea, then click on Done button on keyboard, there scroller's top is changed.

If you scroll down, there'll be some height ( which is the height of Full Name and E-mail textboxes at the top of page ).

If you're honestly suggesting people use this, I'd suggest adding some unit tests--for everything.

On Google Chrome, the dropdown box doesn't display the popup selection menu, just a normal dropdown.
Is it supposed to work like that?
How can I enable the popup?

I have noticed that when a select is disabled it's still possible to click it and bring up the options.

I have also noticed that it is not necessary for jq.Selectbox to create an imageMask element AND fakeInput does not need to absolutely positioned in this case.

Remove class not working in demo and my own functions:

http://www.jqmobi.com/testdrive/index.html > JQ Mobi > removeClass

Tested on android and chrome

This is not really a bug but a missing option, I tested with friend on Android and they tend to go back with the Android device button

When I open the kitchensink.html it shows the 4 items in the bottom menu but everything else is just the dark background. The welcome text or the 3 list items are not showing. When I click the bottom menu the only thing that happens is that the url hash changes but it still doesn't show any content on the page.

My mobile is Samsung I5700 Galaxy Spica (Android 2.1). I don't know the details/version of the built-in browser. Tested with f1d73da

The latest version of the example has a bug with the show password. It doesn't work!!!!

After appending or prepending an element to the DOM the event handler stops to work. If I remove the line which appends the div I get an alert window, if the line is included the div with the text "CLICK" is not clickable anymore.

(Safari on iPhone, iOS 5.0.1)

<!doctype html>
<head></head>
<body>
  <div id='test'>CLICK</div>
  <script src='jq.mobi.min.js'></script>
  <script>
    $('#test').bind('click', function() {alert('test')} );
    $('body').append('<div>TEST</div>');
  </script>
</body>
</html>

If you're interested in clean IP, you'll want a CLA before accepting any contributions -- otherwise, you may encounter issues of people contributing code that is not theirs to contribute. For example, see the Dojo CLA.

The Parent() method is using a method called uniq and that function is not defined anywhere in the file.

Console error:
Can't find variable: uniq

Currently a checkbox can only have single line of text. The height is fixed in CSS. Allowing bigger height does not work with custom_inputs.png sprite: a lot more is shown from it than needed.

Is there a way to show long text along radio buttons?

Also there seems to be a slight bug in jq.ui.css, which shows for radio buttons (input.jq-ui-forms[type=radio] + label):

line-height:26px;

IMO, it should be line-height:25px;

• the the image for radio button will be shown correctly then.

Hi,

There is a bug in jq.ui.js line 455: if ($am(urlHash) !== null) { , I think it should be if ($am(urlHash) ) { because when I try to load a separate file from json, line 457 causes a js error because $am(urlHash) yields undefined and $am(urlHash) !== null is true, but that block shouldn't be executed.

Jeff

If you were to ask anyone in our industry what 'jq' means, you'd get a uniform answer of 'jQuery'. If this were a mobile framework, or a plugin, for jQuery - that would make more sense. Such as with 'jqtouch' which is a framework built to utilize jQuery. However, jQ.Mobi is not such a framework.

Zepto and ender have managed to talk about 'jQuery compatible API', while creating and building upon their own brands.

I think it's great you've made a simplistic mobile framework targeted to Android and iOS that utilizes the same API as jQuery. I urge you to consider changing the name of it to be respectful of the jQuery API that it is inspired from and prevent unnecessary confusion.

I use jQuery list item selectors like:

$('#MyDiv ul li:gt(0)').remove();

to remove all items in the list except first. I does not seem to work.

Are such selectors going to be supported?

I would do a commit but for some reason my pull requests don't seem to be appearing.

Here's the fix:

        trigger: function (event, data) {
            if (this.length === 0) return this;
            if (typeof (event) === "string") {
                var evtName = event;
                var newEvent = document.createEvent("Event");
                newEvent.type = evtName;
                newEvent.target = this[0];
                newEvent.initEvent(evtName, false, true);
                newEvent.data = data;
                this[0].dispatchEvent(newEvent);
                return this;
            }
            event.data = data;
            this[0].dispatchEvent(event);
            return this;
        },

Hi,
I created a simple list and wrapped it in the following div:

    <li>
        <div class='listViewItem' >
        <img src="images/img.jpg" /> 
                <p> <font size="4"> <b> TITLE </b>  </font> </p>
        <p> <font size="2"> some text here... </font> </p>
        </div>
    </li>

great to see this hight speed and light weight framework. i test it is smooth better than jquery mobile more ....
but i have a job base on jquery mobile yet, so i can fast move form jqm to jqmobi ?

actually, my mean is can i use the jquery function on this framework, like:

$('mypage').live('pageshow', function (event, ui) {
alert('This page was just hidden: ' + ui.prevPage);
});

e.g?

thank you for your reply..

and i have a question..

how to refresh the ul list when i use the javascript append the li ?

on the jquery mobile i must use $("#listviewid").listview("refresh"); to refresh, but i dont kown how to do it on this framework

I have a carousel that's within a vertical scroller. If your finger is within the confines of the carousel, then you can't vertically scroll down to the other content that's below the carousel.

<div id ="verticalScroller">
    <div id="carousel">
    ... some content here ...
    </div>
    <div id="otherContent">
    ... some other content here ...
    </div>
</div>

it looks like list_arrow_sel.png and list_arrow.png have not been optimized. They both clock in at about 48KB, and can be optimized down to <1KB with the default PNG 32 export option using Fireworks (I'll assume the same for Photoshop).

Also, its a tiny gain (but 'every little bit counts' right?), you can save 0.4KB by flipping your sprites in custom_inputs.png horizontal (rotating each individually of course). I'd do this and the arrow optimizations above, but you'd get cleaner results going from your source files.

In IOS,

In Form styles,
Click on Comments (textarea)
Enter text in multiple lines, (12 lines),
you can find the cursor going out of the textarea and text is invisible!!!

if you use .trigger() with string (e.g. $(document).trigger('init')) you'll get: Uncaught Error: UNSPECIFIED_EVENT_TYPE_ERR: DOM Events Exception 0.
Function checks if the event argument is string and creates new event from string, but line that replaces string with new event is missing (marked with +)

if (typeof (event) === "string") {
    var evtName = event;
    var newEvent = document.createEvent("Event");
    newEvent.type = evtName;
    newEvent.target = this[0];
    newEvent.initEvent(evtName, false, true);
+   event = newEvent;
}

Momentum scrolling of a long list feels very different from native momentum scrolling (iOS, Android) (see http://jqmobi.com/testdrive and select "Selectors" tab.)

If you are making a fullscreen iPAD app I don't think we would need a header top or back and forward buttons

When a list item content is an anchor with more text the fit in one line, part of this text is shown outside/below

In the latest version of safari for Windows you get the following error WebKit2WebProcess has stopped working. This is created by inserting the following code.

Copy the entire kitchen sink code then stip everything between the body tags and insert this code

The code will then crash the browser
remove this line

And it works.

No Errors in Google Chrome

Basically the img tag is causing a issue

If you tap 2 navigation items in rapid succession the current screen seems to slide to the upper left hand corner revealing a white background until the view representing the last button pressed pops onscreen. (Android, HTC Incredible)

I have just cloned, and tried the download source code today, and the navigation isnt working. Clicking any tab button or link opens the home page(view) in a new window.

The online demo works fine, but the download code from github(both the repo and the .zip download) are actally working.

Can you please advise?

I have tried them in both iOS simulator and iPhone 4

The drawers remain open when navigating to next/previous panel. Since a drawer would most likely contain actions it makes sense to close this during the panel transition.

When you tab on "Done" in the keyboard after you were entering something in a textarea the focus stays in the textarea. This causes problems with scrolling.

I don't see an API call similar to jQuery .clone() method.

Is there anything like it in jQ.Mobi?

I use it a lot to build lists dynamically.

Thanks,
Alex

This page displayed good, but actions not worked, without any warnings.

Hello there, I am getting an issue here:

Lets says I build a dinamic "LI" item:

var liLink = $('

The min version breaks. Running with full source + plugins work fine.

Uncaught TypeError: undefined is not a function
(anonymous function)jq.ui.min.js:59
(anonymous function)jq.ui.min.js:87
index.html:53Uncaught TypeError: Cannot set property 'backButtonText' of undefined

According to the docs "We suggest using jq.ui.min.js which has all the necesary files, otherwise include the source for all of them" It throws the err running alone. scroller and animate need to be loaded as a minimum. Maybe intentional but confusing in regards to the docs and would be odd running core mobile functionality as plugins.

I don't see any support for UI themes (jQuery Mobile support themes via data attributes and has a tool to create themes too).

Is there any way to do themes in JQ.Mobi?
Is something planned for the (hopefully more colorful :) future?

Developers appreciate code that passes some kind of linting utility like jshint. We all like to use code that conforms to best practices. If it could be integrated into the development process somehow, even better.

See http://www.jshint.com/reports/158096

Isn't jq.serialize very similar to jQuery.param and not so much to jQuery.serialize?

I found this confusing and would prefer to the two apis to be as similar as possible.

I clicking any tab button or link opens the new tab and show the same view(main view). Run in chrome.
And tried them in dolphin-browser in Android2.3.5, the view just show header and footer, but not show content part.

$(function(){
$.ajax({
url: 'http://api.jquery.com/api/',
dataType: 'xml',
success: function(x){
console.log($(x).find('entry'));
}
});
});

My guess is that 'x' is treated as a string and not passed into the success callback as XML.