Skip to main content

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="stylesheet" href="dup.css" />
  </head>
  <body>
<p><a href=&quo…

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 prefetchIf 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 seeOnce 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-cache="true" t…

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. This can be done by pressing CTRL+SHIFT+I in both…

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 smallerOptional to use the "page" data-role element in the codeCan turn off Ajax Navigation between pages using data-ajax="false"Recommend to use the <title> tag for page titlesThe <title> tag always gets precedence during page loadsConsumes more bandwidth as each…

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> tagThe data-title attribute of the page containerThe 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 transition uses this attribute.For…

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" data-role="page" data-title="Mainpage…

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">
<linkrel="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="content">
        <p><a href="#…

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 recommended w…

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(1e1) 10    //1e1 is evaluated first
    >> parseInt('1e1') 1  
    >> parseFloat('…

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

>> typeof -Infinity
"number"  //this is th…

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

ExpressionValueRemarksparseInt("23")23parseInt(" 23")23Leading white space is droppedparseInt("-23")-23parseInt(23)23parseInt(023)19Radix 8 is usedparseInt(0x23)35Radix 16 is usedparseInt("23",4)11Radix 4 is usedparseInt("23",4.99)11Radix is always converted to int32parseInt("23",36)75Radix 36 is usedparseInt("z",36)35Radix 36 is usedparseInt("23",37)NaNMax Radix is 36parseInt("23",1)NaNMin Radix is 2parseInt("23",0)23Radix used is 10parseInt("23",-1)NaNMin Radix is 2parseInt("23",3)2Radix 3 can use only 0,1,2parseInt("023")19Radix defaults to 8parseInt("0x23")35Radix defaults to 16parseInt("023",5)13Radix used is 5parseI…

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 little extra careful while dealing with Falsy values.

ExpressionValueFalsy ValuesfalsefalseNaNfalseundefinedfalse0fa…

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.

ExpressionValueInfinityAnything beyond +/-1.7976931348623157e+308typeof Infinity"number"typeof NaN"number"typeof undefined"undefined"typeof null"object"Infinity + InfinityInfinityInfinity - InfinityNaN-Infinity + InfinityNaNInfinity / InfinityNaNInfinity * InfinityInfinityInfinity * 1InfinityInfinity / 1InfinityInfinity / 0InfinityInfinity * 0NaNInfinity - 1e308InfinityInfinity - 1e309NaN-Infinity + 1e308-Infinity-Infinity + 1e309NaNInfinity / 1e308Infinity1 * "a"NaN1 + NaNNaN1 * NaNNaNundefined + 1NaNundefined * 1NaNundefined + InfinityNaNundefined * InfinityNaNundefined + NaNNaNundefined * NaNNaNundefined + nullNaNundefined * nullNaN1 + null11 * null0null + null0null * null0Infinity + nullInfinityInfinity * nullNaNNaN + nullNaNNaN * nullNaN"" + Infinity"Infinity""&q…