Create powerful mobile apps with just HTML, CSS, and Zepto.js (or jQuery).

Difference between jQTouch and jQuery mobile

What is the difference between jQTouch & jQuery Mobile Framework ?

Are they related (other than being both based on jQuery) ?

Do they have the same goal ?

Edit: jQTouch is now jQT

Source: (StackOverflow)

Sencha Touch Vs JQTouch

My startup and I are deciding which mobile touch framework to use to build our mobile web application. I'm having trouble figuring out the difference between Sencha Touch and JQTouch. I understand that both products licensed by Sencha and that Sencha Touch requires a paid license to use it commercially. Besides legal and financial issues, what are the differences, pros and cons between both frameworks.


Source: (StackOverflow)


iWebkit vs. JQTouch vs. iUI

I am going to develop a content rich application that ideally should have been an iPhone-app, but since I'm short on time, I will stick with technologies that I can, such as JQuery, CSS and HTML. The more mobile devices my site runs on besides iPhone, the better.

A brief search on the web leaves me with the impression that there are three tools I may use: iWebkit, JQTouch and iUI. I have toyed about with JQTouch, which I find impressive and simple to use.

With simplicity comes lack of customizability; I would very much like to have sliders and other cool features in my GUI.

Any comments on which of these three to go for?

Source: (StackOverflow)

Capturing native button clicks in Android phone in javascript

Is there a way by which we can capture the click of HOME and BACK button in the html file in android application using phonegap/jqtouch/javascript?

I have an application for Android using phonegap. I want to capture the click of native HOME and BACK button of the Android phone in the html page to exit / go back gracefully.

Source: (StackOverflow)

Best article about how to use jQTouch

I want to use jQTouch on my project, but I can't find many examples.

So do you know some website which has many jQTouch examples.


Source: (StackOverflow)

Is there a JQuery alternative to JQTouch with better Android Support?

Basically looking for a JQuery plugin with better Android browser support than JQTouch. Or even an alternative Javascript framework with better mobile support.

Source: (StackOverflow)

Can an iPhone Web App use the Camera?

I have a web app and I want to take photos and then upload them to a server. Can this be done with a webapp?

Source: (StackOverflow)

How to overwrite SCSS variables when compiling to CSS

I'm trying to use jqtouch theming which is based on SASS and COMPASS. I have a file custom.scss with the most simple code, one import and one variable to overwrite:

@import 'jqtouch';

// Override variables
$base-color: #fe892a;/* The default base which is later used for toolbar, list, and button backgrounds.*/

When I now compile the scss file to css, it will basically just generate the jqtouch css with my filename. The color specification is nowhere to be seen, although the variable is definitley correct per documentation (Official Guide) and in the jqtouch.scss file, which I import for costumizing.

I'm running Sass 3.2.9 and Compass 0.12.2 on a Windows machine.

I've tried it with more variables and different file imports, but the result is always, that my override values are not incorporated.

The ruby config file for compass seems to be unsuspicious.

Does anyone have an idea what goes wrong in the process so that my override values are ignored?

Source: (StackOverflow)

Strange behavior width Safari (iOS) inner/outer width/height [closed]

I have been working on a mobile version for one of our services at work, and have been doing some fidling around with jqTouch, and the orientation feature bugs me a bit.

So while trying to find a better way to get orientation value (profile or landscape), i found that Mobile Safari is returning some strange values for innerWidth/innerHeight/outerWidth/outerHeight.

I have done these test with an iPhone4 with iOS 4.3

My test results:

No keyboard    |  window.innerWidth    window.innerHeight    window.outerWidth    window.outerHeight
Pro --> Lan    |                480                   268                  482                   420
Lan <-- Pro    |                321                   418                  321                   419
Pro <-- Lan    |                480                   268                  482                   420
Lan -->--> Lan |                480                   268                  482                   420
Lan <-- Pro    |                321                   418                  321                   419

With keyboard  |  window.innerWidth    window.innerHeight    window.outerWidth    window.outerHeight
Pro --> Lan    |                321                   418                  321                   419
Lan <-- Pro    |                481                   269                  481                   419
Pro <-- Lan    |                321                   418                  321                   419
Lan -->--> Lan |                481                   269                  481                   419
Lan <-- Pro    |                481                   269                  481                   419

Pro = Profile

Lan = Landscape

So Pro --> Lan means current orientation is Profile moving it 90 degree clockwise to Landscape

The main issues as i see it:

  • window.outherHeight is always the same value when the keyboard is showing.
  • Also with keyboard When rotating 180degree from Landscape to Landscape the returned values are the expected values for a profile orientation

If you want to do some further testing, here's something to get you going, you ofcourse need a jqTouch configured webpage.

    $('body').bind('turn', function(event, info){ var dims = $('#debug').val(); dims = dims + getDimensions(); $('#debug').val(dims); });

function getDimensions() {
return "screen.width = " + screen.width
     + "\nscreen.height = " + screen.height
     + "\nscreen.availWidth = " + screen.availWidth
     + "\nscreen.availHeight = " + screen.availHeight
     + "\nwindow.innerWidth = " + window.innerWidth
     + "\nwindow.innerHeight = " + window.innerHeight
     + "\nwindow.outerWidth = " + window.outerWidth
     + "\nwindow.outerHeight = " + window.outerHeight
     + "\n \n ";

Add <textarea id="debug" style="width: 100%; height: 300px;"></textarea> somewhere on your webpage.

What i did was doing the rotions as indicated in the test results. Copied the content of the textarea, and send them in an email-to-self. Did this both with and without keybord, keyboard shows if you tap the textarea ;)

Source: (StackOverflow)

Which is the best mobile web application development framework [closed]

I am in the process of converting an existing Java/J2EE based web application into Mobile web application which should support iPhone, Androind devices, Blackberry etc. And also different screen sizes like 320x480, 768x1024, 1024x600 etc.

I found that SenchaTouch, JQTouch and JqueryMobile are some of the frameworks currently available.

Are there any other framworks available? and for the requirement I have, which is the right framework?

Source: (StackOverflow)

Fixed header in Jqtouch

What should i change in the basic theme of jqtouch to have a fixed header (+ footer maybe...)? I have tried with position:fixed.. but nothing worked...

Source: (StackOverflow)

Sencha vs. jQuery Touch [closed]

Which one of these is the better choice? Is there a better choice? Which has better documentation and community?

Source: (StackOverflow)

Autocomplete ajax textbox for iphone web app?

I've developed a rails website in which I've got a text box with autocompletion facilities (When the user starts typing, a list of valid values "drops down" under it). For this, I used Rail's autocomplete.

Now I'm developing a mobile version of this site. Since the target browsing phone will be the iphone, I'm using jqtouch.

Hence my question is: What is the best way to do an "autocompletable ajax text box" on an iphone web app?

I suspect there should be an easy way of doing this since jqtouch uses jquery, and there're several autocomplete plugins for it (by the way, no idea which one is best suited for this task). However, if anyone thinks there's a better way to do this than with jqtouch, I'm open to suggestions.

Source: (StackOverflow)

Blurred text in Iphone 4 browser when loading content dynamically

I am using the Jquery/Jqtouch libraries for an iphone compatible site. I am now stuck with a problem just in iPhone 4 (not in 2g, 3g or 3gs) where the text becomes blurry on one specific scenario. Below is how it happens

  1. The site has one common div container.

    <div id="container"></div>
  2. The container is filled with content dynamically based on the user action. Below is the function that does that.

    function loadPage(url, section, callback) {
       $('#container').load(url + ' ' + section, loadComplete(section));
  3. One sample call to the above function

    loadPage("Data.htm", "#Friends", null);
  4. Basicaly eveything works fine except on one scenario where the amount the data on the container is huge (ie the #container height increases to 1500px+ not predictable). Now if i replace it with smaller data for different tabs on the same container then the text becomes blurry. Attached is the image


Did anyone come across this scenario. Thanks in advance.

Source: (StackOverflow)

Google Map V3 not centering, displays only part of map

I'm developing a jQTouch-based app for the iPhone and part of it uses the Google Maps API (V3). I want to be able to pass the geolocation coordinates to the map and have it center the location with a marker. What I'm getting now is the map at the proper zoom level but the desired center-point appears in the upper-righthand corner. It's also showing only about a third of the map area (the rest is gray) and it behaves somewhat erratically when you pan or zoom. Here's the code:

var coords = { latitude : "35.510630", longitude : "-79.255374" };
var latlng = new google.maps.LatLng(coords.latitude, coords.longitude);
var myOptions = {
    zoom: 12,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
var map = new google.maps.Map($("#map_canvas").get(0), myOptions);
var marker = new google.maps.Marker({
    position: latlng, 
    map: map, 

BTW: It looks and behaves the same on other platforms/browsers as well.


Thanks in advance,


Added Here's a link that'll show exactly what's happening: Screen shot of iPhone emulator

Source: (StackOverflow)