atom feed5 messages in com.googlegroups.iphonewebdevRe: fixed position element in mobile ...
FromSent OnAttachments
Marcelo WolfgangOct 13, 2008 1:37 pm 
Jon BrisbinOct 14, 2008 6:48 am 
Marcelo WolfgangOct 14, 2008 9:36 am 
Jon BrisbinOct 15, 2008 7:51 am 
Nicolino CubettoOct 15, 2008 3:44 pm 
Subject:Re: fixed position element in mobile safari
From:Jon Brisbin (jon.@gmail.com)
Date:Oct 15, 2008 7:51:14 am
List:com.googlegroups.iphonewebdev

function showNavBar() { var win_y = $(window).height(); var scroll_y = $(window).scrollTop(); $("footer").css({ top: ((win_y - 36) + scroll_y) + "px" }); $("header").css({ top: scroll_y + "px" }); } var showTimer = false; function maybeShowNavBar(evt) { if ( showTimer ) { clearTimeout( showTimer ); } showTimer = setTimeout( showNavBar, 175 ); } $(window).bind( "scroll", maybeShowNavBar );

Thanks!

Jon Brisibn http://jbrisbin.com

On Oct 14, 2008, at 11:37 AM, Marcelo Wolfgang wrote:

Hi Jon,

Thanks for the input, can you share your solution number 1 with me ?

I've read through the foruns that the mobile safire makes a picture after it renders the page, whes position fixed impossible ... is this right?

TIA Marcelo Wolfgang

On 14/10/2008 11:48, Jon Brisbin wrote:

There's really only a couple choices, since there's no fixed positioning (fixed to the viewport, anyway...there is a lot of discussion about this in various message boards) on mobile safari:

1) re-position the element after "onscroll". I add a CSS3 transition to it which slides it down to its new position. Not ideal, but you get used to it.

2) clip overflow on the body and add a scrollable element that fills the screen. This might not work for you if you're depending on body scroll events.

Thanks!

Jon Brisibn http://jbrisbin.com

On Oct 13, 2008, at 3:38 PM, Marcelo Wolfgang wrote:

Hi all,

I'm developing a mobile safari target site, that I've designed with a bottom menu.

I've set it with css with the following declaration:

#menu{ position:fixed; bottom:-62px; }

I'm using jquery to make the page hide the urlbar by default so that's why of the -62px on the bottom attribute.

Everything is fine if the page doesn't have a scroll, if it has, the bottom scroll up with the rest of the page.

I've tried to add some script to it, but it didn't help:

$(document).ready(function(){ $(window).scroll(function () { $('menu').css('bottom','-62px') }); });

Does anyone has any idea that can help me make the menu fixed at the bottom ?

TIA Marcelo Wolfgang

--~--~---------~--~----~------------~-------~--~----~ You received this message because you are subscribed to the Google Groups
"iPhoneWebDev" group. To post to this group, send email to ipho@googlegroups.com To unsubscribe from this group, send email to
iphonewebdev+unsu@googlegroups.com For more options, visit this group at
http://groups.google.com/group/iphonewebdev?hl=en -~----------~----~----~----~------~----~------~--~---