My favorites | Sign in
Project Home Downloads Wiki Issues Source
Search
for
GettingStarted  
Installing and initializing jQTouch
Phase-Deploy, Featured
Updated Sep 11, 2009 by davidcol...@gmail.com

Download a copy of jQTouch from Google Code.

1. Add Scripts

jQTouch currently uses jQuery 1.3.2, which can be loaded dynamically from Google Code. In the <head> of your document, insert the following:

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript"> google.load("jquery", "1.3.2"); </script>
    <script src="jqtouch/jqtouch.min.js" type="application/x-javascript" charset="utf-8"></script>
    <style type="text/css" media="screen">@import "jqtouch/jqtouch.min.css";</style>
    <style type="text/css" media="screen">@import "themes/jqt/theme.min.css";</style>

2. Initialize

Initialize the function before the page onload event. To turn off a feature, simply pass a false to the corresponding option in the initialization options.

    $.jQTouch({
        icon: 'jqtouch.png',
        statusBar: 'black-translucent',
        preloadImages: [
            'themes/jqt/img/chevron_white.png',
            'themes/jqt/img/bg_row_select.gif',
            'themes/jqt/img/back_button_clicked.png',
            'themes/jqt/img/button_clicked.png'
            ]
    });

3. Extend

  • Initialization Options - Overview of all basic capabilities, including navigation, viewport control, and image preloading.
  • Callback Events - How to receive notifications from jQTouch.
  • Building Fullscreen Applications - Extended details about creating full-screen iPhone web apps.
  • Using Ajax - A wide array of methods to load dynamic data and render on the fly.
Comment by pictar...@gmail.com, Nov 18, 2009

Can you provide us with basic instructions? something like "How to?" I don't know where to start.

Comment by chris.ca...@gmail.com, Nov 25, 2009

Two types of links are not working for me.

1) Linking to a mp3 file. I would hope it could play the mp3 in quicktime (in the browser). When the file is done playing, it goes back to the page <div> it was last on.

2) Linking to a telephone number. a href=tel:8015551212 doesnt work...

Comment by hcye...@gmail.com, Dec 1, 2009

Do I have to study jQuery before using jQTouch?

Comment by project member davidcol...@gmail.com, Dec 1, 2009

It definitely helps.

Comment by CStephe...@gmail.com, Dec 3, 2009

Has anyone here tried using jQtouch with Ruby on Rails Applications? I'm having some issues and looking around to see if anyone has run into a similar situation.

Comment by pablomar...@gmail.com, Dec 5, 2009

I had a problem with jquery check a checkbox, and then continues to function as a "toggle". The solution was to change this way: jQuery ( '# preferences # pref_visible') 0?. checked = false;

Comment by poz...@gmail.com, Dec 11, 2009

How can you set the homescreen title automatically. I got the image using the icon ini statement but can't seem to find where to preset the text.

Comment by sami.j.i...@gmail.com, Dec 17, 2009

I made a very simple app using RoR and encountered no problems at all, it worked right away. I mainly used the demo as the starting point, just moving the inline JS to a separate init.js file. Worth emphasizing though that this was a very simple one, with mainly just my blog engine using ruby. What type of issues did you CStephens4 had?

Comment by reini...@gmail.com, Dec 18, 2009

Is there a way to detect with javascript if the app was started trough a home screen icon or by browsing to it with Mobile Safari?

Comment by kes...@gmail.com, Dec 26, 2009

window.navigator.standalone is true if started from the home screen and false if viewed in Safari.

Comment by norway.r...@gmail.com, Jan 11, 2010

pozon9, the Homescreen title is by default the TITLE of the page. The user can change it if the like before adding it to their home screen.

Can anybody answer me regarding why JQT doesn't work when using java on SSL?

None of the animations work when I link to a new page (which is parsed via a java controller). I have a logon page (https) and after logging on, the user is taken to a menu screen, which resembles JQT's demo home screen (with a list of links/options).

I can not include all the content in DIV's on the home page as JQT does, so they are each their own html file (Java + Velocity). And instead of "Sliding" them in, they come in as though they aren't using JQT at all. No animation what so ever. And when I try to slide back to the home page, the same problem occurs: no animation (back slide).

Please help! :)

Comment by norway.r...@gmail.com, Jan 12, 2010

I notice that velocity is screwing up the javascript used to init jqt. It tries to parse the $.jQTouch({ line of code, among others. I know of no way to escape the characters, since Velocity's doc doesn't cover this type of code escaping: http://velocity.apache.org/engine/releases/velocity-1.6.2/user-guide.html#escapinginvalidvtlreferences

So, until a work around is found I can not get it to work. :(

How else can jqt be init'ized?

Must the script be included (written) inline, in the head, as it is in the demo? Or can we import it as a .js file?

Comment by val.dumi...@gmail.com, Jan 14, 2010

It can definitely be moved into a .js file. Tried it just now.

Comment by val.dumi...@gmail.com, Jan 14, 2010

I would like to say I started reading about jQTouch today, and I love it to bits.

Now for a silly question: is there a way to test the web app on a Linux box? Preferably in a browser with debugging abilities, a la Firefox+Firebug.

Thanks.

Comment by sty...@gmail.com, Jan 22, 2010

You could use something like iPhoney (http://sourceforge.net/projects/iphonesimulator/) to view your project, or just go to your project on your localhost in Firefox and resize the screen to 320x460. Alternatively, go to your local IP on your iPhone and look at your app there.

Comment by rcam...@gmail.com, Jan 25, 2010

I'll echo the earlier comment - I'd like to at least see some basic docs on building simple pages.

Comment by jbrubake...@gmail.com, Jan 31, 2010

This is about as clear as mud. How about some step by steps!!! JQ-Jeeeeeze!

Comment by willsbit...@gmail.com, Feb 11, 2010

I'm having some real issues upgrading from 1beta 2 to the latest svn trunk, ive replaced all necessary files but now the font on toolbar buttons has changed to something ugly and pages don't work at all, the page just displays as one huge long regular page instead of panels.. Any Ideas?

Comment by Sieverts...@gmail.com, Feb 12, 2010

limitedknowledge.wordpress.com has a tutorial for a very basic 'app' on it. It helped me to get my first site up. :)

Comment by Sieverts...@gmail.com, Feb 12, 2010

@ chris.carey, if your question is not answered, yet.. To make direct phone calls available with the iPhone, add a button like this: <li class="arrow"><a href="tel:1234 567 8900" target="_blank">talk to us</a></li>

Comment by nick.san...@gmail.com, Feb 15, 2010

willsbithrey - had the same problem. You need to add another <div id="jqt"> to your page so it looks like <body> <div id="jqt"> <div id="somepage">..etc</div> </div> </body>

Comment by musicpla...@gmail.com, Feb 17, 2010

Didn't know where to put this, so i'll put it here.

My app was loading one particular page and then automatically animating back through the entire history and back to 'home' before I even had a chance to read the page that had loaded.

Just make sure that your div id's dont contain spaces.

Comment by bobriako...@gmail.com, Feb 24, 2010

Can anybody give an advice on how to insert AJAX gif loader in site? I.e. if you click on some link, while requested page is loading to show user some loading.gif animation

Thanks in advance!

Comment by justinhomi@gmail.com, Mar 1, 2010

Are there any basic instructions, tutorials, examples or howtos for jQTouch? Seems like a cool project, just not easy to get started.

Comment by dlic...@gmail.com, Mar 3, 2010

Is there any way to change the number of rows of Textarea? Have tried using <textarea rows=x .. but size in fixed when within <li> tags.

Comment by KD.Gunde...@gmail.com, Mar 9, 2010

I have found a basic presentation for beginners: http://media.philippbosch.de/talks/20100218-jqtouch-berlinjs/jQTouch-web.pdf

Comment by mark.j.t...@gmail.com, Mar 19, 2010

Not sure if this is the correct section for the question, I am new to jqtouch.

It maybe something really simple I'm missing, but how do I add a next button, so I can go through a step-by-step guide clicking to go to next instruction. Every button I have tried, works as a back button.

I could use a <li> </li> directing to next page, but I would rather use a button (white button from jqt theme)

Many Thanks

Comment by i...@myb.co.il, Mar 22, 2010

I got a question :

Is it possible to create an application that will be accepted to apple store with this framework?

And one more question - will it work offline, if all needed files will be included to the app?

Comment by jsa...@gmail.com, Mar 23, 2010

@ i...@myb.co.il,, yes it is but you would need phoneGap to built it into a binary app.

Comment by morit...@gmail.com, Mar 24, 2010

Did anyone manage to find the workaround to returning to previous page (and not #home) after playing an MP3?

Comment by markaric...@gmail.com, Apr 4, 2010

Must jqTouch apps be a single HTML file, or can they be broken up into multiple files or urls for modularity?

Comment by cotter.d...@gmail.com, Apr 12, 2010

Seems like a good plugin, but the documentation is practically non-existent.

Comment by fabian.z...@gmail.com, Apr 14, 2010

just check this for introduction: http://building-iphone-apps.labs.oreilly.com/ch04.html

Comment by sulliva...@gmail.com, Apr 14, 2010

Most apps need to be a single html file. I have a sinatra app with multiple CRUD style locations, and many "views". (using haml)

Will jQT work well with this? Currently I'm having trouble getting it to work, but I'm hoping the ability to span multiple pages using the animations and css will be available in jQT.

I do not imagine a larger web-app will be required to be a single page. (I could combine all my "views" into one page, but I need them to then respond to ajax properly/in expected manners.)

Comment by tzeen...@gmail.com, Apr 21, 2010

will jQTouch work with 1.4.2? has anybody tried using 1.4.2 with jQTouch? just because I use some stuff on my site that makes use of 1.4.2...

Comment by air...@gmail.com, Apr 30, 2010

awesome kit, aggravating documentation. all i'm looking to do is to find out how to differentiate links. a tags seem to load things by ajax (fine), but i can't figure out how to load a whole new page using a normal a tag.... anyone? thanks, gw

Comment by tzeen...@gmail.com, May 3, 2010

@airyt1: relative URLs get loaded via AJAX, but I think if you specify a full "http://" path (such as http://domain.com/posts), it will load the request normally.

Comment by DaneOma...@gmail.com, May 5, 2010

I have a question

does anyone know how to put Text before a UL CLASS

what i mean is this .. if i have

<ul class="individual">

<li><a class="revealme" href="#page1">Text inside the box</a></li></ul>

Now how to do i make it so i have the txt outside the box and it is on the same line as the ul class , cuz when i put text before <li> it displays it after it not before.

Thank you

Comment by ericdfie...@gmail.com, May 10, 2010

So I'm loading content via ajax. The links of the loaded content point to real site links, like /this/sites/screenshots. On success of the original loaded content, how do I "hijack" those links to make the content load in a specified div?

That's the final level of the site, so it won't need to be more complicated than that…

Comment by fie...@gmail.com, May 13, 2010

@airyt1 @tzeentch I'm wondering the same thing, actually. I have links with http:// in them, but those won't open in a whole page, unless I use target="blank" with it. What's weirder, is I'm pretty sure when I first started working on my mobile site, I seem to recall that it did work fine, and only stopped later (but I might just be imagining that).

I'm also curious if there's any documentation outlining all the different class markups and their effects?

Comment by fie...@gmail.com, May 13, 2010

@norway.richard: Try using ${esc.d} to render a dollar sign in Velocity. You can also wrap your content in #literal() to disable Velocity rendering. Otherwise put it in an external file.

Comment by fie...@gmail.com, May 13, 2010

Try this out in your jQuery init file/block for the forwarding issue: $('a[href^=http://]:not([target])').click(function() {

window.location.replace($(this).attr('href')); return false;
});

This looks for links that start with http:// that do not have a target attribute set.

Comment by nuro...@gmail.com, Jun 10, 2010

Hello we have bin waiting for beta2 and its really nice work and really usable but we have a small problem, since we can for technical reason not use ajax so we have to do a lot of things with "webapp" good that this option is existing but we encounter a small problem when we use the back button it always redirect us to xxx/#home and now we are searching for a way to use jqtouch that the back button brings us to xxx/ is there a way to do this by a parameter ?

Comment by lmkk22@gmail.com, Jun 10, 2010

Anyone tried it with jquery 1.4.2???

Comment by smitha19...@gmail.com, Jun 23, 2010

I am creating a phonegap application.In that the html page contains 3 textboxes.I am not able to assign values in textbox to varibles :( like var txtName =document.formOne.firstname.value; can anyone help me..

Comment by vfeu...@web.de, Jun 23, 2010

@airyt1 Hi there, I faced the same link problem today. By browsing through the jqtouch sources I found, that you can set the ref-attribute to "external". That done, external links work for me. Example: <a class="button" rel="external" href="logout.jsp">Logout</a>

Comment by Christop...@gmail.com, Jun 30, 2010

Does initialization need to occur on the "div" tags inside of the "body" tag. Can I specify the "container" for these actions?

Comment by br...@enchanter.net, Jul 1, 2010

I found a good introduction to how to use jQTouch here:

http://building-iphone-apps.labs.oreilly.com/ch04.html

Comment by paresh8...@gmail.com, Oct 25, 2010

I have integrated jquery UI tabs with Jqtouch but it is not working properly. When the page loads first time, it works but it didn't work after navigate other pages. JqueryUI js and css both are properly include.

has anybody use jquery ui with jqtouch?

Please get back to me on this... Thanks in advance....

Comment by mhollowa...@gmail.com, Oct 27, 2010

What does

var jQT = new $.jQTouch({ icon: "jqtouch.png", addGlossToIcon: false, startupScreen: "jqt_startup.png", statusBar: "black" });

do?

Comment by xval...@gmail.com, Jan 25, 2011

This is not a tutorial. Try http://www.timo-ernst.net/2010/08/tutorial-a-simple-twitter-client-with-jqtouch/ for much much more detailed instructions.

Comment by uncguita...@gmail.com, May 23, 2011

I'm trying to use a link from one of my main pages to dynamically build a page using data from an XML file, but parsing that data based on the link. For example, if you clicked on the link for Product1, it would pull XML data for Product1 and put it in DIVs, Product 2 would pull product 2 only, etc. What's the best approach for doing something like this? Any help would be greatly appreciated.

Comment by bahri.na...@gmail.com, Sep 4, 2011

i want to know all the jqtouch events

Comment by aman.ni...@gmail.com, Oct 16, 2011

jqtouch supports action on full page rather than on specific block.......is it true??

Comment by kea...@gmail.com, Nov 30, 2011

The instruction is totally not clear, I think someone need to update it.


Sign in to add a comment
Powered by Google Project Hosting