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

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.

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.

jQuery Mobile “Page” Events – Extra

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 $.mobile.pageContainer.pagecontainer("change", "URL").