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.
    <html>
    <head>
    <title>Welcome to Testbed</title>
    <script type=’text/javascript’ src=”jquery.js”></script>
    <style>
    .inline-bg-image {
    background-image: url(‘passwd.png’);
    background-repeat: no-repeat;
    background-position: +2px +2px;
    }
    </style>
    <script type=’text/javascript’>
    $(document).ready( function() {
    $(‘#inline-image’).click(function() {
    $(‘#inline-image’).removeClass(‘inline-bg-image’);
    });
    $(‘#inline-image’).focusout(function() {
    if(! $(‘#inline-image’).val()) {
    $(‘#inline-image’).addClass(‘inline-bg-image’);
    }
    });
    });
    </script>
    </head>
    <body>
    <p>Welcome user :-)</p>
    <input id=’inline-image’ style=’height: 32px;’
     size=22 type=password value="" class=’inline-bg-image’/>
    </body>
    </html>
    
  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 www.jquery.com 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.

    Comments

    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 bootupConfiguring “wvdial” application for dialup / ppp connectionInitializing / starting the CDMA modem connectionSetting up “iptables” for NAT forwardingSetting up “dnsmasq” for resolving DNS and as DHCP server
    Configuring kernel modules for auto-loading at bootup
    Open a terminal and type the co…

    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 method…

    Creating GRUB/Syslinux splash images

    GRUB splash image creation:
    Open GIMP application.Create an image of size 640x480 pixels. You may open an existing image and resize it too.Reduce the number of colors to 14 by selecting menu item “Image->Mode->Indexed”. Don’t use any color dithering.Save the resulting image as splash.xpm and close GIMP.Compress the image file by running; gzip splash.xpmCopy the resulting splash.xpm.gz file to /boot/grub.Run update-grub to upgrade the grub configuration to include this splash image.
    Syslinux splash image creation:
    Open GIMP application.Create an image of size 640x480 pixels. You may open an existing image and resize it too.Reduce the number of colors to 14 by selecting menu item “Image->Mode->Indexed”. Don’t use any color dithering.Save the resulting image as splash.ppm and close GIMP.Install the package syslinux-common by running; apt-get install syslinux-common as sudo/root. Convert the saved image to syslinux format by running; ppmtolss16 ‘#ffffff=7’ <splash.ppm >spl…