jQuery Mobile Interview Preparation Guide

Pages normally don't have a fixed height.

If you set a page or some element on a page to a fixed height using CSS, then you can size things in terms of %.

You'll need to use a bit of Javascript to set the page height.

Here's one way to get the device height:

var viewportHeight = document.documentElement.clientHeight;

Here's another (that I haven't tried, but should work) because jQuery Mobile sets the device height as min-height CSS for the page. (And assuming you already have a $page variable with the page.)

var viewportHeight = parseFloat($page.css('min-height'));

Then, you can:

$page.height(viewportHeight + 'px');

jQuery Mobile is a touch-optimized web framework (additionally known as a JavaScript library or a mobile framework) currently being developed by the jQuery project team. The development focuses on creating a framework compatible with a wide variety of smartphones and tablet computers, made necessary by the growing but heterogeneous tablet and smartphone market. The jQuery Mobile framework is compatible with other mobile app frameworks and platforms such as PhoneGap, Worklight and more.

► Compatible with all major mobile platforms as well as all major desktop browsers, including iOS, Android, Blackberry, WebOS, Symbian, Windows Phone, and more.
► Built on top of jQuery core so it has a minimal learning curve for people already familiar with jQuery syntax.
► Theming framework that allows creation of custom themes.
► Limited dependencies and lightweight to optimize speed.
► The same underlying codebase will automatically scale to any screen
► HTML5-driven configuration for laying out pages with minimal scripting
► Ajax-powered navigation with animated page transitions that provides ability to clean URLs through pushState.
► UI widgets that are touch-optimized and platform-agnostic

$('div').on('tap', function(event){
alert('You tapped an element');
});

jQuery Mobile provides a powerful theming framework that allows developers to customize color schemes and certain CSS aspects of UI features. Developers can use the jQuery Mobile ThemeRoller application to customize these appearances and create highly branded experiences. After developing a theme in the ThemeRoller application, programmers can download a custom CSS file and include it in their project to use their custom theme.

Suppose we are working on a website that has a submit button and forms and such. On this website we using jQuery Mobile, but to keep its stylesheet from interfering we using some jQuery.

jQuery Mobile is doing a weird thing where it is printing the value of the button, in this case "Submit", to the page, even though under it there is a button under it that says "Submit" and actually works.

The jQuery Mobile theme system separates color and texture from structural styles that define things like padding and dimensions. This allows theme colors and textures to be defined once in the stylesheet and to be mixed, matched, and combined to achieve a wide range of visual effects.

jQuery Mobile does not have control over the the UI for most of the newer HTML5 input elements like date, color and number. The keyboards and pickers provided are browser-dependent but will safely fall back to a standard input if it's not supported. We do apply basic border and color styles to inputs for these elements so there is some visual consistency.

jQuery Mobile's AJAX navigation system only loads in the contents of the page wrapper, the scripts and styles in the head are discarded so you need to plan how to load and organize these assets.

One of the first things people learn in jQuery is to use the $(document).ready() function for executing DOM-specific code as soon as the DOM is ready (which often occurs long before the onload event). However, in jQuery Mobile site and apps, pages are requested and injected into the same DOM as the user navigates, so the DOM ready event is not as useful, as it only executes for the first page. To execute code whenever a new page is loaded and created in jQuery Mobile, you can bind to the pageinit event.