Hello all,
I’ve created a website - www.newwheel.net/testing - and I’d like to have the navigation bar that is fixed to the bottom of the screen work correctly on an iPad and iPhone.
I got the inspiration for the navigation bar from the NY MOMA’s website - moma.org - which works perfectly on an iphone or ipad.
Any idea how I can make my navigation bar stick to the bottom of the screen on an iPad or iPhone?
Thanks
MobileSafari doesn’t react to position:fixed the same way that
standard desktop browsers do, which is what Freeway uses to make
static content (Fixed in Window, in the parlance of the Inspector).
You’ll need to resort to JavaScript to overcome this limitation.
Make sure you know what name Freeway has given the navbar element
(look in the Title field in the Inspector while the element is
selected). Then, apply Protaculous to the page, and choose prototype-
packed as the library using the picker in the Actions palette.
Finally, click on the top Function Body button and paste in the
following:
Be sure to modify the part that reads yourFooterName so it matches
your footer’s actual name, or this won’t work at all.
Hello all,
I’ve created a website - www.newwheel.net/testing - and I’d like to
have the navigation bar that is fixed to the bottom of the screen
work correctly on an iPad and iPhone.
I got the inspiration for the navigation bar from the NY MOMA’s
website - moma.org - which works perfectly on an iphone or ipad.
Any idea how I can make my navigation bar stick to the bottom of the
screen on an iPad or iPhone?
Thanks
I’ve tried your recommendation - not the geekier solution - and it hasn’t worked for me. You can see the result at www.newwheel.net/testing. I’ll continue to tinker and see if I can make it work.
It seems to work on page load, but not on scroll. Perhaps the window scroll event isn’t being fired when the page is dragged on the iPad. If I get a chance later I’ll look into that.
I just updated the Gist with a bit of code that might work. Apparently MobileSafari uses a different property to register the scroll offset than any other browser, so I added an explicit test for that. Please give it another try and let me know how it goes.
I’m not seeing that code anywhere in your page source. Also, you have
your footer element set as position:fixed rather than position:absolute.
I’ve tried it on Untitled and it
seems to work fine on initial page load, but I’m still not getting the
right offset after a scroll. It appears to be wrong by whatever the
height of the Safari Location/Search bar whenever that bar is scrolled
off-screen. Rotate an iPhone to landscape and scroll a little, and
you’ll see what I mean.
You might want to seriously consider the rocket-science approach, mine
seems to be half-baked.
Walter
On Oct 12, 2010, at 1:58 PM, Brett wrote:
Still doesn’t seem to be working on my iPhone. I added the new Gist
only to the front page at www.newwheel.net/testing
I don’t think I’d know where to start with the rocket-science approach. Would I simply upload the rename the footer elements in the javascript to match my own and then upload that javascript?
Not sure. I haven’t looked at it in any detail. I won’t have time
until tomorrow to give it an eyeball, either.
Walter
On Oct 12, 2010, at 2:35 PM, Brett wrote:
I don’t think I’d know where to start with the rocket-science
approach. Would I simply upload the rename the footer elements in
the javascript to match my own and then upload that javascript?