dev.chetankjain.net

Posts

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, every subsequent Ajax

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> <div id="page1" dat

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> <div data-role=&

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

autofocus to multiple controls in HTML5

The HTML5 spec says: There must not be more than one element in the document with the autofocus attribute specified. Excellent, so what happens if you set multiple elements with the autofocus attribute? And in various browsers? Results below ... Autofocus not supported: IE9 First Element gets the focus: IE 10 preview, FF The last element gets the focus: Chrome, Opera, Safari Though its up to the User Agents to implement the behavior, I prefer the Webkit implementation of this feature compared to that of Mozilla and Trident. Why? HTML5 says that browsers should gracefully degrade. They should try to render whatever possible. Not being strict that is. So if a browser stops with the first autofocus, one will never know if there were more than one autofocus elements in the document. But, if the browser renders and sets every autofocus as it parses the document, thus stopping at the last autofocus, the developer will immediately know something is a

Patent for a single shared profile service

I have faced this problem multiple times. And its damn frustrating. Yes, I'm talking about the ten different places my profile is or was on the web. Google, Google apps account, LinkedIn, Twitter, FB and heaven knows where else. Any change in status or the way I want my profile to be worded, I have to remember and go and update all these places. Its a pain in all the wrong places. Trust me. Then I thought, someone must be providing such a shared profile service. You update your profile just one place and then push it to all these various social networks and web sites. I searched. Found nothing. I searched hard, asked my friends about this. Nothing! Zilch!! There were a few websites, that were almost there, but not exactly what I wanted. Gravatar has this for one's avatar. So why not something for profiles? Nopes. Then I had an enlightenment! Why not build this service and provide to the users on the web. I had an even better idea, why not patent it. Provide such a wonde