dev.chetankjain.net

Posts

Showing posts with the label jquery mobile

2 new Page Transitions in jQuery Mobile v1.1

In my earlier post I had written a simple demo to show the various transitions that are available with jQuery Mobile. The official documentation v1.0.1 for page transitions is available here . But with jQuery Mobile v1.1, the official documentation has been updated and is much better compared to the older version. You will also see the page looks much simpler and showcases how the transitions would look for pages and also dialogs. Just click on the buttons and you can see the live demo. Excellent work on updating the documentation. Also very exciting to see that two new transitions have been added, the Turn and the Flow . So now we have a total of 8 transitions that are available by default. Pretty cool. Of course the brave can extend the framework and try to create their own custom transitions using CSS3 and JS.

TV apps using jQuery Mobile

The idiot box finally graduates to an internet box! Internet on TV is catching on quite fast. I've been reading reports that predict a billion(s) dollar market that will open up for TV apps. Ah the hype .. these things are always in billions. But anyways, considering the number of people who have a TV and the number who watch it (almost everyone?), I guess this could be quite realistic. Many advantages I guess, lesser strain on the eyes, no burnt laps and no lost fertility with laptops on top of laps. I'm online 100% of the time. Definitely I stand to gain. My 6 year old kid too. I'd rather have him play Angry birds and all those HD games on TV compared to him holding my super heated mobile and straining his eyes watching the small screen. So now that I've made my point beyond all doubt, it is agreed that TV apps is the next big thing! So where do I start? I do not have an Internet TV yet! Not to despair, one could install the recently launched Opera TV Emulator...

jQuery Mobile and Duplicated Page IDs

In the previous post , I touched upon how browsers safely handle duplicate IDs in a html file. Things seem to work fine for the three main uses of element IDs, i.e. linking to fragments, styling and referencing the element in javascript. The first element with matching ID is picked up and styling is done for all matches. Now let us extend this test to the jQuery Mobile framework. You can launch the below multi-page code here. Launch <!DOCTYPE html> <html> <head> <title>jQuery Mobile Duplicate IDs</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"...

jQuery Mobile Page Caching demo

In my previous post , I outlined how to prefetch links to make jQuery mobile app load your pages faster. The ui-loader spinning animation was not shown as you navigate from one page to another. Launch - The previous example with prefetch But, as also mentioned, it has certain limitations, If there are more pages, more http requests are sent out and more bandwidth is required to prefetch If a page hasn't been fully prefetched, the ui-loader spinner animation comes up till the page is fully loaded. Try to click fast and you will see Once you visit a prefetched page, navigating away from the page will remove the page from DOM. So this is not same as caching the page. The next visit to the page will again need the page to be fetched. So the obvious solution seems to be to cache the frequently visited pages in the DOM. This way, every link doesn't have to be prefetched on every visit to the page. This is easily done in jQuery Mobile by adding the attribute data-dom-cach...

jQuery Mobile Prefetching pages demo

Using a single-page template for your mobile app makes your app faster and lighter. But you have to fetch each page during navigation and you end up seeing the ui-loader spinning icon animation every time. It can get to your nerves. Launch - Example without prefetch The above example, from my previous post shows how the spinning icon comes up each time you navigate from the main page to page 2. I will not list the code here as its already listed in an earlier post . In a multi-page template whereas, the entire set of pages are already loaded into the DOM and the navigation is much faster. A similar behavior can be obtained in a single-page application by prefetching pages. This is done by just adding the attribute data-prefetch to all the links that you want to prefetch. As soon as the page loads, it starts fetching these links and loads it into the DOM. You can observe this behavior with the code inspector open (CTRL+SHIFT+I) in your browser. Now navigating to...

jQuery Mobile Page Transitions with data-ajax=false

In my earlier post here , I outlined the various page transitions that are available in jQuery Mobile. In single-page template documents, jQM uses Ajax to smoothly transition between pages and when not possible, the framework does a simple HTTP request to pull in the page. Situations where Ajax transitions are not used are: When a page loaded is: from an external domain data-ajax="false" attribute is used rel="external" is specified target attribute is specified This is also well documented (with examples) . In multi-page template documents, jQM needs Ajax to transition between the multiple page containers. Now lets play with this a bit. Let us try to override this with the data-ajax attribute and see what happens. Consider below code, you can click on the link below to launch it in a separate browser tab: Launch <!DOCTYPE html> <html> <head> <title>jQuery Mobile Transitions Demo with data-ajax="false...

jQuery Mobile single-page vs multi-page template

[Updated 2012/02/09] In my recent posts I mentioned about jQuery Mobile single-page and multi-page templates, so what exactly are the differences between them? Single Page Template: Launch - example from previous post, notice the address shown as you navigate Lighter and cleaner. Each page is a separate html file and more modular. Better fallback if JavaScript is not supported. So works well on more platforms, you could even target grade C browsers On first load, the start page is loaded into the DOM. An internal reference is always held to this. Any new page loaded is added to the DOM. Any previously shown page is removed from the DOM. The start page is always in the DOM. The DOM size is relatively smaller Optional to use the "page" data-role element in the code Can turn off Ajax Navigation between pages using data-ajax="false" Recommend to use the <title> tag for page titles The <title> tag always gets precedence during page loads ...

jQuery Mobile Recommendations for Page Title

In my previous two posts, I outlined how page titles are picked up in jQuery Mobile in a single-page and in a multi-page template scenario. Read them here: jQuery Mobile data-title behavior with multi-page template jQuery Mobile data-title behavior in single-page template Though its a very trivial thing, it is important that the right titles are shown on your pages as you navigate through your mobile HTML5 app. So we see that there are 3 options available to set the page title, The <title> tag The data-title attribute of the page container The header text in the header container Now the question is which one to use? And here are my recommendations, For the landing page for any app, use the <title> tag, that always is the primary one to use. The document.title gets populated first and use the same. For multi-page template, use data-title for every page container, including the first container in the document. After first load...

jQuery Mobile data-title behavior in single-page template

In my previous post , I had visited the behavior of the jQuery Mobile library data-title attribute under different scenarios when using a multi-page template. In this post, I will outline the behavior when using a single-page template. Consider the below single-page template code. Click here to launch the below code in a separate browser. Launch mainpage-title.html <!DOCTYPE html> <html> <head> <title>Main Page</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> </head> <body> ...

jQuery Mobile page transitions simple demo

jQuery Mobile has amazing Ajax page transitions available by default. This blog post gives a quick example to demonstrate the same. Click here to launch the below code in a separate browser. Launch <!DOCTYPE html> <html> <head> <title>Transitions Demo</title> <meta name="viewport" content="width=device-width, initial-scale=1"> < link rel = "stylesheet" href = "http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> <script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> </head> <body> <div id="page1" data-role="page"> <div data-role="header"> <h1>Pick your transition</h1> </div> ...

jQuery Mobile data-title behavior with multi-page template

The jQuery Mobile library comes with wonderful Ajax page transition capabilities. But you have to keep a look on the Page title as you navigate between the various pages and I have tried to document the behavior under different scenarios in this blog. Consider the below code, click the below link to launch the code in a separate window. Launch <!DOCTYPE html> <html> <head> <title>Main Page</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script> </head> <body> <div id="page1" data-role="page" data-title="p...