smallseo.info

jQTouch

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

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.

$(document).ready(function(){
    $('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').empty();
       $('#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

http://i.stack.imgur.com/XE9q4.png

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.

Thoughts?

Thanks in advance,

Mark


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


Source: (StackOverflow)

JqTouch - Detect trigger for animation

Yet another problem I'm having w/ jqTouch... I'm trying to detect what element was clicked to trigger an animation so that I can pass parameters from the clicked item to the subsequent page.

My HTML is:

<div id="places">
 <div class="toolbar">
        <h1>Places</h1>
  <a class="back" rel='nofollow' href="#">Back</a>
    </div>
 <ul>
  <li id="1"><a rel='nofollow' href="#singleplace">Place 1</a></li>
  <li id="2"><a rel='nofollow' href="#singleplace">Place 2</a></li>
  <li id="3"><a rel='nofollow' href="#singleplace">Place 3</a></li>
 </ul>
</div>

<div id="singleplace">
 <div class="toolbar">
        <h1></h1>
  <a class="back" rel='nofollow' href="#">Back</a>
    </div>
</div>

When I click on any of the list items in #places, I'm able to slide over to #singleplace just fine, but I'm trying to detect which element was clicked so that I can pass parameters into the #singleplace div. My javascript is:

var placeID;
$('#places a').live('mouseup',function(){
 $('#singleplace h1').html($(this).text())
 placeID = $(this).parent().attr('id');
})

I've tried several alternatives to the $(el).live('event', fn()) approach including:

$('#places a').live('click',fn()...
$('#places a').live('mouseup',fn()...
$('#places a').live('tap',fn()...
$('#places a').tap(fn()...

None of which seem to work. Is there a better way I could be handling this? I noticed on jqTouch's issues page, there is this: http://code.google.com/p/jqtouch/issues/detail?id=91 which may be part of the problem...


Source: (StackOverflow)

jqueryMobile footer on nested list

I have a nested list in a jQuery Mobile test app. And it has a fixed footer.

Works great until I click on an item in the list. Anything past the top level of the list has no footer.

Is there a way to keep the footer throughout the Nested List navigation?

Thanks in advance.

Adam.

Here's the code:

    <!-- ################ Menu Page  ##################### -->  

<div data-role="page" id="home" data-theme="a">
 <div data-role="header" data-position="inline">
  <h1>Menu</h1>
 </div>
 <div data-role="content">
  <ul data-role="listview">
    <li><a rel='nofollow' href="#">List</a>
      <ul data-role="listview" data-theme="c">
        <li><a rel='nofollow' href="index.html">List</a></li>
        <li><a rel='nofollow' href="index.html">List</a></li>
        <li><a rel='nofollow' href="index.html">List</a></li>
        <li><a rel='nofollow' href="index.html">List</a></li>
      </ul>
    </li>
    <li><a rel='nofollow' href="#">List</a> 
      <ul data-role="listview" data-theme="c">
        <li><a rel='nofollow' href="index.html">List</a></li>
        <li><a rel='nofollow' href="index.html">List</a></li>
        <li><a rel='nofollow' href="index.html">List</a></li>
        <li><a rel='nofollow' href="index.html">List</a></li>
      </ul>
    </li>
    <li><a rel='nofollow' href="#">List</a>
      <ul data-role="listview" data-theme="c">
        <li><a rel='nofollow' href="index.html">List</a></li>
        <li><a rel='nofollow' href="index.html">List</a></li>
        <li><a rel='nofollow' href="index.html">List</a></li>
        <li><a rel='nofollow' href="index.html">List</a></li>
      </ul>
    </li>
    <li><a rel='nofollow' href="#">List</a>
      <ul data-role="listview" data-theme="c">
        <li><a rel='nofollow' href="index.html">List</a></li>
        <li><a rel='nofollow' href="index.html">List</a></li>
        <li><a rel='nofollow' href="index.html">List</a></li>
        <li><a rel='nofollow' href="index.html">List</a></li>
        <li><a rel='nofollow' href="index.html">List</a></li>
      </ul>
    </li>
  </ul>
 </div><!-- eof content -->
 <div data-role="footer" data-position="fixed" data-id="myfooter">
   <div data-role="navbar">
     <ul>
       <li><a data-icon="grid" data-iconpos="top" rel='nofollow' href="#home">Menu</a></li>
       <li><a data-icon="star" data-iconpos="top" rel='nofollow' href="#location">Location</a></li>
       <li><a data-icon="alert" data-iconpos="top" rel='nofollow' href="http://www.site.com" rel="external">Full Site</a></li>
       <li><a data-icon="grid" data-iconpos="top" rel='nofollow' href="#addpad">Pad</a></li>
       <li><a data-icon="info" data-iconpos="top" rel='nofollow' href="#more">More</a></li>  
     </ul>       
   </div><!-- /navbar -->  
 </div><!-- eof footer -->
</div><!-- eof page#home --> 

Source: (StackOverflow)

Screen Scrolls while typing Using JQTouch in an Android PhoneGap app?

I have made an app using JQtouch, Jquery, and PhoneGap. When you type in a form's field, the entire page scrolls up or down each time you enter a character. I have searched everywhere for solutions but cannot find one. There was a similar problem here: https://github.com/jquery/jquery-mobile/issues/638 but his solution did not solve my issue.

Does anyone have an idea why the page would scroll up and down with each added character in a textbox? Because the page is so small, it scrolls up and down quickly making it very annoying.


Source: (StackOverflow)

Posting Twitter and Facebook updates from a jQTouch / Phonegap iPhone app

I'm using jQTouch and Phonegap to write a simple iPhone app which i'm planning to release through the App Store.

Part of the planned functionality will let the user update their twitter or facebook status with the output of the App (some text, possibly a link).

Before I go ahead and start rolling my own solution, are there any JS libraries or plugins (or anything else) out there which will make this a lot simpler? Ive tried a few Google searches which havent turned up anything. The thought of all the authentication / error handling code is a bit daunting.

Thanks,

James.


Source: (StackOverflow)

I can't get mailto links to open the Mail app from Mobile Safari when using jQTouch. What could be wrong?

I'm developing an iPhone web app using jQTouch, and it contains a simple mailto: link to a valid email address, which should launch the iPhone mail application when tapped—but it doesn't.

If I visit a "normal" web page in Mobile Safari which contains the exact same link, and tap on it, I get the expected result: the mail app pops up with the correct email address in the To field.

Here's the link HTML (with the address changed) just in case I'm going nuts and have made a stupid mistake, but it appears perfectly fine:

<p><a rel='nofollow' href="mailto:info@mycompany.com">info@mycompany.com</a></p>

Has anyone come across this when using jQTouch? Or can anyone at least suggest a way that I can debug this? At the moment when I tap the non-working link it flashes red (the active link state) and absolutely nothing else happens.


Source: (StackOverflow)

Developing Cross Platform Mobile application in latest frameworks (Rhodes, PhoneGap, jQTouch)

We have recently developed an iPhone, iPad, Android application with the Rhodes framework and have found it to be painful to say the least. As we are approaching the finishing stages and now testing the app in mobile devices we find more bugs than were apparent in iPhone simulator and would like to change the development direction as it seems most of the Apps even showcased on the Rhodes site are super buggy and not as smooth as they should be.

Can anyone lend any insight on how we may take already developed front-end files with prepped JSON data to apply it to another framework to produce the application. We have learned how the jQTouch framework operates and feel comfortable developing but need to package this into an application.

Rapid development is a key concern as we are approaching a deadline on this project. Note our proficiencies are Ruby, ROR3, JQuery, Modern front-end (HTML5/CSS3)


Source: (StackOverflow)

Preventing an element from scrolling the screen on iPhone?

I have several <input type="number"> elements on my webpage. I'm using jQTouch, and I'm trying to stay fullscreen at all times; that is, horizontal scrolling is bad. Whenever I click an <input> element, the page scrolls right, showing a black border on the right of the screen and de-centering everything. The inputs are offset from the left of the screen, and they begin somewhere toward the middle of the page.

How can I prevent this scrolling on focus?


Source: (StackOverflow)

Resources & Frameworks for mobile development (iphone,android) using HTML5 [closed]

I am looking for resources to develop HTML5 apps for iphone primarily. Are their frameworks and tools that I can use to get started? I am looking for:

  • Javascript frameworks that help with UI layout
  • Touch based controls for phones
  • Articles on iphone development, best practices, etc.

I searched stackoverflow and was not able to come up with a good list of resources. I am looking for examples like these http://jqtouch.com/


Source: (StackOverflow)