Look Ma, no toolbar!

Joe Hewitt

unread,

Jul 2, 2007, 4:11:05 AM7/2/07

to iPhoneWebDev

The first thing you think when you load your first page in the iPhone
browser is, "Damn, I wish I could get rid of those giant toolbars!"
It is kind of annoying to have your pages so small.

As it turns out, you can easily get rid of the big toolbar at the top,
which is much larger than the one at the bottom. All you have to do
is position the content of your page at "top: 60px", and then when the
page loads call "window.scrollTo(0, 60)", which will scroll the big
toolbar right out of sight! This gives

This breaks down when the user rotates the phone, though, so you have
to call "window.scrollTo(0, 60)" again when you detect a change in the
screen size (I posted about how to do that earlier).

Here is a demo:

http://www.joehewitt.com/files/liquid1.html

Joe Hewitt

unread,

Jul 2, 2007, 4:46:45 AM7/2/07

to iPhoneWebDev

Actually, as it turns out, you don't have to position your content at
60px, you just have to call window.scrollTo(0, 1) and poof, no more
toolbar.

nroose

unread,

Jul 2, 2007, 12:24:19 PM7/2/07

to iPhoneWebDev

Cool! If you go back to 0 will the toolbar reappear?

codeninja

unread,

Jul 2, 2007, 2:19:46 PM7/2/07

to iPhoneWebDev

This is not working for me anyway I try it.

<body id='<%= @body_id %>' onload='alert("im
loaded");window.scrollTo(0, 1);'>
<div id="container">
<%= @content_for_layout %>
</div>
</body>

I get the alert, but the window will NOT scroll.
Using prototype.

Joe Hewitt

unread,

Jul 2, 2007, 3:19:00 PM7/2/07

to iPhoneWebDev

You have to use setTimeout after onload before calling scrollTo.. If
you call scrollTo
directly in the onload handler it won't scroller.

Christopher Allen

unread,

Jul 2, 2007, 4:23:30 PM7/2/07

to iphone...@googlegroups.com

So what is the best, absolutely minimal example that everyone can use
who wants to hide the scrollbar in their iPhone page?

-- Christopher Allen

codeninja

unread,

Jul 2, 2007, 4:26:07 PM7/2/07

to iPhoneWebDev

onload='setTimeout(function(){window.scrollTo(0, 1);}, 100);

On Jul 2, 3:23 pm, "Christopher Allen" <Christoph...@iPhoneWebDev.com>
wrote:

Christopher Allen

unread,

Jul 2, 2007, 6:07:28 PM7/2/07

to iphone...@googlegroups.com

On 7/2/07, codeninja <code...@gmail.com> wrote:
> onload='setTimeout(function(){window.scrollTo(0, 1);}, 100);

I guess ideally this should be inside some type of iPhone specific
user-agent test, so that non-iPhone windows are not scrolled. How can
we do that in the most minimal fashion?

-- Christopher Allen

ryan.d...@gmail.com

unread,

Jul 2, 2007, 7:22:07 PM7/2/07

to iPhoneWebDev

Detect the User Agent server side or client side?

if(navigator.userAgent.indexOf('iPhone') != -1) {

onload='setTimeout(function(){window.scrollTo(0, 1);}, 100);
}

Pretty minimal. Or you could do it server side and just not send that
JS if the browser isn't an iPhone.

-Ryan Doherty

On Jul 2, 3:07 pm, "Christopher Allen" <Christoph...@iPhoneWebDev.com>
wrote:

Matthew Krivanek

unread,

Jul 3, 2007, 12:47:13 PM7/3/07

to iPhoneWebDev

Is there perhaps a way to move up the bottom toolbar upon scrolling up
to get to the URL bar? That way no matter what, the bottom toolbar
would never disappear.

Despite several attempts I've been unable to capture the scroll's
offset, or a scroll event.

None of the following working... pageXOffset, pageYOffset,
document.body.scrollTop, document.body.scrollLeft

Ideas?

Reply all

Reply to author

Forward