One of the the biggest problems facing mobile web developers is the ability to create fixed headers and footers on mobile websites and HTML5 powered mobile applications. The problem is caused by the lack of standard support for the CSS properties position:fixed and overflow. Originally, these were not supported because they interfered with the touch interactions of the phone operating system but as of iOS5 and Android 2.1 there is rudimentary support for position:fixed. If you would like to see the level of support for these properties in the various mobile browsers, there is a handy chart available here: http://e.com/css-fixed.

The good news is that default support is on the way. The bad news is that it is not here yet. Regardless of the mobile platform you are targeting, there will be a large percentage of users that are unable to use your interface properly if you rely on position:fixed or overflow. In jQuery Mobile, there is a default solution. They have built in toolbars that mimic a fixed header and footer by fading out and repositioning as the screen moves. While this is an improvement, it is still not a solution for a developer wanting a native app look and feel.

So what is the solution?

After a great deal of research and testing I found there were two primary solutions for this problem being used by fans of the jQuery Mobile platform. They both use Javascript to modify the elements and mimic the scrolling functionality of a native application.

Solution 1: iScroll jQuery Mobile Plugin

URL: https://github.com/yappo/javascript-jquery.mobile.iscroll
This jQuery Mobile plugin is a wrapper for the iScroll Javascript function. (http://cubiq.org/iscroll-4) This plugin is made up of a single file that drops in to your HTML and then is initiated by adding ‘data-iscroll=”scroller”‘ to the element you want to scroll. This plugin was very easy to setup and worked, however, the animation was slow on android applications and when loading websites on the iPhone I had a persistent space at the bottom of the page that I could not remove. I believe it was caused during loading by the default iPhone toolbars but I am uncertain. I searched online and wasn’t able to find a suitable solution. Many users have reported this solution worked well for them and several indicated they were using it successfully with the PhoneGap platform.

Solution 2: Scrollivew

URL: http://jquerymobile.com/test/experiments/scrollview/
Download URL: https://github.com/jquery/jquery-mobile/tree/master/experiments/scrollview
This jQuery Mobile plugin is actually sponsored by jQuery and is currently listed under their experiments section on the jQuery Mobile website. It was a bit harder to get running. It required 4 files, 3 Javascript files and 1 CSS file, although, I was able to lump them together into existing application files to minimize HTTP requests. This solution worked very well for my application. After installing the scripts I simply added data-scroll=”true” to the element I wanted scrollable and the plugin took care of the rest. One important thing to note about this solution, is that in addition to simple fixed toolbars, this plugin also allows scrolling of on page elements left or right and can also handle scrollable lists with inline headers.

My Conclusion:

After extensively testing both of the primary scrolling options for jQuery Mobile I feel like the jQuery Mobile Scrollview is the best solution. It was very easy to install and configure, offered great support on iPhone and Android devices, and has more options and configurations available to customize your application. In addition, it may at some point be integrated into jQuery mobile as default functionality to serve as a bridge until position:fixed and overflow are full supported by the majority of active smartphones.

No related posts.

Please watch the video:

I kind of hope this is some sort of clever scam and not a real Microsoft endorsed video, Unfortunately, some credible news sources are reporting it is indeed legit. Microsoft has had some awful beer thirty advertising ideas in the past but this one may take the cake.

Ever since I struggled through this video, I have been trying to picture what a Windows 7 party might look like. A Windows 7 party is probably a great way to lose friends, although, someone throwing one is very unlikely to have any friends to start with. I would imagine most Windows 7 parties will take place in a dark basement, with a lonely 37 year old guy swearing into the darkness because his World of Warcraft just crashed due to a bug in the new Windows 7 OS.

How many parties do you think will actually occur? Of those what percentage do you think will be interrupted by a frozen Windows 7 machine? Does anyone, anywhere think this is a good idea? This cannot be good for the Windows brand that is already struggling with the young tech savvy crowd. Microsoft continues to fail miserably in its advertising efforts. To answer a question from the token black guy in the video, “Can you believe Microsoft put the launch of Windows 7 in our hands?” NO! I hope Bill Gates personally fires his entire advertising department for further destroying the Windows brand.

I have tested Windows 7 and it was a decent OS. It is what Windows Vista should have been. My question is, why ruin it with such a have baked advertising campaign? This idea is so awful I am now embarrassed to use Windows. I think I will switch my Windows 7 testing machine to Linux this weekend.

No related posts.

While this is good news for designers who want to look trendy but can’t write off the oversized expense as a tax deduction. I wonder what kind of problems it will present to app designers. Now there will be 4 variations to consider, with varying feature sets. The original iPhone, the iPod Touch, the iPhone 3G and the new $99 iPhone all are significantly different. For some apps and games it won’t matter but for some that want to incorporate GPS or the camera it may increase the number of logistical issues. It will be interesting to see what Apple decides. It may be that 3G and GPS stay intact as research firm iSuppli estimates the cost of these options at $20.

Regardless, Apple expects they can sell 20-30 million of these cheaper iPhones in fiscal year 2010 boosting their smartphone market share to almost 20%. Now maybe Adobe and Apple will actually get serious about making Flash work on the iPhone.

No related posts.

The VixML platform gives developers of the power to create iPhone applications with access to the phone’s multi-touch functions and other input methods like speech, accelerometer, and animations via a single XML file and some animated sprites.

TechCrunch, which covered the VixML launch and calls it “revolutionary,” says that for now applications created using the platform can only be published to Viximo’s upcoming TrueFlirt app, which lets users create (using VixML), send to friends, and view “flirtatious” animations and mini-apps for the iPhone.

Developers can use VixML to create apps that are then published for use with TrueFlirt, either within the app itself or as part of standalone add-on bundles for the TrueFlirt app that are sold via the App Store. Viximo reportedly plans to share revenue with the developers of VixML apps, who TechCrunch points out face a double approval process — they need apps to be approved both by Viximo and by Apple.

The platform within a platform approach is interesting because it lowers the barrier of entry for development for the iPhone by making it easier for web developers to create native apps — they can skip learning Objective C by using something like VixML. And though VixML is unique in its approach, it isn’t really what we’d call revolutionary. We reported in September on two other iPhone development platforms that greatly lower the barrier to entry for developers and do so in what we think are more clever ways.

It will be interesting to see how this catches on. I am not particularly attracted to the application in an application methodology, at least at this stage. As an iPhone user I like to get my applications directly from the app store but we will see if this changes once there are a few options to try.

No related posts.