Featured Post

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

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

    How to extract an initrd image

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

    Debian Squeeze and Mac OSX Lion - Dual boot