1. How to divide a page into parts using jQuery Mobile?
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.
3. Explain the features of jQuery Mobile?
► 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
4. Tell me an example usage of jQuery Mobile?
$('div').on('tap', function(event){
alert('You tapped an element');
});
5. What is jQuery Mobile Theming?
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.
6. How to keep the submit text from showing with jQuery Mobile?
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.
7. How does jQuery Mobile theming work?
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.
8. Why HTML 5 inputs look different across devices and browsers?
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.
9. Why are not some scripts and styles loading?
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.
10. Why is not DOM ready working for jQuery Mobile?
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.
11. Why is only the first page of multi page document loaded?
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.
12. How to control page titles in jQuery Mobile?
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.
13. Why content injected into a page is not enhanced?
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.
14. How to stop JQM from auto-enhancing an element?
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:
15. How to load a page using jQuery Mobile?
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:
$('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.
17. Where jQuery mobile works?
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.
19. Can you please explain the difference between JavaScript and jQuery?
JavaScript is a language While jQuery is a library built in the JavaScript language that helps to use the JavaScript language.
20. Explain is jQuery replacement of Java Script?
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.
21. Tell me is jQuery a library for client scripting or server scripting?
Client side scripting.
22. Tell me is jQuery a W3C standard?
No. jQuery is not a W3C standard.
23. Explain the basic need to start with jQuery?
To start with jQuery, one need to make reference of it's library.
24. Explain the starting point of code execution in jQuery?
The starting point of jQuery code execution is $(document).ready() function which is executed when DOM is loaded.
25. Tell me what does dollar sign ($) means in jQuery?
Dollar Sign is nothing but it's an alias for JQuery. Take a look at below jQuery code.
► $(document).ready(function(){});
Over here $ sign can be replaced with "jQuery" keyword.
► jQuery(document).ready(function(){});
