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

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

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

Custom Page Transitions (Part 2)

In Part 1 we used the Animate.css library of CSS animations as transitions for jQuery Mobile (jQM) pages, popups, and dialogs.  In Part 2, we will write our own KeyFrame animation CSS in order to have a unique/one-of-a-kind transition.

You will remember from last time, that to use a CSS transition with jQM, we create a class name for the transition and point that class at a named CSS animation. We can use different animations for the page entering, leaving, and the 2 reverse directions. An animation in CSS is created by defining a set of transforms at various points during the transition duration called keyFrames. Each KeyFrame’s time is defined as a percentage of the animation duration, so the simplest animations can be defined with only 2 KeyFrames: 0% – start transform, and 100% – end transform.  The browser is responsible for figuring out how to animate the transform values between the KeyFrames. 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

Odd-sized Thumbnails in Listview

jQuery Mobile (jQM) provides a listview widget that works well in most scenarios to provide a nice looking vertical list familiar to users of mobile devices.  If you include an image in the list item markup, jQM will automatically format it as an 80px by 80px thumbnail on the left side. If the provided image is smaller than 80×80 it sits at the top left corner; and if it is larger than 80×80 and not square it will also sit at the top left corner and either fill the width or the height but not both.

Continue reading

Content “div” Height – Fill Page Height

Click here for New CSS Solutions

When elements within data-role="content" (jQM 1.3) / role="main" + class="ui-content" (jQM 1.4) don’t fill the minimum height of page, the page’s background becomes visible, or the footer hangs in the middle of the page when it isn’t fixed.

Before

Short content div

The above snapshot illustrates the problem that many developers want to get rid of. Although content div has height set to 100%, it still doesn’t fill the available space in page div.

After

Full height

Continue reading