Skip to main content

Posts

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

It pays to blog

" See one, Make one, Teach one! " - [video:  Charles McCathieNevile (Opera) , see @00:19:00] Working on a pet project, I stumbled upon jQuery Mobile a few months ago and have been hooked on to it since then. There were quite a few things that I learnt and few more things that I discovered. I started to blog a few posts on the topic and boy does it pay to blog! One morning I log on to my blog and find that the traffic had jumped by a few hundred page views within a single night. I used to have just a handful of daily visits earlier. Initial thought was that some bot had tried to wreck havoc on my blog. Eventually I found the true reason. My post on prefetching pages using jQuery Mobile , had been  retweeted by @jquerymobile . Traffic hasn't looked down since. Even today the number of pageviews on a daily basis, is tenfold more than the earlier days. Its been two months now. Within a week of this, I got an email by a leading international publisher asking if I were i

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"></script>

Using duplicate IDs in HTML

Well today I'm being a bit controversial. Let us see what the HTML5 spec says about unique IDs in a HTML file. The  id  attribute specifies its element's  unique identifier (ID) . The value must be unique amongst all the IDs in the element's  home subtree  and must contain at least one character. The value must not contain any  space characters . An element's  unique identifier  can be used for a variety of purposes, most notably as a way to link to specific parts of a document using fragment identifiers, as a way to target an element when scripting, and as a way to style a specific element from CSS. Yes its been mentioned almost everywhere on the planet that ID must be unique. Now let us look at the below code, Launch dup.css #p2 {   background-color: yellow;  } dup-id.html <!DOCTYPE html> <html>   <head>     <title>Duplicate ID Tester</title> <link rel="stylesheet" href="dup.css" />  

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 one of these