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.
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.
In my previous article regarding “Reside-Menu”, I have explained how to create it but I haven’t explained how to properly use it in navigating between pages. The trick is simple and can be achieved in many ways.
data-position=”fixed” on the footer stops the footer from appearing in the middle of the page, but prevents it from being “pushed” down with longer content:
The trick to make this work is to use the same calculation from the original article to get the available space of the content, but instead of setting the height of the content DIV, we set the CSS min-height attribute. Continue reading
The listview widget in the jQuery Mobile (jQM) library allows for divider listitems which can be inserted manually or for sorted lists even be created automatically by the library. The dividers organize larger sets of listitems into smaller groups making it easier for the user to view the desired information. In this article I will implement a small trick that uses clicks/taps on the divider items to collapse expand the listitems in the divider group. This works particularly well for autodivider lists saving you the need to manually create collapsible widgets with separate contained lists.
For the example I will use a longish list of names with autodividers enabled. The markup for the list looks like this: Continue reading
The jQuery Mobile (jQM) library includes a filterable widget which can be applied to any container element by setting
data-filer=”true”. The user can then start typing in the search input box and any child elements with matching text are shown while the rest are hidden from view. The widget also provides a callback for after the filtering is complete, and in this article we shall exploit this callback to make matching collapsibles expand instead of hiding non-matching elements.
As of jQM version 1.4, we can provide the search box markup and associate its ID with the filterable widget. Because the widget will be expanding and collapsing a list of collapsibles, I have decided to provide buttons for ‘expand all’ and ‘collapse all’ as a convenience to the user. The markup for the buttons and search box looks like this: Continue reading