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

Advertisements

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

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

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

Continue reading

Chained Popups With SimpleDialog2

The jQuery Mobile (jQM) library includes a great popup widget, which can be used for tooltips, context menus, modal forms, lightboxes, etc. Unfortunately, as of version 1.4, the jQM popup still does not support chaining (having one popup on top of another). The API Documentation makes this statement:

The framework does not currently support chaining of popups so it’s not possible to embed a link from one popup to another popup. All links with a data-rel="popup" inside a popup will not do anything at all.

Imagine you have a use case where the user clicks a button to launch a popup form. On that form the user must select at least one checkbox. If the user clicks OK and no checkboxes are selected, the applications should launch a new popup warning the user that no checkboxes are selected. The user clicks OK on this second popup, which returns focus to the first popup where the user can either select a checkbox or click cancel to dismiss the popup.

Because the built-in popup widget does not support this, we can use a third party plugin. Fortunately, J. T. Sage has developed the SimpleDialog2 popup jQuery Mobile plugin, which is highly flexible and customizable. To include this plugin in your page, download the files and then add the SimpleDialog2 CSS file after the jQM CSS file(s), and add the SimpleDialog2 JavaScript file after the jQM JavaScript file. With the plugin in place, let’s build an example for the use case described earlier. Continue reading

Add Panel Dynamically

In compliance with DRY principle, jQuery Mobile 1.4 offers external toolbars, panels and popups to be accessed from any page. Unlike successor versions, each page should contain its’ own toolbars, panels and popups. However, those widgets should be initialized manually since they are placed outside pageContainer. Hence, upon framework initialization, they are untouched.

I would like to share some methods of adding external or internal panels dynamically. This can be done in many ways, depending on when you want to inject a panel or replace existing one.

Continue reading

jQuery Mobile “Page” Events – What, Why, Where, When & How?

More events: Page Container Load Events.

“Not bad” news: Two plugins that may be of help (Link)

Happy news: jQuery Mobile team is sparing a surprise for us on jQM 1.4.3 release! (Link)

We all know that jQuery-Core requires .ready() to initialize any code uses jQuery. However, it might malfunction when used in jQuery-Mobile, especially when Ajax is enabled. Why? .ready() fires once per document / file, where jQuery-Mobile’s Page Events fire continuously. I don’t want to go deeply into details and lengthy comparisons, let’s just focus on jQuery-Mobile’s Page Events.

Continue reading