code-diesel » javascript

Using the new Page visibility API in your apps

sameer — Thu, 19 Jan 2012 07:01:43 +0000

One of the features lacking in the current browser api is that of determining whether the web page is currently visible to the user or is hidden (either in another tab or window).

The new Page Visibility API allows you to do just that – determine whether your web page is visible to the user, is hidden in a background tab or window, or is prerendering. It allows the developer to use the page visibility state in JavaScript logic to make the user experience more friendly; for example, by stopping video, animation or slideshow playback whenever the user switches to another browser tab or window, and resuming whenever the user switches back. Also if your page is doing some ajax processing periodically, which consumes precious system resources, we can pause it when the page is not in focus. Other use can be in analytics, checking how long the page had been in actual user focus, rather then as a hidden tab or window.

Check the below demo page to see how this works. The demo was tested in Safari, Opera 11.10, Chrome and Firefox.

Notice how the video pauses whenever the page is hidden. Also check the title of the page as it switches state.

The api is quite simple in its design – whenever a web page visibility changes, the ‘visibilitychange’ event is fired. This event can then be registered using the addEventListener method.

Currently the Page Visibility API supports three visibility states:
‘visible’ : user has opened the page and is working within it.
‘hidden’ : user has switched to another tab or minimized browser window.
‘prerender’ : browser is just prerendering a page.

However the problem with the current api implementation is that different browsers have implemented the api specification a little differntly, which can make working with them a little tedious. So one option is to use a wrapper which hides the various browser differences. Visibility.js is one such wrapper which eases the usage of the api by hiding vendor-specific property prefixes and adding some high-level functions.

Below is the complete source for the above demo page. I’d not go into further details, as the respective pages have all the detailed documentation.

DOCTYPE html>
<html>
<head>
    <meta charset='UTF-8'>
    <title>title>
    <script src="lib/visibility.fallback.js">script>
    <script src="lib/visibility.js">script>
    <script src="swfobject.js">script>
head>
<body>
<h1>Visibility.js testh1>
<p>Page Visibility API <strong id="support">strong>.p>
<p>Switch browser tabs or window.p>
 
<div id="ytapiplayer">
You need Flash player 8+ and JavaScript enabled to view this video.
div>
 
<script type="text/javascript">
 
function onYouTubePlayerReady(playerId) {
  ytplayer = document.getElementById("myytplayer");
}
 
function play() {
    if (ytplayer) ytplayer.playVideo();
}
 
function pause() {
    if (ytplayer) ytplayer.pauseVideo();
}
 
var params = { allowScriptAccess: "always" };
var atts = { id: "myytplayer" };
swfobject.embedSWF("http://www.youtube.com/v/ylLzyHk54Z0?" +
                   "enablejsapi=1&playerapiid=ytplayer&version=3",
                   "ytapiplayer", "425", "356", "8", 
                   null, null, params, atts);
 
 
/* Make sure page visibility api is supported */                   
var support = document.getElementById('support');
if ( Visibility.isSupported() ) {
    support.innerHTML = 'is supported';
} else {
    support.innerHTML = 'isn’t supported';
}
 
 
document.title = Visibility.state();
 
/* Pause/Play video when the page changes state */
Visibility.change(function (e, state) {
    /* Also change the page title on state change */
    document.title = state;
    if(state == "visible")
        play();
    else
        pause();
});
 
 
script>
body>
html>

Generating clean URLs with javascript

sameer — Wed, 18 Jan 2012 08:43:55 +0000

In a recent project I needed to generate clean search urls on a form submit. There are basically two ways to do that. One is to post the search variables to the same page, and generate a clean url using PHP and then redirect it to the new url. The other way is to generate clean urls using JavaScript and immediately direct the page to the new url. This saves some processing on the server and one redirection, and also allows us to generate a url without a page refresh. I decided to go with the JavaScript solution.

A rough idea of the first option is given below.

if(isset($_GET['search'])) {
   $clean_url = '';
   // code to create a clean url. 
   // After that $clean_url will contain the new redirect url 
   header("Location: $clean_url");
   exit();
}
<form class="myForm" action="#" method="get">
    <input type="text" id="search" name="search" maxlength="100">
    <input id="submit" name="submit" type="submit" value="Search">
form>

The problem with the first option is that you cannot generate a clean url without refreshing the page. This can be problematic if your application requires you to generate clean urls without going back to the server (which entails a page refresh).

So for example if on form submission you have some ugly urls like the following.

http://mysite.com/search.php?keyword=blue+boxed+buttons

You can generate clean urls like the following on the client and then send it to the server.

http://mysite.com/search/blue-boxed-buttons

The basic search form is shown below.

<form class="myForm" action="#" method="get">
    <input type="text" id="search" name="search" maxlength="100">
    <input id="submit" name="submit" type="submit" value="Search">
</form>

Now the following code will handle the clean url generation on the above form submission. It will intercept the form submission, generate a clean url, and direct the page to the new url, all without a page refresh.

/* Friendly URL rewrite */
$("form").submit(function() {
    /* Remove unwanted characters, only accept alphanumeric and space */
    var keyword = $('#search').val().replace(/[^A-Za-z0-9 ]/g,'');
 
    /* Replace multi spaces with a single space */
    keyword = keyword.replace(/\s{2,}/g,' ');
 
    /* Replace space with a '-' symbol */
    keyword = keyword.replace(/\s/g, "-");
 
    var cleanUrl = 'http://mysite.com/search/' + keyword.toLowerCase();
    window.location = cleanUrl;
 
    return false;  // Prevent default button behaviour
});

Below is the Apache htaccess rule to go along with the above redirection. Our main search page is called ‘search.php’.

RewriteEngine on
RewriteBase /
RewriteRule ^search/([A-Za-z0-9-]+)/?$ search.php?keyword=$1 [NC,L]

Create a infinite scroll page using jQuery

sameer — Wed, 14 Dec 2011 09:54:56 +0000

Waypoints is a small jQuery plugin that makes it easy to execute a function whenever you scroll to a particular element – a ‘waypoint’. This can be used to highlight when a element comes into view, load additional html or throw a popup. In this post we will use it to create a infinite scroll page.

An infinite scroll page can be useful when you do not want to add pagination, but would rather load the content on the same page when the user requests.

Waypoints requires jQuery, so you need to add that to your page before initializing waypoints.

<script src="jquery-1.4.4.min.js">script>
<script src="waypoints.js">script>

The following is how you register an element as a waypoint. When the user scrolls past that element it triggers a waypoint.reached event, which you can then use to run your custom code.

For example if you have a footer element with the following structure, you can attach a function to be executed when that element comes in view.


    <div class="container">  
        <p>Footer text</p>
    </div>
</footer>

$(document).ready(function() {
	opts = {
		offset: '100%'
	};
 
        /* Execute the following when the footer comes in view */
	$('footer').waypoint(function(event, direction) {
		alert('You have scrolled to the end of the page.');
 
	}, opts);
});

In the above example we only displayed a alert dialog, but what we instead want is additional data to be appended to the existing content, giving us our infinite page. The following is a example code to create a infinite page by loading additional data from a php server page.

$(document).ready(function() {
	$footer = $('footer'),
	opts = {
		offset: '100%'
	};
 
        /* When the 'footer' element comes in view, 
           the following code is executed */
	$footer.waypoint(function(event, direction) {
		$footer.waypoint('remove');
                /* We get additional data from a php page and 
                   append the same to the end of the page. */
		$.get('more-data.php', function(data) {
			$('#main').append(data);
			$footer.waypoint(opts);
		});
	}, opts);
});

You can find additional options at the waypoints page.

Building Reactive web content

sameer — Wed, 12 Oct 2011 10:28:16 +0000

Reading is an active process. Weather you are reading a web page, a book or any other media, the information tends to generate ideas in the mind of the reader. An active reader asks questions, considers alternatives, questions assumptions and analyses the argument of the author. An active reader doesn’t passively store up information, but uses the author’s arguments to create a framework to further up his ideas and understanding.

As far as the content of the written page was concerned reading was a static thing; until the arrival of the electronic media. Take the following paragraph as an example.

When you eat 7 cookies, and a cookie contains on average 50 calories, you will consume around 350 calories.

So if on average you require 300 calories to survive daily, you are eating an excess of 50 calories.

This is a static text and before the web this was all you could get. But with interactivity easily achievable with JavaScript and other tools we could easily convert the above text content to a ‘Reactive Document’.

A Reactive Document allows the reader to play with the author’s assumptions and analysis, and see the consequences of any changes. Now take the above paragraph and convert it to a reactive format as given below. You can change the values of the underlined text by dragging them left or right.

Notice how the consequences of your adjustments are reflected in the above paragraph. The reader can explore alternative scenarios, understand the results of his actions, and come to a generally deeper understanding of the content.

Implementation

The Reactive Document was implemented using the Tangle library by Bret Victor. The idea is somewhat along the lines of Wolfram’s Computable Document Format (CDF).

Although technically it is a simple MVC implementation in JavaScript; conceptually it lets you add a interactive dimension to your web pages in a quick and easy manner.

Transform websites to mobile sites quickly

sameer — Tue, 16 Aug 2011 04:31:03 +0000

Mobilize.js allows web developers create mobile sites out of existing websites with little effort. It supports the following features:

Automatically detect mobile browsers.
Easy to integrate – no server side changes needed.
Open source – no expensive software or licenses needed.
Familiar HTML5, Javascript and JQuery Mobile tools used.
Supports iPhone, Android, Blackberry, Opera Mini and other browsers and devices.

If you have a WordPress site, plugins are available for the same. To see exactly how mobile.js works, check this section of the documentation.

Infinite Wall of images using Mootools

sameer — Sun, 17 Jul 2011 12:33:12 +0000

JavaScript Photo galleries are dime-a-dozen, with a large number of variations in size and features. But this particular one developed using Mootools is a breath of fresh air. Most galleries are spatially bounded, i.e. they have a limit how how much you can scroll in any direction.

The Wall – is a Photo Gallery which can cover your entire screen with images. It provides a spatially infinite plane to display images, video or other media. Imagine a infinite grid, in the cells of which you can put images. You can scroll the photos in any direction – vertical, horizontal, diagonal and reverse too. You can insert any number of images in the grid, which are repeated over the entire plane to give a illusion of an infinite wall.

Also, it’s not just for images, it also can hold videos and text and it can be used as an endless grid or also as the popular Coda Slider.

The plugin also provides many interesting variations on the basic theme as shown below.

Demos : http://wall.plasm.it/examples/
URL : http://wall.plasm.it/

Sharing data across windows using localStorage

sameer — Mon, 13 Jun 2011 07:28:39 +0000

One of a common requirement in some web applications is that of sending messages and data across windows (of the same origin). Doing this is not easy and requires the help of cookies and a bit of JavaScript. Now with HTML5 and its localStorage feature we can accomplish this quite easily.

Storage Events

Whenever a localStorage object is changed using the setItem(), removeItem(), or clear() functions, the storage event is fired (across multiple windows of the same origin) by the browser, we can trap this event and use it to share messages or data across windows. Check the following demo to see how this works in a simple case.

The above example works by using the storage event of the Window object. So whenever the localStorage object is modified, the storage event is fired and we use it to update the window content.

window.addEventListener("storage", displayStorageEvent, true);

Below is the skeleton code for the demo example.

// Input element
var data = document.getElementById('data');
// Element to display the updated data
var output = document.getElementById('event-data');
 
function displayStorageEvent(e) {
    if (e.key == 'storage-event') {
        output.innerHTML = e.newValue;
    }
}
 
function updateStorageEvent() {
    localStorage.setItem('storage-event', this.value);
}
 
window.addEventListener("storage", displayStorageEvent, true);
data.addEventListener("keyup", updateStorageEvent, true);

Sharing messages

Although in the above example we are sharing data across windows, we can use the same mechanism to share messages. In the above example we are using the ‘storage-event’ key to store the data we type in the input box. Instead we can pass a simple message. The syntax remains the same, only the semantics changes.

/* Store the 'checkPassword' message in the 'app.message.auth' key */
localStorage.setItem('app.message.auth', "checkPassword");
 
/* Store the 'dataSave' message in the 'app.message.status' key */
localStorage.setItem('app.message.status', "dataSave");

Security concerns

As the communication can only happen between windows with the same origin, there is little risk of data leak between sites. Still you should refrain from storing sensitive information in the storage.

Possible applications

Now that we have seen a simple proof of concept of ‘cross window messaging and data sharing’, what are the potential use cases of the same. An idea without a concrete and useful application is useless. Although many people will have good ideas for the above concept, I presently lack one. So if you can think of some nice use cases for this, please voice your ideas in the comments section.

Adding HTML5 Geolocation to your web applications

sameer — Fri, 13 May 2011 06:09:21 +0000

One of the interesting and useful addition to the HTML5 specification is the Geolocation API. The Geolocation API allows users to share their location with web applications so that they can enjoy the benefits of various location-aware services.

Geolocation enables you as a developer or website owner to figure out where a particular user is located on the planet. This can be helpful in various web applications; for example in social networking, where you can find out where your various friends are currently located or in advertising where you can display targeted ads based on the users location.

Getting your users location

In the past, IP based geolocation was the only way to get a users possible location. Services and databases such as MaxMind or ip2location where used to locate the position of the user, based on the users IP address.

Now that Geolocation is available as a built-in API service in HTML5, it makes easier for developers to quickly integrate location based services into their applications.

Detecting Geolocation support

Before you write any Geolocation code you need to check if it is supported on your browser. The simplest way to detect if Geolocation is supported is to use the global ‘navigator’ object.

if(navigator.geolocation) {
    // Geolocation supported. Do something here.
}

Reading users location

Once we have checked that Geolocation is supported we can use the following to get the users location data.

navigator.geolocation.getCurrentPosition(success_handler, error_handler);

This will execute the callback function ‘success_handler’ if the request is successful or the ‘error_handler’ callback if some error occurs. The location data is available as a ‘position’ object in the ‘success_handler’.

function success_handler(position) {
        latitude = position.coords.latitude;
        longitude = position.coords.longitude;
        accuracy = position.coords.accuracy;
    }

Below is a list of all properties available:

Property	Data Type	Unit
coords.latitude	double	decimal degrees
coords.longitude	double	decimal degrees
coords.altitude	meters	decimal degrees
coords.accuracy	double	meters
coords.altitudeAccuracy	double or null	meters
coords.heading	double or null	degrees
coords.speed	double or null	meters/second
timestamp	DOMTimeStamp	Date() object

User privacy

When you opened the demo web page given above you may have received a notification bar like the following; this bar requests your permission to share your location with the browser.

The HTML5 Geolocation specification mandates that before any location data can be retrieved the browser first request permission from the user to share its location. Only when the user allows does the browser retrieves the users location.

Note: If opted to ‘always share’ or ‘always deny’ in Firefox and later change your mind, you can easily revert permissions by going back to the website and selecting ‘Tools’ menu->’Page Info’ in Firefox. Then change the setting for ‘Share Location’ on the Permissions tab.

How does Geolocation work

Once you give permission to the browser to share your location, the browser gathers information about nearby access points and also your computer’s IP address which the browser then sends to the default geolocation service provider – Google Location Services in case of Firefox, to get an estimate of your location. This location estimate is then sent to the requesting website.

Location accuracy

You may have noticed above that the ‘position’ object returns a accuracy variable. accuracy represents a value in meters which specifies how close the latitude and longitude values are to the actual location. You can increase the location accuracy by passing a option to the getCurrentPosition function. Bear in mind that this is only a hint that you give to the browser; whether it returns a high accuracy result depends on the location service your browser uses.

navigator.geolocation.getCurrentPosition(
                                    success_handler, 
                                    error_handler, 
                                    {enableHighAccuracy:true});

Saving location to Cookies

Once we get the location data from the user it is better to store it for the entire session so we can use it on other pages. Storing it in cookies is one quick option. For this example I’ve used the jQuery cookie plugin, which provides a simple and clean way to save and retrieve cookies.

We can store the cookies in the ‘success_handler’ and then later check the same before issuing another location request.

function success_handler(position) {
        /* Get the location data */
        latitude = position.coords.latitude;
        longitude = position.coords.longitude;
        accuracy = position.coords.accuracy;
 
        $.cookie("posLat", latitude);
        $.cookie("posLon", longitude);
        $.cookie("posAccuracy", accuracy);
    }

Now that we have nicely saved the data, all the other site pages can now access the location data by reading them from the cookies.

/* Check if location data is available in the cookies */
if($.cookie("posLat")) {
    latitude  = $.cookie("posLat");
    longitude = $.cookie("posLon");
    accuracy  = $.cookie("posAccuracy");
 
    // do something here
}

Continuous Position Updates

In the above example the location was read once and stored for future use. But what if your application is on a mobile device and you are on the move. The Geolocation API provides another function navigator.geolocation.watchPosition that automatically retrieves the users current location if it ever changes. The function is similar to ‘getCurrentPosition’, the only difference is that it regularly polls the location and returns the new location data.

var watch_id = navigator.geolocation.watchPosition(
                                        success_handler, 
                                        error_handler
                                        );

The function return a unique numeric id which you can later use to stop the polling.

navigator.geolocation.clearWatch(watch_id);

Drawing Trees in Canvas

sameer — Sun, 23 Jan 2011 12:27:57 +0000

Lately I’ve been experimenting with the new HTML5 Canvas element, and the best way to learn some new technology is to create something in it. For some time I’ve been dabbling in Processing and thought of porting some algorithms there in Canvas.
Rather than jumping into animation it was better to play around with static structures. I’ve a soft spot for visualizations so I decided to port some algorithms for creating recursive tree structures.

Download

Before to go further you can view the demo and also download the code. The demos will only run in browses that support the Canvas element.

VIEW DEMO

Download Source
Downloads : 616 / File size : 6.8 kB

Drawing a tree

The simplest way to draw a tree is with the following code. This will render the tree with the default options.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Trees in Canvastitle>
<script type='text/javascript' src='algoTree.js'>script>
head>
<body>
<canvas id="canvas">canvas>
<script type="application/javascript">
var height = 500, width = 400;
var canvas = document.getElementById('canvas');
canvas.height = height;
canvas.width = width;
ctx = canvas.getContext("2d");
tree.draw(ctx,height,width);
 script> 
body>
html>

Below are a few generated samples.

Usage

The ‘algoTree.js’ exposes a single method, tree.draw, that accepts six parameters as given below.

tree.draw(ctx, height, width, spread, show leaves, leaves type);

‘ctx’ is the canvas context.
‘height/width’ is the canvas height and width.
‘spread’ takes a number between 0.3 – 0.9 and adjusts the size of the tree.
‘show leaves’ takes a boolean value and displays the leaves if set to true.
‘leaves type’ takes one of the following four parameters-
tree.SMALL_LEAVES
tree.MEDIUM_LEAVES
tree.BIG_LEAVES
tree.THIN_LEAVES

By default the trees are drawn with leaves but you can draw bare skeletal tree by passing the boolean value ‘false’ as the fourth parameter in the tree.draw method.

Introducing HTML5 Web Workers

sameer — Sun, 16 Jan 2011 05:44:22 +0000

One of the interesting and useful additions to the HTML5 standards is the support for Web Workers. Web Workers will help you design more responsive web applications then otherwise possible in the past.

What are Web Workers

Web Workers are basically a API specification that lets you create background JavaScript threads to process CPU intensive tasks. Normally in browsers a single thread is created to handle all the JavaScript code. So whatever JavaScript code is run in the browser is executed in that single thread; whether you are doing some calculation or updating page elements. The downside of this is that some CPU intensive piece of JavaScript can render the page unresponsive or slow it to a crawl.

Web Workers alleviate this problem by letting you create multiple JavaScript threads that will run independent of each other, this will prevent one CPU intensive piece of JavaScript from interfering with the UI code.

Checking Web Worker support

Before you create any Web Worker related code you will need to find if your browser supports HTML5 Web Workers. Failure to do this will send your Web Workers to slog in Never Never Land. The following code will allow you to check if your browser supports Web Workers.

/* Check if Web Workers are supported */
function getWebWorkerSupport() {
    return (typeof(Worker) !== "undefined") ? true:false;
}

Creating a simple Worker

Once we have checked that Workers are supported in the browser we are ready to put them to task. In this example we will create a simple Web Worker that will ‘Add’ or ‘Multiply’ two numbers. The example is deliberately kept simple to keep the discussion focused on Worker details; in reality you would not use Workers for such simple things, but for more elaborate and CPU intensive tasks. Below is a small piece of JavaScript code that does the actual arithmetic calculation. This our Worker. It is stored in the ‘arithmetic.js’ file.

/* arithmetic.js */
 
function addNumbers(x,y) {
    return x + y;
}
 
function mulNumbers(x,y) {
    return x*y;
}
 
/* 
   Add a event listener to the worker, this will
   be called when the worker receives a message
   from the main page.
*/
this.onmessage = function (event) {
    var data = event.data;
 
    switch(data.op) {
        case 'mult':
        postMessage(mulNumbers(data.x, data.y));
        break;
        case 'add':
        postMessage(addNumbers(data.x, data.y));
        break;
        default:
        postMessage("Wrong operation specified");
    }
};

Now that we have or Worker file ready we need to call it from our main file.
The following line will create a new Worker thread and run the code stored in ‘arithmetic.js’.

/* Create a new worker */
    arithmeticWorker = new Worker("arithmetic.js");

Once we have created Workers we need to send and receive messages from them. For that we need to add a event handler to the main calling code.

/* 
   Add a event listener to the worker, this will
   be called whenever the worker posts any message.
*/
arithmeticWorker.onmessage = function (event) {
    document.getElementById("output").value = event.data;
};

Now whenever a Worker posts a message the ‘onmessage’ event is fired and the code within it is executed. The data passed by the Worker is stored in the event.data container. We have seen how to receive a message from the Worker but how to we post one. Posting a message to the Worker is very simple.

/* Message sent by the main page to the Worker. */
arithmeticWorker.postMessage('Main says...');

The message can be a simple variable or a JSON object. The same event management applies to the Worker file. Whenever the main page posts a message to the Worker the Worker can receive the message in a ‘onmessage’ event handler, at the same time the Worker can post a message to the main page with the ‘postMessage’ method.

/* Message sent by a Worker to the main page. */
postMessage('Worker says...');

We have already seen the Worker code. Below is the code for the main file.

DOCTYPE html>
<body>
<input type="text" id="x" value="2" />
<br />
<input type="text" id="y" value="3" />
<br />
<input type="text" id="output" />
<br />
<input type="button" id="multButton" value="Multiply" />
<input type="button" id="addButton" value="Add" />
 
<script>
 
/* Check if Web Workers are supported */
function getWebWorkerSupport() {
    return (typeof(Worker) !== "undefined") ? true:false;
}
 
 
if(getWebWorkerSupport() == true)
{
    var x,y,message;
 
    /* Create a new worker */
    arithmeticWorker = new Worker("arithmetic.js");
 
    /* 
       Add a event listener to the worker, this will
       be called when the worker posts a message.
    */
    arithmeticWorker.onmessage = function (event) {
         document.getElementById("output").value = event.data;
    };
 
    /* Register events for buttons */
    document.getElementById("multButton").onclick = function() {
        /* Get the values to do operation on */
        x = parseFloat(document.getElementById("x").value);
        y = parseFloat(document.getElementById("y").value);
        message = {
            'op' : 'mult',
            'x'  : x,
            'y'  : y
        };
        arithmeticWorker.postMessage(message);
    }
 
    document.getElementById("addButton").onclick = function() {
        /* Get the values to do operation on */
        x = parseFloat(document.getElementById("x").value);
        y = parseFloat(document.getElementById("y").value);
        message = {
            'op' : 'add',
            'x'  : x,
            'y'  : y
        };
 
        arithmeticWorker.postMessage(message);
    }
}
script>
body>
html>

Terminating Web Workers

Once the main page starts a Worker thread, the thread doesn’t terminate by itself. The calling page has to explicitly ask the Worker to terminate. This may become necessary because creating each new Worker consumes precious browser resources, which you will need to reclaim once the Workers task is no longer required.

/* Terminate the Worker */
arithmeticWorker.terminate();

Workers and DOM accessibility

Due to the threading nature of Workers they do not have access to the following JavaScript objects.

* The DOM (it’s not thread-safe)
* The window object
* The document object
* The parent object

VIEW DEMO