Google’s AJAX Maps API offers this look up for you free of cost (so long your needs are non-commercial). You can even use the latitude and longitude information returned by the API to plot the user’s location on a Google Map. Nifty eh? Let’s now look at a simple example – we will be detecting the user’s location based on his IP address and rendering it on a map.

Before we begin, you might want to check out the demo.

You will first need to obtain an AJAX Search API Key (it’s free, just sign up using your domain name, and you will be given a unique key, which is applicable for all pages hosted within your domain). Once you have that ready, fire up your favorite editor. We don’t need any server side code to be able to use the Maps API – so a plain HTML document is enough.

First, let’s place the “hooks” in the page, where the map and a caption will appear.

<div id="map"></div>
<div id="location"></div>

The Google AJAX API consists of a collection of individual APIs. By using a <script> tag in the head of the document, we will first load a single method, google.load, using which we can load any or all of the APIs we need individually.

<script type="text/javascript" src="http://www.google.com/jsapi?key=<em>YOUR_API_KEY</em>">
</script>

In our case, we just need the Maps API, so we do:

google.load("maps", "2", {callback: initialize});

The load function above takes the API name, its version and an optional callback function (which is called once the Maps API has finished loading) as parameters. In the init() function, we will first define a default location to be displayed on the map, in case the Maps API is not able to decode the IP address of the visitor. Since the Maps API basically matches the user’s IP address to a location, there might be instances when this mapping is not possible, and hence the need for a default.

var zoom = 4;
var latlng = new google.maps.LatLng(50, -10);
var location = "Showing default location for map.";

Next, we check if the client location was filled in by the API loader. If properly filled, the google.loader.ClientLocation object has the following properities:

• ClientLocation.latitude
• ClientLocation.longitude
• ClientLocation.address.city
• ClientLocation.address.country
• ClientLocation.address.country_code
• ClientLocation.address.region

Using this information, we can easily load a map, centred on the user’s location.

document.getElementById("location").innerHTML = location;		// location as text caption
var map = new google.maps.Map2(document.getElementById('map'));
map.setCenter(latlng, zoom);
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());

That’s it, see it in action. As I have already stated above, the client location information returned by this API is not perfect, as IP mapping can often be tricky, and might result in incorrect, or partially accurate information. While you should consider going for an enterprise ready solution for serious uses, I hope this API will be handy for your personal needs!

If you are looking to have a few printed, here are a range of catchy letterpress designs for inspiration. The idea of depth and an embossed logo add a completely new element, and could well be the best way to really make an impression.

View Example

View Example

View Example

View Example

View Example

View Example

View Example

View Example

View Example

View Example

View Example

View Example

View Example

View Example

View Example

View Example

View Example

View Example

View Example

View Example

View Example

View Example

View Example

View Example

View Example

View Example

View Example

View Example

View Example

View Example

View Example

View Example

View Example

View Example

View Example

View Example

View Example

This week, we want to show you some brilliant letterpress posters. Some of these are printed using handmade wooden reliefs, some using metal type, some even using photopolymer plates (the preferred medium for letterpress plates these days). Whichever medium is employed – all of them are most certainly breathtaking!

Letterpress posters

View Example

View Example

View Example

View Example

View Example

View Example

View Example

View Example

View Example

View Example

View Example

View Example

View Example

View Example

View Example

View Example

View Example

View Example

View Example

View Example

View Example

View Example

View Example

View Example

View Example

View Example

I hope you enjoy the collection. Stay tuned for more letterpress inspiration from us over the coming weeks!

Before we get started, feel free to check out the finished example.

As you might have already guessed, this will require some JavaScript magic, or more specifically jQuery vodoo. I am trying my best not to go into a rant on the wonderfulness of jQuery right now (I am sure you already knew that anyway!), so let me just say that it gets the job done, and easily.

So, here goes! As I got started on this, the first thing I did was to have a look at how best to implement the shaking or vibrating effect on the login form. I suspected that it might be part of the jQuery effects library, and yes, there was a shake() function, but I also stumbled on a nice plugin by Andreas Lagerkvist, which did just about the same thing. I chose the plugin approach as it was the lightweight way to go.

The actual implementation is pretty straightforward. We have a plain form, wrapped in a DIV which we will label as login.

<div id="login">	
	<h3>Buzzing Login form</h3>
	<form action="" method="post">
		<label for="username">Username:</label>
 
		<label for="pwd">Password:</label>
 
	</form>			
</div>

We next include the jQuery related JavaScript files in the head of the document.

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="vibrate.js"></script>

Using jQuery, we will then set-up an onclick event handler on the submit button . We will process the login form and take an appropriate action using this function.

$(document).ready(function() {
 
	$("#submit_butt").click( function() {
 
		// configurations for the buzzing effect. Be careful not to make it too annoying!
		var conf = {
				frequency: 5000,
				spread: 5,
				duration: 500
			};
 
		/* do your AJAX call and processing here...
			....
			....
		*/
 
		// this is the call we make when the AJAX callback function indicates a login failure 
		$("#login").vibrate(conf);
 
		// let's also display a notification
		if($("#errormsg").text() == "")
			$("#loginform").append('<p id="errormsg">Invalid username or password!</p>');
 
		// clear the fields to discourage brute forcing :)
 
		$("#username").val("");
		$("#pwd").val("");
 
	});
 
});

Define a set of configuration variables that define the nature of the buzzing effect. In case the login fails, just make a call to the vibrate() function using the configuration variables as parameter. A general word of caution – make sure you don’t have the buzzing effect in action for too long, as it might be irritating to the user if the form buzzes for a long time! I found a duration of 500ms comfortable. In addition, we also display a warning message to the user, and then proceed to clear the input fields.

And it’s as simple as that! You have a nifty login form ready.

On a final note, I have made a minor modification to Andreas’ original plugin to suit our application. The changes are documented on the code.

Try it out, and let us know how it works. If you get this implemented somewhere, do post up a link in the comments!

Security aside, one might also want to prevent users from misusing the upload facility, e.g. uploading copyrighted music files illegally and using the service to promote piracy! In this article, we’ll look into a few ways in which we can achieve this.

File type detection using extension and MIME types

I am not going to talk about this in too much detail as after all, this is what we normally do when we want to restrict certain files. We simply get the MIME type of the file using $_FILES['myFile']['type'] and check if it’s of a valid type.

Or we might scan the last few characters of the file name and reject files ending with a certain extension. Unfortunately, these methods are hardly sufficient, as one can easily change the extension of a file to bypass this restriction. Furthermore, MIME type information is given by the browser and most browsers, if not all, determine the mime type based upon the file’s extension! Hence MIME types can be pretty easily spoofed too.

Let’s now explore some others ways which offer better fool-proofness.

Using Magic Bytes

The best way to determine the file type is by examining the first few bytes of a file – referred to as “magic bytes”. Magic bytes are essentially signatures that vary in length between 2 to 40 bytes in the file headers, or at the end of a file. There are several hundred types of files, and quite a few of them have several file signatures associated with them. You can see a list of file signatures over here.

Although inconsistent, this is our best bet in detecting file types reliably. This seemingly difficult task has been made really easy by a PECL extension called Fileinfo. As of PHP 5.3, Fileinfo is shipped with the main distribution and is enabled by default, so this is definitely a robust and simple way to detect and impose restrictions on the types of files uploaded.

Let’s now see how we can detect a file type using Fileinfo:

$file = "/path/to/file";
 
// in PHP 4, we can do:
$fhandle = finfo_open(FILEINFO_MIME);
$mime_type = finfo_file($fhandle,$file); // e.g. gives "image/jpeg" 
 
// in PHP 5, we can do:
 
$file_info = new finfo(FILEINFO_MIME);	// object oriented approach!
$mime_type = $file_info->buffer(file_get_contents($file));  // e.g. gives "image/jpeg"
 
switch($mime_type) {
	case "image/jpeg":
		// your actions go here...
}

Handling image uploads

If you intend to allow only image uploads, then you can use the inbuilt getimagesize() function to ensure that the user is actually uploading a valid image file. This functions returns false, if the file is not a valid image file.

//  Let's assume that the name attribute of the file input field you have used is "myfile"
 
$tempFile =  $_FILES['myFile']['tmp_name'];  // path of the temp file created by PHP during upload
$imginfo_array = getimagesize($tempFile);   // returns a false if not a valid image file
 
if ($imginfo_array !== false) {
    $mime_type = $imginfo_array['mime'];
    switch($mime_type) { 
 
	case "image/jpeg":
		// your actions go here...
 
    }
}
else {
    echo "This is not a valid image file";
}

Reading and interpreting magic bytes manually

If for some reason, you are not able to install Fileinfo, then you can still manually determine the file type by reading the first few bytes of a file and comparing them with known magic bytes associated with the particular file type. This process definitely has an element of trial and error, because there is still a chance that there are a few undocumented magic bytes associated with legitimate file formats. As a result, valid files could be rejected by your system. However it’s not impossible as a couple of years back, I was asked to work on a script that allowed only genuine mp3 files to be uploaded, and since we could not use Fileinfo, we resorted to this manual scanning. It took me a while to account for some of the undocumented magic bytes for mp3, but pretty soon, I got a stable upload script running.

Before I end, I would just like to part with a general word of caution: Make sure that you never call an include() with a file that was uploaded, as PHP code can very well be hidden as part of the picture, and the picture would pass your tests for file validation just fine, only to cause havoc when executed by the server.

There is always a lesson or two to take away from these, and it could help you enter the New Year with a variety of new skills in your portfolio.

sIFR Lite

“Once upon a time some really good web developers created sIFR. Their goal was to seamlessly convert HTML headlines into nice fonts. Well, these developers did a great job getting it to work nicely. Looking at their code, I decided I would create a "lite" version of sIFR using a more object-oriented approach. sIFR Lite is a bit easier to read, and more intuitive to use.”

Visit site

DD_belatedPNG

Support for 24-bit PNG alpha-translucency background-image + background-position + background-repeat for IE 6 at last!

Visit site

The EqualHeights jQuery Plugin

“Creating equal-height columns with CSS is sometimes a bear. But who needs the hassle of faux columns, “clear” divs and the rest? With this bit of jQuery, you can easily equalize the heights of any group of elements.”

Visit site

jQuery.popeye – an inline lightbox alternative

“The plugin transforms an unoredered list of images into a box displaying only one preview image at a time. The box has controls to skim through the preview images and to enlarge a given image. The box expands to accomodate the enlarged version, while the controls are hidden in full image size mode. A simple click on the image returns the box to its compact state."

Visit site

DD_roundies

An easy way to implement round corners in IE.

“No 9-cell tables for one round box. No images. Doesn’t add a half-dozen or more HTML nodes to a container element (more like one, maximum of two, and only in IE).”

Visit site

Niceforms

“Niceforms is a script that will replace the most commonly used form elements with custom designed ones. You can either use the default theme that is provided or you can even develop your own look with minimal effort.”

Visit site

jQuery Corners 0.3

“This jQuery plugin will easily create beautifully rounded corners. No images or obtrusive markup necessary.”

Another round corner script for your benefit!

Visit site

Superfish jQuery menu plugin

“Superfish is an enhanced Suckerfish-style menu jQuery plugin that takes an existing pure CSS drop-down menu (so it degrades gracefully without JavaScript) and adds the following much-sought-after enhancements.”

Visit site

JavaScript Will Save Us All

Eric Meyer’s opinion on why we should look to JavaScript to extended standard support badly lacking in many browsers, instead of waiting for the browser vendors to implement them.

Visit site

CSS Sprites2 – It’s JavaScript Time

“A sense of movement is often the differentiator between Flash-heavy web sites and standards-based sites. Flash interfaces have always seemed more alive—responding to the user’s interactions in a dynamic way that standards-based web sites haven’t been able to replicate. Lately that’s been changing, of course, with a resurgence in dynamic interface effects, helped along by JavaScript libraries that make it easy—libraries such as Prototype, Scriptaculous, Moo, YUI, MochiKit (and I could go on). It’s high time to revisit the CSS Sprites technique from four years ago, and see if we can’t interject a little bit of movement of our own.”

Visit site

jParallax

“jParallax turns a selected element into a ‘window’, or viewport, and all its children into absolutely positioned layers that can be seen through the viewport. These layers move in response to the mouse, and, depending on their dimensions (and options for layer initialisation), they move by different amounts, in a parallaxy kind of way.”

Pure joy!

Visit site

Fixed Footers without JavaScript

A pure CSS technique to position fixed footers, tested down to IE 5.5.

Visit site

Dynamic Layout

“Dynamic Layout is a simple JavaScript library that allows you to easily adjust page layout based on the current browser width.”

Visit site

Stop using Ajax!

“Ajax is a sound and useful idea. But every idea comes down to a practical implementation – a technology that makes it happen – and in this case the technology is immature, because it leaves groups of users behind. Most notable and greatly affected are those using assistive technologies, but also those using less capable browsers that don’t support the necessary scripting objects, or don’t support scripting at all. ”

Visit site

This is how you get sIFR to work

“The goal of this tutorial is to distill the information at the official site for sIFR into a simple step-by-step process of how to implement sIFR on your site.

After following this tutorial you will have a basic understanding of how sIFR works and will be able to expand into more advanced areas.”

Visit site

FancyZoom

Smooth Javascript Image Zooming For Your Web Pages. 

Visit site

Rotating 3D cube in JavaScript

Nothing more, nothing less! Check it out.

Visit site

Super Mario in 14kB Javascript

“Here’s an experiment in keeping things small and confined to one Javascript file. There are no external image files or anything, everything is rendered with Javascript using either canvas elements or old fashioned div-making tactics (for IE). The sprites are stored in custom encoded strings in a format that only allows 4 colors for each sprite but in turn only takes up around 40-60 bytes per sprite.”

Visit site

10 Smart Javascript Techniques to Improve Your UI

“Javascript is typically used as an aesthetic language in web development. This means that web developers should almost always be using Javascript for one thing only: Improving the visitor’s experience. There are many clever and useful ways to improve a site from the user interface perspective. A developer can find nearly any snippet of Javascript to achieve what he or she wants to accomplish.”

Visit site

25 Amazing JavaScript Games (Some Fun And Inspiration)

“JavaScript, with the rise of Ajax, is definitely a must-know-well for every web designer/developer.

Besides form controls, alerts & similar simple JavaScript usage, you can almost do anything with the help of JavaScript (& Canvas).”

Visit site

Top 5 Favorite Bookmarklets

“Bookmarklets are the JavaScript-enabled links you can pull into your bookmarks that interact with whatever page you find yourself on. The best bookmarklets act as you would typically expect a toolbar to, by extending your browsing experience. However, since they’re written in JavaScript, they all by working within the browser and without requiring installation. Here are 5 highly recommended bookmarklets you can drag to your browser’s toolbar or to your bookmarks to extend your browsing experience.”

Visit site

10 Promising JavaScript Frameworks

“Popular JavaScript frameworks/libraries like jQuery, MooTools, Prototype, and YUI (to name a few of the most popular JavaScript frameworks out there) definitely have a solid foothold in the JavaScript framework arena. But for the more adventurous developers looking for new or alternative frameworks/libraries – there are some excellent frameworks outside the popular ones that’s worth checking out.”

Visit site

5 Useful Coding Solutions For Designers and Developers

“Often creative and truly remarkable design solutions remain unknown because we, designers, simply overlook them. Being busy with our own projects, we sometimes try to grasp the intuition behind (probably) complex and cluttered code of other designers to understand how they manage to implement particular design ideas. In fact, by just observing the code of other developers we can learn a lot from them; we can find interesting ideas and improve the quality of our work.”

Visit site

Calling WebServices via AJAX

This tutorial will give you a good idea of how to use JavaScript to interact with WebServices.

Visit site

JavaScript Pretty Date

“… A simple way to format old JavaScript dates in a "pretty" way. ”

Visit site

JavaScript iPhone Apps

“I’ve been watching, with interest, developers create new applications for the iPhone. Owning one myself – and being knowledgeable in JavaScript – I’ve been wondering what options there were for creating downloadable JavaScript applications or the iPhone. In doing some research I found a number of solutions, some simpler than others, some requiring more knowledge of Objective-C than others. ”

Visit site

Most Wanted Ajax Techniques: 50+ Examples and Tutorials

“Web applications have made huge leaps and bounds in improving user experience thanks to a lot of recently developed Ajax technology. When you combine some neat functionality courtesy of PHP with the cleverness of javascript you can produce some pretty cool results. In an effort to help you take it up a notch, we’d like to share some methods for helping your site anticipate a user’s next move.”

Visit site

50 Excellent AJAX Tutorials

“AJAX provides Web developers with plenty of opportunities to enhance the user experience and improve the performance of their websites. There are countless ways that AJAX can be used, and fortunately there are plenty of good and useful AJAX tutorials out there to help you with your own implementation.

This post serves as a collection of useful tutorials on working with AJAX in a wide variety of ways. ”

Visit site

10 things IT needs to know about Ajax

“The introduction of any new Web technology will affect a network’s infrastructure in ways that range from inconsequential to earth shattering. Ajax is one of the more disruptive new Web technologies traveling across networks today. To help you minimize future surprises on your network, we’ve outlined the 10 things you should take to heart about Ajax. ”

Visit site

jQuery timepickr

“jquery.timepickr was created in a attempt to make the process of inputing time in a form as easy and natural as possible.”

Visit site

In part one of our 2008 roundup, we saw some of the most useful graphic design tutorials of the year. This second section will walk you through a selection of the best typography related resources and articles of 2008 – tutorials, downloads, fonts, and everything you need to perfect the use of type in your design.

We’re starting off with the most useful graphic design tutorials of the past year. In no particular order, read on to see 33 that have stood out in particular.

They provide a great way to split content up, doing so in a subtle and non-intrusive manner. I would like to share a simple way to create these fading dividers using Photoshop.

Step 1

First, create a new layer. By using the pencil tool, draw a 1px solid horizontal line. Hold the SHIFT key as you click and drag the line to keep it straight. This is the basis for the whole fade effect.

Step 2

Select the eraser tool. Choose a very soft brush setting. The larger the brush size, the longer the fade (you can experiment to find the size that works best for your needs).

Step 3

Erase the left and right ends of the line. This makes the line fade near the ends.

Step 4

Duplicate the layer containing the line (right click the layer in the right hand panel, then select ‘duplicate’). Select the lower of the two layers.

Step 5

Select filter>blur>Gaussian blur. Choose a radius of 3px to create the fade effect (or pick one which suits you!).

Step 6

Use the marquee tool to select everything on or above the solid line (with the blurred layer selected). Hit delete key.

Step 7

Adjust the opacity of the solid line and/or the shadow to suit your preference. Here is what it looks in the end.

As a final note, if you want a greater amount of shading (like the one shown in the example at the top of the page), you can achieve that by duplicating the blurred layer multiple times (right after applying the Gaussian blur) until you are happy with the extent and intensity of the blur (and then, merge the blurred layers).

You can use this technique to create both horizontal and vertical content dividers. And with a little bit of tinkering around, it’s not too hard to come up with something like:

So go on and spice up your borders, separators and edges! If you know of any other sites using this technique (or would like to share your own), please let us know in the comments. You never know, if we like your design it may end up being featured on the site!

Yet, very few websites provide their users with the option of using a virtual keyboard to key in (at the bare minimum) their passwords. Yes, a few banks do it, but considering how much personal information we store in various web applications these days, the safety of these accounts are of no less significance to us. This tutorial will explain how we can implement a simple virtual keyboard with some (well, okay, lots of!) help from jQuery.

Before I begin, let me show you how it will all look in the end.

Basic HTML and CSS Setup

Ok, let’s get started. We start off with a plain, old login form with username and password fields and a login button. We add a link which will show/hide the virtual keyboard when clicked.

Note: For the purpose of demonstration, I have actually used a normal text field instead of a password type text field!

1
2
3
4
5
6
7
8
9
10

<h3>Login form</h3> 
<form action="" method="post" id="loginform">
 
<label for="username">Username:</label>
 
<input type="text" name="username" id="username" /> 
<label for="pwd">Password:</label> 
<input type="text" name="pwd" id="pwd"/> 
<a href="#" id="showkeyboard" title="Type in your password using a virtual keyboard.">Keyboard</a> <br /> 
<input type="submit" name="Submit" id="submit_butt" value="Submit" /> </form>

Next, it’s time to put in the XHTML for the keyboard in place. I just wanted to take a very simple approach, and thus ruled out generating the keys dynamically. I have just the four main rows of the standard keyboard (each enclosed in a DIV), along with their shift equivalents. So that means, a total of 8 rows, of which at any time (depending on whether the shift key is pressed or not), four of the rows would be visible, and the other four hidden.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127

<div id="keyboard">
<div id="row0">
<input name="accent" type="button" value="`" />
<input name="1" type="button" value="1" />
<input name="2" type="button" value="2" />
<input name="3" type="button" value="3" />
<input name="4" type="button" value="4" />
<input name="5" type="button" value="5" />
<input name="6" type="button" value="6" />
<input name="7" type="button" value="7" />
<input name="8" type="button" value="8" />
<input name="9" type="button" value="9" />
<input name="0" type="button" value="0" />
<input name=" - " type="button" value=" - " />
<input name="=" type="button" value="=" />
<input name="backspace" type="button" value="Backspace" />
</div>
<div id="row0_shift">
<input name="tilde" type="button" value="~" />
<input name="exc" type="button" value="!" />
<input name="at" type="button" value="@" />
<input name="hash" type="button" value="#" />
<input name="dollar" type="button" value="$" />
<input name="percent" type="button" value="%" />
<input name="caret" type="button" value="^" />
<input name="ampersand" type="button" value="&" />
<input name="asterik" type="button" value="*" />
<input name="openbracket" type="button" value="(" />
<input name="closebracket" type="button" value=")" />
<input name="underscore" type="button" value="_" />
<input name="plus" type="button" value="+" />
<input name="backspace" type="button" value="Backspace" />
</div>
 
<div id="row1">
<input name="q" type="button" value="q" />
<input name="w" type="button" value="w" />
<input name="e" type="button" value="e" />
<input name="r" type="button" value="r" />
<input name="t" type="button" value="t" />
<input name="y" type="button" value="y" />
<input name="u" type="button" value="u" />
<input name="i" type="button" value="i" />
<input name="o" type="button" value="o" />
<input name="p" type="button" value="p" />
<input name="[" type="button" value="[" />
<input name="]" type="button" value="]" />
<input name="\" type="button" value="\" />
</div>
 
<div id="row1_shift">
<input name="Q" type="button" value="Q" />
<input name="W" type="button" value="W" />
<input name="E" type="button" value="E" />
<input name="R" type="button" value="R" />
<input name="T" type="button" value="T" />
<input name="Y" type="button" value="Y" />
<input name="U" type="button" value="U" />
<input name="I" type="button" value="I" />
<input name="O" type="button" value="O" />
<input name="P" type="button" value="P" />
<input name="{" type="button" value="{" />
<input name="}" type="button" value="}" />
<input name="|" type="button" value="|" />
</div>
 
<div id="row2">
<input name="a" type="button" value="a" />
<input name="s" type="button" value="s" />
<input name="d" type="button" value="d" />
<input name="f" type="button" value="f" />
<input name="g" type="button" value="g" />
<input name="h" type="button" value="h" />
<input name="j" type="button" value="j" />
<input name="k" type="button" value="k" />
<input name="l" type="button" value="l" />
<input name=";" type="button" value=";" />
<input name="’" type="button" value="’" /> 
</div>
 
<div id="row2_shift">
<input name="a" type="button" value="A" />
<input name="s" type="button" value="S" />
<input name="d" type="button" value="D" />
<input name="f" type="button" value="F" />
<input name="g" type="button" value="G" />
<input name="h" type="button" value="H" />
<input name="j" type="button" value="J" />
<input name="k" type="button" value="K" />
<input name="l" type="button" value="L" />
<input name=";" type="button" value=":" />
<input name="’" type="button" value=’"’ />
</div>
 
<div id="row3">
<input name="Shift" type="button" value="Shift" id="shift" />
<input name="z" type="button" value="z" />
<input name="x" type="button" value="x" />
<input name="c" type="button" value="c" />
<input name="v" type="button" value="v" />
<input name="b" type="button" value="b" />
<input name="n" type="button" value="n" />
<input name="m" type="button" value="m" />
<input name="," type="button" value="," />
<input name="." type="button" value="." />
<input name="/" type="button" value="/" />
</div>
 
<div id="row3_shift">
<input name="Shift" type="button" value="Shift" id="shifton" />
<input name="Z" type="button" value="Z" />
<input name="X" type="button" value="X" />
<input name="C" type="button" value="C" />
<input name="V" type="button" value="V" />
<input name="B" type="button" value="B" />
<input name="N" type="button" value="N" />
<input name="M" type="button" value="M" />
<input name="lt" type="button" value="&lt;" />
<input name="gt" type="button" value="&gt;" />
<input name="?" type="button" value="?" />
</div>
 
<div id="spacebar">
<input name="spacebar" type="button" value=" " />
</div>
 
</div>

I have taken care to represent characters which have special meaning in HTML, like “<” using entities.

The CSS

I have kept the CSS styling very minimal. Of course, if you want your keyboard to look like a dragon, you can go ahead and all that jazz! We set the display property of div enclosing the keyboard to be “none” initially, as we don’t want it to show up till the user activates it by clicking on the “Keyboard” link. In addition, we also hide the “shift” keys, i.e. the keys which get activated only when the shift button is down. I have named these rows with a div id ending “_shift”. We will bring them back into view when the user presses the shift key (we will see later).

The rest of the CSS involves basic formatting to make the keys look like as they are on a standard QWERTY keyboard.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

#keyboard { 
position: absolute; 
display: none; 
border: 1px solid #ccc; 
width: 560px; 
padding: 10px; 
cursor: move; 
}
#spacebar input { 
width: 180px; 
margin: 0 auto; 
margin-left: 150px; 
}
 
#shift, #shifton { 
width: 70px; 
text-align: left; 
}
 
#row0_shift, #row1_shift, #row2_shift, #row3_shift {
display: none;
}
 
#row0, #row0_shift {
padding-left: 20px; 
}
 
#row1, #row1_shift { 
padding-left: 60px; 
}
 
#row2, #row2_shift { 
padding-left: 70px; 
}
 
#shifton { 
border-left: 3px solid #000; 
border-top: 3px solid #000; 
}

jQuery

Let’s now get to the most important part – the JavaScript that controls the behavior of the keyboard. We will be using two jQuery extensions – one to make the keyboard draggable, and the other to aid in the selection and manipulation of the password field. I have made some additions to the original fieldSelection JQuery plugin by Alex Brem to suit our additional needs. vkeyboard.js contains our custom code.

1
2
3
4

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="jquery-ui-personalized-1.5.2.min.js"></script>
<script type="text/javascript" src="jquery-fieldselection.js"></script>
<script type="text/javascript" src="vkeyboard.js"></script>

In vkeyboard.js, we place all our code within jQuery’s ready function to ensure that the code runs only after the document is fully loaded.

1
2
3

$(document).ready(function(){
// all our code goes here
});

Let me just walk you through the underlying logic behind the code. We first add an “onclick” event handler which causes the keyboard to toggle (i.e. show up if hidden, hide if already shown) when the user clicks on the “Keyboard” link.

1
2
3
4
5
6
7

$("#showkeyboard").click(function(e) {
var height = $(’#keyboard’).height();
var width = $(’#keyboard’).width();
leftVal=e.pageX-40+"px";
topVal=e.pageY+20+"px";
$(’#keyboard’).css({left:leftVal,top:topVal}).toggle();
});

Next up, we make the keyboard draggable, so that the user can drag it and keep in anywhere on the screen such that it does not obstruct the text underneath. We do this by calling the draggable(), courtesy of the jQuery UI + draggable plugin.

1

$("#keyboard").draggable();

We need to next define a function that toggles between the default rows on the keyboard and the rows which get activated when the “Shift” key is pressed.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

function onShift(e) {
var i;
if(e==1) {
for(i=0;i<4;i++) {
var rowid = "#row" + i;
$(rowid).hide();
$(rowid+"_shift").show();
}
}
else {
for(i=0;i<4;i++) {
var rowid = "#row" + i;
$(rowid).show();
$(rowid+"_shift").hide();
}
}
}

Lastly, we define a function that’s called whenever any of the keys on the keyboard are pressed.

This function checks if the key pressed is Backspace. If it is, then it calls the replaceSelection function from the fieldSelection plugin with an empty string as a parameter, to indicate that a backspace operation (replacing preceding character to the current cursor location by an empty string – i.e. deleting the preceding character) must be performed.

If the “Shift” key had been pressed, then the function sets the “shifton” variable to be true to indicate that the shift key has been pressed and calls onShift(1). However if the shift key has already been pressed, the function deactivates the shift rows by calling onShift(0).

If some other key had been pressed, then we simply insert the character in between the current cursor position. The replaceSelection()handles the case when some characters have already been selected by the user. In that case, the selected characters would be replaced by the character that is represented by the key pressed.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

$("#keyboard input").bind("click", function(e) {
if( $(this).val() == ‘Backspace’ ) {
$(’#pwd’).replaceSelection("", true);
}
 
else if( $(this).val() == "Shift" ) {
if(shifton == false) {
onShift(1); 
shifton = true;
}
 
else {
onShift(0);
shifton = false;
} 
}
 
else {
 
$(’#pwd’).replaceSelection($(this).val(), true);
 
if(shifton == true) {
onShift(0);
shifton = false;
}
}
})

And… we are done! Check out the demo and download full source code here.

As you can see, most of the actual hard work is handled by the jQuery plugins. If you are interested in reading up more on the challenges involved with field selection and replacement using Javascript, you should check out this article on Quirksmode.