Assuming that you want to redirect user to a certain page on start-up based on a condition. If a user navigates directly to a page which has no access to, or without verifying “Login Credentials“. Using
mobileinit event, you can manipulate DOM or redirect user by changing URL
When jQuery Mobile’s framework is initialized, it looks for first div with
body and makes it the homepage. If there is no div with that attribute, it wraps
body‘s content in
data-role="page" div. Therefore, before user is redirected, jQuery Mobile’s framework auto-initializing should be disabled
Yet another use of
pagecontainerbeforechange; it is
popstate all in one event! Whether browser’s back button or
$.mobile.back() is used,
pagecontainerbeforechange is what you need.
If you prefer a cross-browser and responsive CSS solution to fill available height of page, here are some tips.
Note: use this solution for specific pages, otherwise, scrolling will malfunction if content’s height is greater than viewport’s height. Because the solution sets page height to 100% which stop page from scrolling.
There are three different solutions; full-screen, non-fixed toolbars and fixed toolbars. Each solution utilizes different CSS property(s).
January 15, 2015: Live chat on freenode network. I’ll be waiting for you there! Check “About” page for more details.
November 25, 2014: Fixed multiple firing of
scrollstop in Safari iOS.
Update: Thanks to Brian for reporting an issue of multiple firing in Safari iOS. I have fixed this by removing the
scrollstop listener when page bottom is reached and re-attaching it after loading more elements.
I have to admit that I just figured out the proper way to use
pagecontainerbeforechange; previously known as
pagebeforechange. Before I explain how to utilize this event, let me tell why it is important and handy.
This is a follow-up post on the main one where I will explain some special events that fire when loading external pages via Ajax. Those events are also part of “Page Container” widget, however, they are emitted when an external page (URL) is loaded either by anchor
href="link.html" statically, loading a page without navigating to it
$.mobile.pageContainer.pagecontainer("load", "URL") or when moving to an external page programmatically