In these days I’m developing my first iPhone application, using frameworks like PhoneGap and jQTouch. This aims to be a powerful app, not a mere widget, so I’m writing a lot of code and I’m using several libraries and components in order to create a really native-like application.
Unfortunately, due to a bad CSS approach, I faced an issue with the excellent SpinningWheel component which won’t never be displayed unless you open and modify jQTouch CSS. The fact is that, jQTouch takes the body and use it as main container to hold all application’s pages and components and by default it hides all nodes inside the body except the current displayed content (active page/section) and this is a problem, because SpinningWheel create the ui object into the body and it won’t be displayed.
Fortunately the solution is simple, we just need a wrapper, an html element which will holds all jQTouch stuff in place of body, so in my html I wrapped all inside this:
1 2 3 4 5 | <body> <div id="jqtouch-wrapper"> <!-- content --> </div> </body> |
Then I changed all jQTouch CSS, to reflect this approach (you can see the wrapper as a sandbox):
1 2 3 4 5 6 7 8 9 10 11 | div#jqtouch-wrapper > * { -webkit-backface-visibility: hidden; -webkit-box-sizing: border-box; display: none; position: absolute; left: 0; width: 100%; -webkit-transform: translate3d(0,0,0) rotate(0) scale(1); min-height: 420px !important; } /* ...and so on*/ |
…and finally I changed jQuery selectors inside JavaScript code:
1 2 | $body = $('#jqtouch-wrapper'); // ...and so on |
It’s also possible to solve the conflict by changing SpinningWheel code in order to put the dom node inside active jQTouch pages, but the problem of potential incompatibilities will remains. A CSS declaration, except reset statements and other rare cases, should NEVER refers directly to a whole set of nodes (ie: ul { color: red; }), but to a node type contained by a wrapper/sandbox (ie: #foo ul {color: red; }), thus conflicts will be avoided.
January 10th, 2010 11:20 am
Any ideas on integrating JQTouch with Google Maps API v3 on PhoneGap? I have a problem where the first time you go to a map, you see the map. Anytime you go to that map page after moving away from it, the map is gone. I have a simple example if you would like to see it.
Thx
January 11th, 2010 1:19 pm
I’m going to work on an iPhone app which will use maps, maybe I will create something interesting, but I don’t know :^)
…anyway, I will take a look to your example if you give me a link
May 5th, 2010 4:10 am
A trunk jQTouch does not have this issue. Now all jQTouch content is wrapped inside “#jqt” div.
You can grab latest sources from the SVN:
http://code.google.com/p/jqtouch/source/checkout
June 29th, 2010 6:57 am
I had a problem using Firebug Lite in Google Chrome and this solution solved it too.
July 23rd, 2010 1:09 am
Thanks…this looks good!
September 24th, 2010 4:49 am
Hey dave..
i have the same problem with spinningwheels, but i don’t understand how to solve…
can u help me??
can u past more code??
tnx in advance..
November 3rd, 2010 4:43 pm
Hi Dave,
Hopefully you can help me. I am trying to integrate the Datepicker from the UI in JQuery. My web app however is built with JQTouch. When I did as you suggested, it fixed the problem :), however now all my div pages show up on my webpage. :( Is there something I missed.
Thanks!
March 12th, 2011 1:16 pm
Hi,
Would it be possible for you to zip/or post, the modified code as a noob like me wouldn’t be able to correctly reflect all the changes properly..
would be much appreciated. Thanks man!
September 29th, 2011 11:38 am
I tried changing jqtouch.js, jqtouch.css and adding a wrapper in the HTML. Yet, jQTouch covers up content outside the wrapper. Can you give a move detailed explanation of exactly what version jQTouch was used and exactly which files were changed. Better yet, how about some actual code?