Articles updates

About page

January 15, 2015: Live chat on freenode network. I’ll be waiting for you there! Check “About” page for more details.

Infinite scrolling

November 25, 2014: Fixed multiple firing of scrollstop in Safari iOS.

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

Content “div” Height – Fill Page Height – Pure CSS Solutions

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).

Continue reading

Starts With Instead of Contains Filter Text

The filterable widget provided by jQuery Mobile (jQM) allows the user to filter child elements by typing search text into a text box. The built-in behavior is to see if the search text is contained in any of the children elements’ text or a special data attribute called data-filtertext.  But what if you want the filter to only show elements that start with the typed in search text?

To accomplish this, we can override the default filtering by assigning the filterCalback property to a function. This function is then called for each child element with an index parameter and a second parameter for the search text the user typed. Within this function we can perform our own filter matching and return true if the child element should be filtered (hidden). So, lets build our Starts With Filter. 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

pagecontainerbeforechange – How to use it

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.

Continue reading