Taming the iPhone URL bar
Monday, September 15th, 2008I get to do lots of different kinds of front-end development at maybe.for.you., and right now I’m cracking on a social networking site optimized for the iPhone. There’s a simple horizontal header at the top with a logo and a few global nav links. That header is consistent from page to page, and doesn’t require any animation. But for the main site content, I’m setting up clickable lists that scroll to reveal more detailed information. It’s basically a stripped-down version of the IUI, but built specifically for this interface using jQuery. There’s plenty of information out there about hiding the URL bar at the top of the screen – a simple javascript function can handle that:
<script language="javascript" type="text/javascript"> addEventListener("load", function(event) { setTimeout(function(){window.scrollTo(0, 1);}, 100); }, false); </script>
Add that in your <head>tag to scroll the URL bar out of the way when the page loads. But with an AJAX-heavy interface, I found that the URL bar isn’t easy to keep out of the way. Links, animation, and scripting can all cause the URL bar to drop down, even if you’re not sending the user to a new HTML page. Eventually I was able to work out my problems, but only after wasting plenty of time with guess-and-check coding – and continuously uploading my updates to the web because I can’t test locally on my iPhone. Anyway here’s a checklist I came up with for troubleshooting the URL bar.
Prevent the default event. It’s not something I always think about, but it’s usually a good idea, and is usually the first thing I check when troubleshooting. If you’re using <a> links to trigger animations, be sure to catch and prevent that default event. If you’re using jQuery to do your animations, this is simple:
$("a.list").click(function(event){
event.preventDefault();
// animation scripts go here
});
Consider the height of existing page content. Is there enough content visible on the screen to fill up the entire available vertical height? If not, the browser will scroll to the top of the page regardless of whether or not the URL is being manipulated. One solution – the CSS min-height property. Of course, it’s not universally supported but since we’re optimizing for iPhone/iPod touch we’re pretty well covered. So I create a class called “page” that includes a min-height of at least 400px – combined with the 80px of my header that should be plenty of vertical space to fill the screen.
/* CSS document */
.page
{
min-height: 400px;
}
So I thought that would solve all my problems but during some of my page animations I was still seeing the URL bar drop down. I’m hiding a page element off the right edge of the browser, and setting its display property to “none”. When a link is clicked, I animate the original page off the left edge and animate the new page onto the screen. Even though I was using a time-delayed callback to hide the first page after the off-screen animation, since I had that line of code before the line displaying the second page the browser detected an insufficient amount of content on the page for a brief moment and scrolled to the top. Here’s the bad code:
$("#leftPage").animate({
"left": "-100%"}, 700, "", function(){
loadPage(event.target.rel);}
);
$("#rightPage").show();
$("#rightPage").animate({
"left": "0%"}, 800, "", function(){
$(".page:eq('0')").hide();}
);
And the corrected version:
$("#rightPage").show();
$("#leftPage").animate({
"left": "-100%"}, 700, "", function(){
loadPage(event.target.rel);}
);
$("#rightPage").animate({
"left": "0%"}, 800, "", function(){
$(".page:eq('0')").hide();}
);
So after a lot of trial and error I worked out most of the glitches with the URL bar. Next week I’m sure it’ll be something else.