PhoneGap – The missing android/windows setup guide
The Introduction
Yesterday I spent a good part of the day setting up the absolutely fantastic framework PhoneGap. If you don't know what PhoneGap is, and you are a web developer, you are truly missing out. The only thing I can compare it to (from a high level) is Adobe Air. Air lets you build a page out of html, css, and js and then renders it in a webkit self-contained browser that you can then package up and distribute on any platform that runs air (Win/Mac/Linux), and yes you can also build Air apps with Flex and Flash. PhoneGap is similar to Air as it too uses html, css, and js to build apps for Android, iOS, WebOS, Blackberry, Symbian, and Nokia.
Now don't let my title fool you, there is a guide (and a pretty good one at that) waiting for you in the PhoneGap Wiki, the problem is that it is now out of date and will cause you grief if you try to follow a few of the steps because they look like they are the right steps to follow. That's why I've created this entry to walk you through the mistakes I blundered through to get it set up and working on my Windows 7 box (My mac died, and my linux lappy is a netbook - not ideal for developing on... plausible, but not ideal).
Print This Post
Quick and Painless file conversion
It's pretty rare that a person needs to convert one file type to another (especially since programs like OpenOffice.org will open just about anything). However today I got a file with a .wps extension, my first thought was 'maybe that's a word perfect' so I tried to open in w/ OpenOffice writer which gave it it's best shot only to come up way short by opening a blank page.
I promptly went to google to find out what extension that is and not only did I find it's an old Microsoft Works file that is no longer used/supported, but I also found a handy website for converting such files (among others) to more user friendly formats.
The site is called zamzar.com, all you do is point your browser there (or click on the link) upload a file and within a few minutes you have an email with a download link to your new file, it's easy, fast and best of all free. You don't even have to create an account, although there is that option. I was so impressed with it I decided to post it here on my favorite tech blog.
Print This Post
Check Scroll Bar Position
I few weeks ago I was tasked with making one of those annoying "you must read the entire page before you continue" things (which as you know really just means you only need to scroll to the bottom of the page before continuing). It was something that I thought would be pretty easy to find on the web considering how often I run into it in use. However I was wrong, so here is what I was able to come up with.
$("#selector").scroll(function() { var elem = $(this); var position = elem[0].scrollHeight - elem.scrollTop(); if(position == $(elem).outerHeight()) $(":button:contains('submit')").removeAttr("disable"); else $(":button:contains('submit')").attr("disable","disable"); }); |
A few things to note:
the "elem[0]" that defines "var position" is significant for some reason, I tried it without the "[0]" and it broke, I'm not 100% sure why so if anyone wants to weigh in, that would be great. Secondly, it is good to keep in mind that the "disable" attr is not supported on IE7 and lower so in order to fix band-aid this I simply made the button look disabled by doing something like.
if(position == $(elem).outerHeight()) $(":button:contains('submit')").css("cursor","pointer"); else $(":button:contains('submit')").css("cursor","text"); |
Ultimately this only fakes people out if they pay attention to their cursor, which is probably less than 50% of the time. so really the best way to do this i found is as follows:
$("#selector").scroll(function() { var elem = $(this); if(checkScrollTop(elem)) $(":button:contains('submit')").css("cursor","pointer"); else $(":button:contains('submit')").css("cursor","text"); }); |
Then I Have a function called checkScrollTop() which takes an argument.
function checkScrollTop(elem) { var position = elem[0].scrollHeight - elem.scrollTop(); if(position == $(elem).outerHeight()) { return true; } return false; } |
And last but definatley not least, a click event on the button so we can catch those trying to cheat w/ IE7 and (gulp) below.
$(":button:contains('submit')").click(function() { var elem = $("#selector"); if(checkScrollTop(elem)) $('#step1_disable').hide(); else alert("Please read the entire policy before clicking \"submit\""); }); |
to break it down, the $("#selector").scroll function simply decorates the button, while the click event on the button determines if the user can continue, if not it pops an alert up telling them what they must do. both events use the checkScrollTop(elem) function which measures the position of the scroll-bar.
Happy Annoying people 
Print This Post