As some of you know, I bought the LG Dare a couple of weeks ago. Aside from the lack of Bitpim support (so far, anyway), I’m very happy with the phone. Yes, it’s trying hard to be an iPhone, but for those of us that don’t feel like paying exorbitant fees to get out of our contracts and switch to the NSA’s bff, AT&T, it’s pretty much the best thing they have on offer.
So, in an effort to make it even more iClone-ish, people started making browser start pages with iPhone-like icons to take them to various mobile sites (Gmail, Flickr, Facebook, etc). I made my own, using a Photoshop template for making iPhone buttons, and it came out pretty well.
The problem, though, was that the phone switches from portrait to landscape automatically based on the orientation of the phone, but doesn’t resize content afterward. If the page initially loaded in portrait and switched to landscape, it stayed at its portrait-based width, 240 pixels. That was no good.
The only attempt at a solution that I saw was to include links to two different layouts. That was fine, but far too manual and inefficient for my tastes. My first attempt basically removed the manual step of clicking a “portrait” and “landscape” link. It polled the width of the page every few seconds. If it was 240 pixels, it redirected to a page that loaded a css file that set the content div to 240 pixels. If 400 pixels, it did the same thing, only using a different css file that set the width to 400 pixels:
[javascript]
window.onload = checkScreenSize;
var base = ‘http://dare.jrsmith.net’;
function checkScreenSize() {
var url = document.URL;
var width = window.innerWidth;
if ((url == base || url == base+’/’ || url == base+’/index-p.html’) && width == 400) {
document.location.href = ‘http://dare.jrsmith.net/index-l.html’;
} else if (url == base+’/index-l.html’ && width == 240) {
document.location.href = ‘http://dare.jrsmith.net/index-p.html’;
}
setTimeout(“checkScreenSize()”, 2000);
}
[/javascript]
This still required the use of two html files that were identical except for the css file being loaded. I got around that annoyance by using server-side include directives to set variables and include one file in both pages. Less than ideal, but it worked, and I posted it on howardforums. People seemed to like it, but it proved somewhat cumbersome to implement for those not familiar with javascript and html, and most people who don’t make websites don’t really have access to or know how to use server-side includes. Plus the javascript had to be customized, which was no good. The complexity bugged me.
I tried to rewrite the javascript to simply switch out the css files without reloading the page. It’s a common thing to do, and I don’t know why I didn’t go that route in the first place. The browser on the phone is pretty decent as far as mobile phone browsers go. It’s no WebKit, or even Opera Mobile or Minimo, but it’s better than the shitty browser most phones have, and it’s way better than PocketIE.
Unfortunately, it doesn’t seem to fully support enabling and disabling link elements through the disabled attribute. It would pretend to enable and disable the stylesheets, but the changes weren’t reflected in the rendered document. It also didn’t support document.styleSheets at all.
In the end, to get around these limitations, I just had to explicitly set the widths in the javascript that handled the polling. It made that part of the code a little more bloated, but it removed the need for so many other pieces, it was worth it:
[javascript]
window.onload = checkScreenSize;
function checkScreenSize() {
var url = document.URL;
var width = window.innerWidth;
if (width == 400) {
document.getElementById(‘mainContainer’).style.width = ‘360px’;
document.getElementById(‘mainContainer’).style.height = ‘240px’;
document.getElementById(’searchParams’).style.width = ‘226px’;
document.getElementById(’shortcutList’).style.width = ‘360px’;
document.getElementById(’shortcutList’).style.height = ‘120px’;
} else if (width == 240) {
document.getElementById(‘mainContainer’).style.width = ‘240px’;
document.getElementById(‘mainContainer’).style.height = ‘400px’;
document.getElementById(’searchParams’).style.width = ‘106px’;
document.getElementById(’shortcutList’).style.width = ‘240px’;
document.getElementById(’shortcutList’).style.height = ‘180px’;
}
setTimeout(“checkScreenSize()”, 1000);
}
[/javascript]
It seemed to go over pretty well on the forum. I posted a link to the file Monday night, and it’s been downloaded 124 times as of 11:48pm Wednesday night. For something so quick and simple, that amazes me.
The other little improvement I made on what I was seeing other people do was to the common search bar they were including. It was just a form that submitted to Google’s mobile search. I added a dropdown list that let you search pretty much anything you want. Here’s the HTML for mine:
[html]
[/html]
It stores the URL for the search engine as the value of the selection and feeds that to a simple javascript function that pastes the search parameters onto the end and redirects to the search engine:
[javascript]
function conductSearch() {
var searchURL = document.getElementById(’searchType’)[document.getElementById('searchType').selectedIndex].value;
var searchParams = document.getElementById(’searchParams’).value;
document.location.href = searchURL+searchParams;
}
[/javascript]
It’s nothing fancy. I didn’t spend a lot of time trying to sanitize, secure or idiot-proof any of these functions. These pages are meant to be for personal use on a specific piece of hardware. The javascript could probably be more robust, but I don’t think it’s really worth the effort.
For anyone who’s interested, the zip file is here. It should be easy to adapt to other phones or mobile devices that need such functionality.
Doing this made me remember how good it feels to make things that people actually like and use. The past year or so at work has been so frustrating and tortuous that I’d forgotten how satisfying that can be.
I’m half-assedly working on a simple web application (written in Django) that will let people register and create there own pages without having to get hosting and edit html. It works right now, but it’s ugly and not very user-friendly. I’m not sure if I’m going to keep working on it. If I keep getting help requests, I might just be forced to.