dev.chetankjain.net

Posts

Showing posts with the label html5

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"...

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="stylesh...

Minimal required code in HTML5

I've encountered this question repeatedly of late. "What are the tags required at bare minimum for a html file?" Earlier there were a bunch of mandatory tags that were required for any html file. At bare minimum, the recommended structure was: (ref: http://www.w3.org/TR/html4/struct/global.html ) <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <HTML> <HEAD> <TITLE>A small HTML</TITLE> </HEAD> <BODY> <P>Small HTML file!</P> </BODY> </HTML> Yes, using capitals for the tags was the way to go! Those were the days of the purists and strict was the way to be. Now open your notepad and copy the above code, save the file as old.html and launch it in Chrome or Firefox. You will see only one line "Small HTML file!" shown. Now launch the developer tools in Chrome or Inspect Element in Firefox. Thi...

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...

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 im...

Developing for Android: HTML5 and Qt

Recently read a post by my friend and ex-collegue Sai Geetha on her very famous Android blog . I am now reading her blog to start learning a bit about Android development. In her most recent post, she has listed 4 ways for developing in Android. 1. Using the Software Development Kit (SDK) with Java 2. Native Development Kit using C / C ++. 3. RenderScript using C99 - used to write faster graphics code like the Google Books page turn animation etc. 4. Android Scripting Layer using Python etc. Just thought I'll extend the above further and add a couple of thoughts to this list... The trend now and what is gaining a lot of traction is developing cross platform apps. So you develop once and can deploy it on multiple platforms. Java showed this promise earlier, but is slowly making way for the newer and greater things out there. One should see how the recently released Java7 will perform. And Java is still the greatest thing for Android development today. Java is also the reco...