I've just recently started developing a site for iPhone using jQTouch, and have the following code:
<li class="title" onclick="showDesc('desc1');">Post Title</li>
<li id="desc1" class="shortDesc">
Short description of post content
Read
</li>
<script type="text/css>
function showDesc(id){
$("#"+id).slideToggle();
}
</script>
"desc1" is hidden in the CSS and displayed when the user clicks the post title (I'm just working on a mockup, so the argument passed to showDesc() is hardcoded at the moment)
My problem is that when viewing it on the iPhone itself, the animation is incredibly slow and stuttery. It runs fine in desktop browsers (obviously!) and the iPhone simulator, it's just on the unit itself (running iOS 4.3.2).
My question is this: Is this an issue with my code or is it a case of jQuery not having been optimized for Mobile Safari?
I'm using jQTouch for the mobile framework, but the documentation only discusses page transitions by way of animation, so I'm not sure if there's a way of doing it with that.
Alternatively, would this task be better suited to CSS3 animation?
Thanks in advance!
Yes, it is highly recomended to use CSS3 transitions. They are hardware accelerated, whereas Javascript animations are not. You would want to transition opacity as well as width/height parameters for the slideToggle animation. It's nasty, but it gives you great performance
You should use CSS3 animations on mobile as "CSS rendering engine" has more opportunities to optimize performance. Especially things like transitioning transforms (things that do not cause re-layouts and re-rendering of textures) - they are mapped on hardware pretty well.
It turns out, that a lot of the rendering issues on the phone itself were caused by the webkit-box-shadow property applied to the hidden <li>
Although CSS3 is a much more "native" option for this task, the jQuery slideToggle() function seems to work perfectly well.
I really ought to have given a more detailed overview of the CSS, but have now learned more about CSS3 animation based on your recommendation, so it was worth it!
Related
I am working on a project, with no BoilerPlate, right now that uses a lot of jQuery animations such as paralax of several elements and the movement of 20 small .png images of clouds in the background (to make a cloud time-lapse) which run very slow and laggish on mobile devices. I want the same UX for both desktop and mobile environments. I am using mediaQueries to use smaller images/elements for smaller screens, but this doesn't seem to optimize mobile performance like I thought it would. I am familiar with HTML5-Boilerplate and BP-Mobile but am not sure if either one will help with my problem.
How can I make these particular effects run smoothly on mobile?
I would try to see if CSS3 animations have any effect. jQuery animate has severe performance drawbacks compared to CSS3. Even on a regular computer it is much smoother.
I've created a website using SUPERSCROLLORAMA plugin. I wasn't aware of the problems with parallax scrolling on iPad and iPhone. I've found out a little bit to late, and I'm thinking about the ways to solve this.
If I understand correctly, events are disabled on this devices while scrolling. So will I be able to make website act as it should, if I disable the native scrolling and implement another one, via JavaScript plugin?
I've already disabled the original scrolling using Alnitak's answer from this question. I've tried to find some plugins to activate scrolling again, but the problem is, it has to be binded to the document since animations are fired there... Do you know the plugin that will do the trick? Is my solution even correct, or there is no solution for my case, I need to rewrite the script from scratch?
You can use parallax scrolling plugin that works on mobile browsers (iOS too).
Have a look at Skrollr. It doesn't depend on any other library, it has optional mobile js file and is very easy to use. Just read the documentation.
I'm working on a few html5 screens which will be embedded inside native mobile apps (for ios and android).
I obviously don't want to reinvent things here, and would like to use a stable framework on the javascript side of things.
I tried using JQuery Mobile but it is way more than I need, plus they kind of force you to do things their way.
All I need is to have an element which can be (vertically) scrolled by swiping (without visible scrollbars), but I couldn't find how that can be done with JQM easily (without all of their widgets, themes and defaults).
I also tried jGestures but it did not work at all.
Any ideas what will be the best approach?
Thanks.
Update
I found this jquery plugin which does what I need: https://github.com/ifightcrime/touch-scroll
You can use -webkit-overflow-scrolling: touch; which uses the native inertia scrolling built into the phone. Works really well. There is a scrollbar, but I'm sure some clever positioning could solve that.
More info here: http://johanbrook.com/browsers/native-momentum-scrolling-ios-5/
And here: http://fioravengi.blogspot.co.uk/2011/06/implications-of-ios-5-webkit-overflow.html
Hope that helps :)
edit: Sorry, just realised you need it to work on android. I doubt this does. For iOS though this works a treat. So, half an answer!
With this project at work, we have had to make a iPad HTML5. Using Backbone and jQuery Mobile, we thought we were on to a winner, but jQuery Mobile seems to be causing more problems than it should be. Using such things as page transitions with jQuery Mobile is painfully slow, choppy and glitchy (I do understand it's still in Alpha).
For our needs, we do want a smooth way of transitions between pages. I set about doing some experiments to see if I could get them any better for bespoke solution. I feel I'm quite close with this, but the animations still seem choppy and glitchy. I wonder if there is any other way to approach this? Or if there is a nugget of information that will help getting this rock solid?
I'm using translateX()/translateY() CSS3 (hardware accelerated) transforms to ensure it gets the best performance, but it still seems unreliable with it's performance. Sometimes it's ok, sometimes it's not.
I have uploaded an example... Please note, this is only tested in Chrome/Safari (which it looks fine in) and Mobile Safari on the iPad 1st generation (which it looks choppy in). If you happen to have an iPad handy, please take a look at this example...
http://littlejim.co.uk/code/ipad/jquery-plugin-page-transitions/
It's made as a basic plugin, because once I have this nailed I want to develop it more.
Can anyone help with this? I just wonder why it's still choppy on the iPad?
UPDATE: I tried using translate3d() as well as the translateX and translateY(), made no difference.
Only 3 dimensional transforms are hardware accelerated on the iPad. You should use translate3d and provide a 3rd parameter, set to zero.
http://googlecode.blogspot.com/2010/08/css3-transitions-and-transforms-in.html
I know there are a number of frameworks to help make web applications on Mobile Safari/Webkit look and behave like native applications (eg, jQTouch), but are there any more light-weight libraries that help out at a slightly lower-level?
eg, I might want to add some animations on certain touch events to reproduce an iPhone style swipe.
I don't want to create an iPhone web application as such, just enhance an existing site with a few special touch events.
It's not so difficult to create this stuff by directly using the touch events that the device provides, but some of the iPhone animation styles are quite complex to reproduce. eg, the bounce when you get to the end of a scroll bar, etc... Just wondering if anyone has done the work and wrapped it up into an open source library.
This doesn't answer your question completely, but since you mentioned bounce scrolling specifically, TouchScroll was just released on Tuesday.
I am looking for the same thing, JavaScript frameworks free from IE stuff..
So far
XUI
http://code.google.com/p/xui-js/
SLY
http://github.com/digitarald/sly
Coming Soon
jQuery for touch devices (not jqtouch) http://jquerymobile.com/2010/08/announcing-the-jquery-mobile-project/
http://zeptojs.com/ is all you want.
It's jQuery trimmed for webkit mobile. Excellent library with (brand new) great documentation. Handles ajax, dom selection, touch events. Does not have UI components.
Very lightweight.