Archive for the 'JavaScript' Category

Create a pop-up lightbox upon body onload

This is an example that shows a lightbox effect upon the body onLoad event. There are three JavaScript functions here which you can call to show the lightbox, which are pop_up_light_box(), pop_up_light_box_with_delay(secs) and pop_up_light_box_for_ie_only(secs). As their names imply, the first one shows a lightbox effect, second one shows a lightbox effect with specified number of seconds of delay; while the 3rd one shows a lightbox for IE browser only.

Continue reading ‘Create a pop-up lightbox upon body onload’

Use HTML5 Canvas to draw and manipulate images

One of the goodies in HTML5 is it allows you to use the <canvas></canvas> tag pair to draw or manipulate images on it. But not all browsers support the HTML5 Canvas. To have a canvas displayed on your browser, you can simply have the following HTML code.

Continue reading ‘Use HTML5 Canvas to draw and manipulate images’

HTML5 allows you to store data on your local web browser

If you remember Google Gears, there was a feature (Local Database API) allowing to store data on your local web browser. But since HTML5 has emerged into supporting such a feature, Google has decided to retire its Google Gears.

Continue reading ‘HTML5 allows you to store data on your local web browser’

How to print web page without prompt using JavaScript on Firefox

To print a web or HTML page without getting the usual printer prompt on your Firefox browser, you can make use of the Firefox plugin, JS Print Setup. Installation like usual installation of any Firefox plugins.

Continue reading ‘How to print web page without prompt using JavaScript on Firefox’

ZooTool – visual bookmarking tool by MooTool(s)


ZooTool is an interactive and beautiful visual bookmark tool for images, links, videos and documents. The ZooTool was developed based on the MooTools by Bastian Allgeier.

Continue reading ‘ZooTool – visual bookmarking tool by MooTool(s)’

How to develop desktop-like web applications ?

Uki is a JavaScript library that allows you to develop web applications to have the look and feel and interactiveness of a desktop application. You can get Uki from Ukijs.org.

Continue reading ‘How to develop desktop-like web applications ?’

Google Chart API example : Display data on chart made easy

The Google Chart API provides an easy way to generate a chart dynamically by sending a simple URL to Google Chart service as follows:

http://chart.apis.google.com/chart?cht=p3&chd=t:60,40&chs=250×100&chl=Hello|World

And Google Chart returns you an image of the chart. As shown the above you just need to pass the Google Chart with three parameters, which are cht (Chart Type), chd (The percentage distribution of your data on Chart), chs (Chart size), and the chl (Chart Label)

Continue reading ‘Google Chart API example : Display data on chart made easy’

Google Gears Geolocation API, example displays your location on Google Map

The Google Gears Geolocation API allows you to display your current position data by obtaining it from your WiFi antenna. The Google Gears Geolocation API is able to obtain the exact location of the user’s current location, in terms of latitude, longitude and even the address etc. User browsers such as Internet Explorer, Firefox must have Google Gears installed excepts Google Chrome, in order to have the Google Gears API to work on your browser.

Continue reading ‘Google Gears Geolocation API, example displays your location on Google Map’

Bookmarked: 70 useful ajax and javascript techniques

SmashingMagazine has published 70 useful ajax and javascript techniques, it’s a handy resource that I shall explore one by one later. There are many cool animated calendars, timelines, menus, tool tips, sliders built using ajax and javascript techniques.

Sorting data made easy using JavaScript table sorter

javascript-table-sorter
If you’re asked to build a PHP script that pumps out some data from the database and presents in an HTML table to the users. And on the first row of the table, shows the titles of each field (As pictured above). Once the user clicks on each title the data in the column need to be sorted. If you implement this in a server-side scripting such as PHP, it’ll then need to send the request back to the server to get the server-side PHP script to sort the data by changing the “ORDER BY” in an SQL statement.

Continue reading ‘Sorting data made easy using JavaScript table sorter’