expressions and insights

The page that one of my back button navigates to requires some JavaScript code to run to hide div until a button is pressed. Essentially, what I needed was to be able to go back while having the page I’m going back to reload. Unfortunately, simply using history.go(-1) takes me back a page but loads it from cache. I’m not sure if it’s the iPhone/Mobile Safari that I’m testing on, but none of the following meta tags worked:

<meta http-equiq="Pragma" content="no-cache">
<meta http-equiv="Expires" content="-1">
<meta http-equiv="Cache-Control" content="no-cache">

So I scoured Google for a while until I stumbled upon a solution. There’s a call to get the URL of the last page. Then all I had to do was replace window.location with the URL.

var lastPage = document.referrer;
window.location.replace(lastPage);

Pretty basic, but it works if you need to go back and and refresh a page. No messing around with cache, cookies, sessions, what have you.

I spent a couple of hours trying to figure out how to prevent my iPhone web app from allowing the user to drag and pan the screen horizontally (because it’s horribly tacky and annoying when the user accidentally drags their fingers left and right and sees the screen shift back and forth until it eases back into frame).  I had the right line in the HTML file, so I was really frustrated that it wouldn’t work, and was even more frustrated that hardly anyone else had the same problem I was having.  Turns out no one else was having the same problems because it’s somehow my fault.

So in conjunction with using:

<meta content="width=device-width, user-scalable=no" name="viewport" />

you have to be sure your body width is within the screen’s width (which is of course 320px in iPhones’ case).  For some reason, the scaling is off so adding width:320px into my body{} property in my CSS file didn’t work, so I had to use 302px instead. That’s pretty odd, but I guess it works.  I’m still kind of annoyed that the body needs the width to be specified.  Looking at other web app’s CSS, it looks like it works fine without having to specify the dimensions.  I’m not sure how my cheap fix will pan out when I work on the rotation detection, but I’m sure it’s some basic JavaScript to get the width inside the body property in the CSS and changing that.

The mobile web app I’m creating at work requires two entirely separate versions (one for desktop browsers and one for Mobile Safari), so I came up with a fairly decent way of detecting whether the browser is being run on an iPhone.  There might be some typos in the code below since I typed it from my head, but this is the gist of it.  If you need to detect more mobile device browsers, you can just make an array of all the different user agent string (which can be found here) and do a string comparison against them all in a for-loop or something.

<%
String wholeUserAgentStr = request.getHeader(user-agent);
String mobilePlatformStr = "iPhone";
String userPlatform = wholeUserAgentStr.substring(wholeUserAgentStr.indexof("(")+1, wholeUserAgentStr.indexof(";"));

if(userPlatform.equals("iPhone")){
   //print mobile XSL file
} else {
   //print regular XSL file
}
%>

This works fine, but my boss tweaked it and made it into JSP 2.0 and created it as its own tag.  There’s more to it than this, but this line is pretty much what I came up with above, just in a much more concise manner.

<c:set var="xsltFile" value="{$fn:indexOf(header['user-agent'], 'iPhone') < 0 ? xsltFile : mobileXsltFile}" />

I’m a little stuck in a design/layout problem at work.  Up until now, I’ve had no problems translating the full desktop browser version of the data into an iPhone web app layout.  But I’m currently at a section of data where I’m unsure how I should apply my theme that I’ve been using with the rest of the data.  My existing “theme” consists of basic white boxes with rounded corners with the right side of each box showing the line of information, and the left side describing the information to the right.  But now the section of data I’m working on has four links and a single line of code wrapped in pre-tags.  I’m a little unsure how I should tweak my white-box theme to accommodate this irregular bit of data without having to re-change the rest of the pages.

I considered this problem when I was sketching out some crude wireframes for the app, but overlooked this because this section is merely a fraction of all the other data that actual conforms to my layout.  It didn’t seem like too much of a problem at the time when I ignored it because it seemed like a relatively easy problem to solve, and I had to start producing something aside from sketches.  But now thinking this through, most of what I’ve come up with makes it stick out from the rest of the pages.  I’m sure all I’m missing is some ingenuity.  I just need to stick four links, a line of code, and a title into a white box with it making sense and not ruining the rest of the pages.  No big deal.

Here’s my traditional first post.  More to come, of course.