jQuery Mobile Interview Questions And Answers

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.

jQuery Mobile currently only supports loading of single page documents via AJAX. To navigate to a multi page document you must disable ajax on the link by adding the data-ajax="false" attribute.

When you load the first page of a jQuery Mobile based site, then click a link or submit a form, AJAX is used to pull in the content of the requested page. Having both pages in the DOM is essential to enable the animated page transitions, but one downside of this approach is that the page title is always that of the first page, not the subsequent page you're viewing. To remedy this, jQuery Mobile automatically parses the title of the page pulled via AJAX and changes the title attribute of the parent document to match.

jQuery Mobile has no way to know when you have injected content into a page. To let jQuery Mobile know you have injected content that must be enhanced, you need to either make sure the plugins are called to enhance the new elements or trigger("create") on the parent container so you don't have to call each plugin manually.

To prevent jQuery Mobile form enhancing an element simply add data-role="none" to the element. Here is a select that is the normal, native element instead of the custom jQuery Mobile styled version that normally is seen:

To load an external page, enhance its content, and insert it into the DOM, use the loadPage method. There are a lot of methods and properties that you can set when loading pages, but here is a simple example:

.ui-table-reflow.ui-responsive {
display: table-row-group;
}

In order to avoid changing the default CSS from jquery mobile you can put this code in a separate style.css
.ui-table-reflow.ui-responsive
{
display: table !important;
}

$('div') : This creates a new div element. However this is not added to DOM tree unless you don't append it to any DOM element.

jQuery Mobile works on all popular smartphones and tablets.

Due to following advantages:

► Easy to use and learn.
► Easily expandable.
► Cross-browser support (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)
► Easy to use for DOM manipulation and traversal.
► Large pool of built in methods.
► AJAX Capabilities.
► Methods for changing or applying CSS, creating animations.
► Event detection and handling.
► Tons of plug-ins for all kind of needs.

JavaScript is a language While jQuery is a library built in the JavaScript language that helps to use the JavaScript language.

No. jQuery is not a replacement of JavaScript. jQuery is a different library which is written on top of JavaScript. jQuery is a lightweight JavaScript library that emphasizes interaction between JavaScript and HTML.

Client side scripting.

No. jQuery is not a W3C standard.

To start with jQuery, one need to make reference of it's library.

The starting point of jQuery code execution is $(document).ready() function which is executed when DOM is loaded.