Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

ui-fixed-hidden not removed on no-op navigation #3938

Closed
johnbender opened this Issue · 3 comments

2 participants

@johnbender

http://jsbin.com/ezigob

In the example provided for issue #3768 you can force the fixed header into a position: absolute state with the following:

  1. open the jsbin
  2. click the foo button at the top
  3. click the body of the page
  4. scroll down
  5. note that the header stays above the page content
@johnbender johnbender was assigned
@johnbender

@scottjehl

This issue appears to be caused by the vclick handler in _bindToggleHandlers. I thought this might be an easy fix but I can't seem to figure out why that's there so I'll need your input.

https://github.com/jquery/jquery-mobile/blob/master/js/jquery.mobile.fixedToolbar.js#L253

@scottjehl

Hey John,

That line is the tap toggle for the toolbar visibility. Tapping the page (when the target is not in the list of prevented selectors) toggles the toolbar visibility.

I don't think this is actually a bug, but I agree it's confusing in this case.

Just to be sure: what is the purpose of the foo button? How does it relate to the issue?

Adding a footer to the demo page would make this behavior seem less confusing, but unless I am misunderstanding the report, what's happening here is a subtlety with the behavior of our fixed toolbars. I'll explain.

As you know, we have "fixed" and "fullscreen" toolbars. Fixed toolbars are the default behavior, and they can be toggled between fixed and static (actually, absolute) positioning, which often shows and hides them from the viewport, unless you're scrolled to an extreme of the page (top or bottom). In other words, when "hidden", a fixed header or footer simply changes from position:fixed to position: absolute;. Since it already had a top or bottom value of 0, that absolute positioning will send it to the top or bottom of the document, rather than the viewport. We do this because our default behavior is meant to always leave a "home" for the toolbars at the top and bottom of the page - fixed toolbars do not overlay on top of page content, instead the page itself is padded to accommodate their presence in document flow.

Fullscreen toolbars are the opposite - they sit on top of, and obscure page content. When they are hidden, they are positioned outside of the viewport, and are truly inaccessible to the user. They're meant for more immersive full-screen pages that don't scroll, like a video player or photo viewer.

So, in your demo, your tap on the body has hidden a fixed toolbar by sending it to the top of the document. Of course, since you're already there, it didn't hide the toolbar from sight. When you scroll the page, it'll stay there though.

Here's a demo with a footer so you can see how one hides and one doesn't, depending on your location.

http://jsbin.com/ezigob/2

Different issue that I am missing, or should we close this out?

Thanks!

@johnbender

Nope, we can close this. I actually did not know that there was a second, fullscreen option for the fixed headers and footers.

Color me embarrassed :(

@johnbender johnbender closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.