1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    20
    Vote Rating
    3
    bstrappazzon is on a distinguished road

      1  

    Default Unanswered: Hiding and showing address bar in Safari mobile

    Unanswered: Hiding and showing address bar in Safari mobile


    Hi all,

    I'm developping a mobile web site with sencha Touch 2.0 and I would like to hide the safari mobile address bar when user scroll down and show it back when he scroll up and reach the top of the page.

    This is the common behavior of web site with scrolling bar.

    I already tried to add this :
    Code:
    viewport : {
            autoMaximize: true
    },
    to my application definition but this is definitively not having the wanted effect as the application shows in fullscreen without address bar but we are not able to make it showing back.

    Does anyone has an idea on how to do This?
    I'm pretty sure I'm not the first one who want its mobile webSite to works this way

    Thanks a lot

    Benjamin

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,549
    Vote Rating
    873
    Answers
    3567
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    So it hides the address bar but you can't get back to it?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    20
    Vote Rating
    3
    bstrappazzon is on a distinguished road

      1  

    Default


    Yes, exactly.

    On safari mobile, once a web site has a vertical scrolling bar, the address bar scroll down with the entire page on it shows back when you scroll up to the top of the page.

    From what I understand, the browser has this behavior if the page height exceed the screen size.
    Tell me if I'm wrong but sencha viewport height just fit the screen height and the scrolling is handle in an inner container by sencha?

    Do you have a trick to make this bar showing and hiding when needed?

    Anyway thanks for yours answers

    Benjamin

  4. #4
    Sencha User
    Join Date
    Jul 2013
    Posts
    1
    Vote Rating
    0
    iluvpinkerton is on a distinguished road

      0  

    Default


    Yes, that is the problem I'm having. I am using automaximize:true which hides the address bar on load. However, I want the bar to pull down again if the user swipes to the top of the page. Is this possible?

  5. #5
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Vote Rating
    99
    Answers
    132
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      0  

    Default


    One option is to look at a jQuery solution:
    http://stackoverflow.com/questions/9830186/hide-address-bar-in-mobile-safari-when-scrolling-touchoverflow

    Hope that helps a little.