jQuery iPhone Plugin

[Jonathan]

I've started a jQuery iPhone plugin project to extend jQuery
functionality for specific iPhone features.

Project Page: http://plugins.jquery.com/project/iphone
Direct Download: http://jquery.thewikies.com/iphone/jquery.iphone.zip

So far it's not much, but what it does do you may find very useful,
and for jQuery users it should be fairly simple, because this script
tries to always keep with the jQuery lexicon. Here is an example of
jQuery.

$(document).ready(
function(){
$('body').html('<p>The entire site body was replaced with this text
before you even saw it!</p>');
}
);


One thing my script will do is hide the URL bar, regardless of the
height of your page or if you have a stylesheet present. It just
works.

$(document).ready(
function(){
$.iPhone.hideURLbar(); // This will hide the URL bar when the page
first appears.
}
);


Also, you can disable and reenable the automatic text size adjustments
when rotating your iphone to different angles.

$(document).ready(
function(){
$.iPhone.disableTextSizeAdjust(); // No text resizing right from the
get-go.
}
);


Finally, (and I'm working on more functions, so I'm sorry there are so
few so far), you can automatically detect and launch functions based
on whenever the iPhone makes a rotation change / orientation change /
tilt change / whatever-you-want-to-call-it.

$(document).iPhone.orientchange(
function(){
alert('the iphone has rotated the screen');
}
);


Following the jQuery standard of extensibility, you can write custom
functions for portrait and landscape, separately.

$(document).iPhone.orientchange(
function(){
alert('the iphone has rotated the screen to portrait');
},
function(){
alert('the iphone has rotated the screen to landscape');
}
);


Or you can also write custom functions for portrait, 90 degree
landscape, and -90 degree landscape.
$(document).iPhone.orientchange(
function() {
alert('the iphone has rotated the screen to portrait');
},
function() {
alert('the iphone has rotated the screen to a 90 degree landscape');
},
function() {
alert('the iphone has rotated the screen to a -90 degree
landscape');
}
);


That's all for now. Any feedback is gold to me. :)

[jkramlich]

One thing that I have found to speed up jQuery on the iPhone is to
change it's internal interval from 13 ms to around 83ms. Why 83ms?
It's roughly 12fps or about the slowest animation will appear smooth
to the eye. I don't know if it is possible to change the default
jQuery interval with a plugin but I would definitely look into it.

[Jonathan]

Sure, give me some examples of this being done in jQuery and I'll get
a better understanding of it. I was just reading through docs looking
for information on intervals or animation intervals and there really
wasn't much. Thanks for the feedback!

[∞ | millenomi]

... but the real next step is to port jQuery animations to run on
WebKit CSS Animations wherever possible. This will cause them to work
smoothly on iPhone OS 2.0's Safari.

- ∞

[Ben Densmore]

That is really cool, Jonathan.

I'm actually building an iPhone app with jQuery as we speak.

Are you taking on project contributors? I'd like to get involved if possible.

Thanks,
Ben

[Jon Brisbin]

This is a good solution for going forward, but I also have a
requirement in a project I'm working on to support the 1.1.x firmware
because it's assumed a fair number of iPod Touch users won't spring
for the extra $20 to upgrade to firmware 1.2/2.0. So I'm having to try
and sniff the version to see if I need to do the plain DHTML
transitions, or use the CSS3 transitions...

Thanks!

Jon Brisibn
http://jbrisbin.com

[Ben Densmore]

[chrisTHIS]

This is awesome... thanks for putting this together. I'm at the tail
end of finishing a major iPhone web app based on iUI and jQuery. I'll
give your addon a try and give you my feedback.

[topher]

I came across this a while back: http://www.dynamicdrive.com/dynamicindex4/stepcarousel.htm

Seems like a great solution to the side scrolling effect currently in
the IUI. I don't know if it can be mashed up into the jQuery plugin
that you are creating. I don't know enough about using JQuery or
Javascript yet to know, but just thought I'd make it known just incase
it is useful.

Best regards,

topher

[jkramlich]

You will want to search through the jQuery javascript file for the
number 13. It should appear only twice. Once is to init the timer
that runs every 13ms and the other is to reinit it if for some reason
the timer stops. Changing this to 83ms seems to make things run a bit
more smoothly.

There isn't any documentation on this that I am aware of. I came
across it by searching the jQuery library for instances of
setInterval(). I believe this value is used for all jQuery things
that require a timer; animations, ajax calls, etc. It reduces the
number of times jQuery will attempt to update CSS of an element when
animating.

- John Kramlich

[Jonathan]

Hi Ben,

Thanks for the compliment. Absolutely I would accept any help
whatsoever. I'm currently working on the timer issue that John
Kramlich pointed out. So far here is the fix:

jQuery.timerId = setInterval(function(){
var timers = jQuery.timers;
for (var i = 0; i < timers.length; i++) {
if (!timers[i]()) {
timers.splice(i--, 1);
}
}
if (!timers.length) {
clearInterval(jQuery.timerId);
jQuery.timerId = null;
}
}, 83);

Testing it is another issue. There's an aggravatable delay between
uploading your html files and loading them on the iPhone. This as
well as firmware detection will be necessary in the next release.
Also, I'm sure there needs to be some iPhone animations ported over to
the jQuery method soon too. I think the worst thing I could do is
take too long between these releases.

[Jonathan]

All right. Version 0.1.2 is out!

http://plugins.jquery.com/project/iphone
http://jquery.thewikies.com/iphone/jquery.iphone.zip

I've added a few things, detecting if an iPhone is present and also
which version of Safari and Webkit are being used. I've also taken
John Kramlich's advice and written it into the plugin to switch the
jQuery from 13ms to 83ms which will hopefully smooth out those jQuery
animations.

Ben Densmore, I'd be very interested in working with you on this. I'm
open to any and all contributes too.

Thanks everyone for your feedback so far.

Jonathan

On Apr 15, 5:41 pm, Jonathan <jonathantn...@gmail.com> wrote: