Skip to main content

In-field labeling with jQuery

In-field labels are one of the recent design adaptations for HTML forms. Instead of placing a label and corresponding element next to each other, placing the label inside the input element itself makes it looks elegant and conveys the expected input value more easily. jQuery can be very helpful in creating such in-field labels. There are already few jQuery libraries available which can be used for this purpose. But, here I’m trying to show a rather simple, image based in-field labeling technique using pure css and jquery functions only. This may not be very elegant technique but, it does serves the purpose :-P

Here are the steps involved in trying out this technique.
  1. Create a html file (let’s call it test.html) with the contents below.
    <title>Welcome to Testbed</title>
    <script type=’text/javascript’ src=”jquery.js”></script>
    .inline-bg-image {
    background-image: url(‘passwd.png’);
    background-repeat: no-repeat;
    background-position: +2px +2px;
    <script type=’text/javascript’>
    $(document).ready( function() {
    $(‘#inline-image’).click(function() {
    $(‘#inline-image’).focusout(function() {
    if(! $(‘#inline-image’).val()) {
    <p>Welcome user :-)</p>
    <input id=’inline-image’ style=’height: 32px;’
     size=22 type=password value="" class=’inline-bg-image’/>
  2. Create a PNG image called passwd.png with height of 24px. For example, you can type ‘Password’ in Inkscape, select the text and export it as PNG.
  3. Download the latest jQuery library from and rename it as jquery.js
  4. Create an empty folder inside your accessible webroot (Ex., ~/public_html directory in *IX systems) and put the files, test.html, passwd.png and jquery.js into it
The input element in this example is a password field. You can adapt the same technique for other input field types as well. One use of this technique is, javascript validation of input fields based on values entered is unaffected by overlapping the image. The disadvantage is that, developer need to make sure image size corresponds to size of the input field for each field.


    Popular posts from this blog

    Using USB CDMA modem to setup a home/private WiFi network

    The idea here is to give a ‘how-to’ on setting up a a home WiFi network using mobile, CDMA based USB modem, hoping that bandwidth that you obtain from this service is satisfactory :-) Hardware Requirements: Linux PC/Notebook/Netbook Wifi Access point connected to ethernet port of the Linux box CDMA-1x USB Modem (Device used: Reliance M880) Software/OS Requirements: Linux Operating System with “usbserial” and “cdc_acm” device driver modules “pppd”, “wvdial”, “iptables”, and “dnsmasq” applications and their dependencies installed on the System Setup: The steps followed in setting up this CDMA based connectivity can be split into 3 steps, as follows. Configuring kernel modules for auto-loading at bootup Configuring “wvdial” application for dialup / ppp connection Initializing / starting the CDMA modem connection Setting up “iptables” for NAT forwarding Setting up “dnsmasq” for resolving DNS and as DHCP server Configuring kernel modules for auto-loading at bootup Open

    Debian Squeeze and Mac OSX Lion - Dual boot

    With Mac OSX Snow Leopard, things were much simpler to install and run a Linux operating system just by using rEFIt boot manager utility, on my Mac Mini(4,1 Mid-2010 model). With the introduction of Lion, Apple has introduced a hidden, OS recovery partition. In total, there will be 3 partitions for Mac OSX alone, for Lion. They are ESP (EFI System Partition), Mac OSX installation partition and, the OS recovery partition. Also, as per the GUID Partition Table(GPT) which Mac uses, there can be maximum of 4 primary partitions, with no scope for Extended partitions like in typical MSDOS Partition Table setup. It is also recommended to follow GPT when using Mac. With all these constraints, I'm actually left with one partition where I can install and run GNU/Linux (in this case, Debian Squeeze). I didn't try resizing an existing Mac OSX installation partition and creating an Ext4 partition for Linux. Rather, I choose to go for fresh installation. You can try with the resizing metho

    Using git over proxy

    I was trying to clone Android repository at office when this problem of “Connection refused” started coming when running the ‘repo’ tool. On subsequent googling, I got this really useful link (thanks to Emil Sit) which explained how git can be used over http proxy for those git servers which don’t allow http method as an alternate/bypass to git protocol (As it looks is the case with Android git repository). Ok, in short, here is what I have done; Typed in the below lines (quoted) into a shell script called gitproxy and put it in $(HOME)/bin directory. Of course, its executable bits has to be set with chmod a+x $(HOME)/bin/gitproxy. My $(HOME)/bin directory is already part of PATH so that I can access my custom scripts easily. #!/bin/sh # Use socat to proxy git through an HTTP CONNECT firewall. # Useful if you are trying to clone git:// from inside a company. # Requires that the proxy allows CONNECT to port 9418. # # Save this file as gitproxy somewhere in your path # (e.