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

Popup with “Blurred Background”

Note: blur filter is not supported by latest versions of IE and FF (source).

Here is a simple effect to “spice up” your webapp whenever a Popup is open. This effect will add “Depth of Field” to current page.

Blurred background

Depth of Field (DOF)

Continue reading

Custom Page Transitions (part 1)

The jQuery Mobile (jQM) framework includes a set of CSS-based transition effects that can be applied to any page link that uses Ajax navigation. jQM also provides CSS hooks so that developers can easily include custom CSS transitions.

In this post we will look at using animations found in the popular animate.css library as jQM page transitions, and in part 2, we will develop a custom 3d transition from scratch.

Continue reading