Look Ma, no toolbar!

9 views
Skip to first unread message

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
0 new messages