Skip to main content

Posts

Showing posts with the label navigation

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 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 links happens …