dev.chetankjain.net

Posts

Showing posts with the label javascript

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

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

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

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

Solutions: Object Oriented JavaScript: 3. Functions

Previous: Chapter 2: Primitives Chapter 3: Functions 1. Write a function that converts a hexadecimal color, for example blue "#0000FF", into its RGB representation "rgb(0,0,255)". Name your function getRGB() and this it with this code: var a = getRGB("#00FF00"); a; rgb(0,255,0) //Simple logic for getRgb() var getRGB = function f(hexColor) { var result = "rgb("; result += parseInt("0x"+hexColor[1]+hexColor[2]) + ", "; result += parseInt("0x"+hexColor[3]+hexColor[4]) + ", "; result += parseInt("0x"+hexColor[5]+hexColor[6]) + ")"; return result; } >> getRGB("#0000FF"); "rgb(0, 0, 255)" >> getRGB("#00FF00"); "rgb(0, 255, 0)" 2. What does each of these lines print in the console? >> parseInt(1...

Solutions: Object Oriented JavaScript: Chapter 2: Primitives

JavaScript experts can skip this. While reading the book, Object Oriented JavaScript by Stoyan Stefanov , I thought it would be a good idea to just solve the exercises presented in the book and store the solutions away. Takes me back to my school days when I was serious about learning stuff :) This will be a multi-part blog, with each blog entry solving exercises presented in one chapter of the book. The entire set of solutions will be eventually made available in my JavaScript site. So here goes ... Chapter 2: Primitive Data Types, Arrays, Loops and Conditions 1. What is the result of executing each of these lines in the console? Why? >> var a; typeof a; undefined // a has not been defined with any value >> var s = '1s'; s++; NaN // converting 1s to a number is ambiguous with addition >> !!"false" true // "false" is a valid string >> !!undefined false //undefined is a falsy >...

parseInt() galore

After the Falsy post, here is another interesting table listing various values as evaluated by parseInt() . Some are quirky indeed :) Free lunch to anyone who shows me another table that covers parseInt() in such detail :P Expression Value Remarks parseInt("23") 23 parseInt(" 23") 23 Leading white space is dropped parseInt("-23") -23 parseInt(23) 23 parseInt(023) 19 Radix 8 is used parseInt(0x23) 35 Radix 16 is used parseInt("23",4) 11 Radix 4 is used parseInt("23",4.99) 11 Radix is always converted to int32 parseInt("23",36) 75 Radix 36 is used parseInt("z",36) 35 Radix 36 is used parseInt("23",37) NaN Max Radix is 36 parseInt("23",1) NaN Min Radix is 2 parseInt("23",0) 23 Radix used is 10 parseInt("23",-1) NaN Min Radix is 2 parseInt("23",3) 2 Radix 3 can use only 0,1,2 parseInt("023") 19 Radix defaults to 8 parseInt("0x23") 35 Radix defaults to...

Falsy JavaScript

In continuation of my previous blog on the basic JavaScript expressions , this blog is about Falsy and Truthy values in JavaScript. When presented with a non boolean expression instead of a boolean value, JavaScript uses Truthy or Falsy values instead to determine the result. At first glance, this could be confusing and could lead to errors while scripting. var a = "someval"; var b; if (a) { // this is a truthy // Block is executed } if (b) { // b is undefined and so a falsy // Block is not executed } The Falsy Values All expressions, objects and values are Truthy by default. There are exceptions and they are called the Falsy values and are listed below: # The empty string; "" # null # undefined # The number 0 # NaN # The boolean false It gets tricky If you see the below table, you will note that it gets tricky or rather one should be a l...

JavaScript - Undefined Infinity or Not a Number?

Had a heated discussion with a friend about a particular expression and so this blog with ready references for some basic JavaScript expressions. Expression Value Infinity Anything beyond +/-1.7976931348623157e+308 typeof Infinity "number" typeof NaN "number" typeof undefined "undefined" typeof null "object" Infinity + Infinity Infinity Infinity - Infinity NaN -Infinity + Infinity NaN Infinity / Infinity NaN Infinity * Infinity Infinity Infinity * 1 Infinity Infinity / 1 Infinity Infinity / 0 Infinity Infinity * 0 NaN Infinity - 1e308 Infinity Infinity - 1e309 NaN -Infinity + 1e308 -Infinity -Infinity + 1e309 NaN Infinity / 1e308 Infinity 1 * "a" NaN 1 + NaN NaN 1 * NaN NaN undefined + 1 NaN undefined * 1 NaN undefined + Infinity NaN undefined * Infinity NaN undefined + NaN NaN undefined * NaN NaN undefined + null NaN undefined * null NaN 1 + null 1 1 * null 0 null + null 0 null * null 0 Infinity + null Infinity Infinity * null NaN NaN ...