Redirect on Start-up

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 window.location.href.

When jQuery Mobile’s framework is initialized, it looks for first div with data-role="page" in 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 autoInitializePage.

Continue reading

How to detect back navigation

Yet another use of pagecontainerbeforechange; it is navigate, hashchange and popstate all in one event! Whether browser’s back button or $.mobile.back() is used, pagecontainerbeforechange is what you need.

Continue reading

Infinite Scrolling – Do It Yourself!

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.

There are many handy third party plugins to handle infinite scrolling. They are meant to make your webapp lighter as not to load all contents at once. However, loading extra JavaScript libraries would affect the performance of a webapp negatively. Not to mention the bugs you might encounter or poor documentation. I never thought of creating such a tutorial of how to create your own infinite scroll until I found this post. I would like to also thank Mark for recommending my solution to be included in jQuery Mobile demo section.

Continue reading

Reside-Menu for jQuery Mobile – Part 2

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.

Continue reading

Content “div” Height – Fill Page Height–Part 2

Omar has written a great article already on using JavaScript to size the jQM content DIV to fill the given device’s height; however there is one use case this does not cover. A user might want the footer to be visible and fixed  at the bottom of the page anytime the content of the page is shorter than the vertical space available, but once the content is long enough, the user might then want the footer to be “pushed” down so it appears below the content when the page is scrolled.

The part 1 article makes it so that the footer is always visible at the bottom of the page and the content div is scrolled. If instead we use a plain footer with no JavaScript and without the data-position fixed, the footer appears below the content, but if the content is less than the vertical space available, the footer appears in the middle of the page:

floatingFooter

Using 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:

fixedFooter
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

Make Listview Dividers Collapsible

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

Filterable Opens Matching Collapsibles

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