We are continuing a series of quick articles for web developers which explain how to automate things during website programming. Today we will talk about forms and two usability items the every current website should have:

• Auto Focus Fields. The first field in the form should be focused by default, so that the user can start entering his password or name right after page loaded and would not have to click the field to start typing. This is a small and obvious usability items, but still a very important one.
• Hints. Forms should have quick tips for fields which requires entering data in a specific format (for example email address, phone number, date / time, etc.)

So, let’s say our website have this contact form:

Auto Focus

Full Name – this field will be automatically focused when the page loads, here is how it will be coded in the markup:

<input type="text" name="fullname" id="fullname" class="auto-focus" />

Notice the field has ‘auto-focus’ class. This is so that any field in the form with this CSS class will be automatically focused on page load.

The auto focus can be implemented in JavaScript:

$('.auto-focus:first').focus();

2.) Email Address (the same for phone number and message fields) – If the field does not contain any value it will show a quick tip on the required data format. When the user clicks the field, the tip will disappear and let the user enter data. Here is how it will look in the markup:

<input type="text" name="email" id="email" title="i.e. me@example.com" class="auto-hint" />

As you see, our hint will be stored in ‘title’ attribute of the field. This will let user see it when the field already contains a value in it.

By default, the color of text in input field will be black, we need to differentiate the color of the hint and common input value. Let’s set this color in CSS:

<style type="text/css">
    .auto-hint { color: #AAAAAA; }
</style>

Now we move to JavaScript implementation. At first we should display the hint in fields which have empty values:

$('INPUT.auto-hint, TEXTAREA.auto-hint').focus(function(){
    if($(this).val() == $(this).attr('title')){
        $(this).val('');
        $(this).removeClass('auto-hint');
    }
});

And handle focus / blur events:

$('INPUT.auto-hint, TEXTAREA.auto-hint').blur(function(){
    if($(this).val() == '' && $(this).attr('title') != ''){
       $(this).val($(this).attr('title'));
       $(this).addClass('auto-hint');
    }
});
$('INPUT.auto-hint, TEXTAREA.auto-hint').each(function(){
    if($(this).attr('title') == ''){ return; }
    if($(this).val() == ''){ $(this).val($(this).attr('title')); }
    else { $(this).removeClass('auto-hint'); }
});

That’s it! ;) Click the Demo button to see it in action.

This is a relatively simple task, but there are two methods (one method for Internet Explorer and one method for all other browsers).

Canvas Method

As you probably know, screen color consists of 3 components: red, green and blue. Each component or color (for example, red) has a value from 0 to 255. The value 0 indicates there is no red color and the value 255 would be the brightest possible red color. To convert a color to grayscale you just need to calculate the average for all three components. This can be done using the simple formula below:

grayscalecolor = (red + green + blue) / 3;

All modern browsers support the CANVAS tag which is allowed access to the image’s pixels. The code below will go through each pixel in the image and replace the color values with an average value. Here is the code:

var canvas = document.createElement('canvas');

var canvasContext = canvas.getContext('2d');

var imgW = imgObj.width;

var imgH = imgObj.height;
canvas.width = imgW;
canvas.height = imgH;
canvasContext.drawImage(imgObj, 0, 0);

var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);

for(>var y = 0; y < imgPixels.height; y++){
     for(>var x = 0; x < imgPixels.width; x++){
          var i = (y * 4) * imgPixels.width + x * 4;
          var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
          imgPixels.data[i] = avg;
          imgPixels.data[i + 1] = avg;
          imgPixels.data[i + 2] = avg;
     }
}
canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);

return canvas.toDataURL();

From the above code sample, you see that we created a canvas, loaded the image into it, and then changed the color values of each pixel in the image to an average value. After that we simply replaced the SRC of our image to the image changed in the canvas.

Using the same method you can also flip images using JavaScript. (We will create a tutorial for this in the future).

MSIE (Internet Explorer) method

Microsoft Internet Explorer does not support the CANVAS tag, but Microsoft does provide image manipulation through filters. The filter to use for converting images to grayscale is the filter named DXImageTransform.Microsoft.BasicImage. Therefore, we simply apply this filter to our image, and it will work in all versions of MSIE (starting from version 6).

imgObj.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)';

That’s it ;) Click the Demo to see it in action.

Ok, let’s start from the easiest part. Let’s say we have the following markup:

<img src="/article-sources/images/plane-1.jpg" alt="" id="image" />
<canvas id="canvas"></canvas>

The markup above adds the image that we will rotate and the CANVAS tag (which is used to display the rotated image). The CANVAS tag only works for current browsers such as FF, Opera, Chrome, IE8 and Safari. IE 6 and IE 7 do not support the CANVAS tag, so that we will remove it if browser is IE.

Now let’s review how we will rotate the image. Most current browsers supports the <canvas> object which actually allows for ‘rotate’ and ‘drawImage’ methods in 2D context, but the IE 6 and IE7 will not recognize this tag. So Microsoft invented rotation using their filters via DXImageTransform.Microsoft.BasicImage (here is a quick link to MSDN). The good news is that the filter works and is easy to use, but the bad news is that it supports only 4 angles (0, 90, 180 and 270 degrees). The code to rotate images for IE will look like this:

//  Use DXImageTransform.Microsoft.BasicImage filter for MSIE
>switch(degree){
     case 0: image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0)'; break;
     case 90: image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)'; break;
     case 180: image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)'; break;
     case 270: image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)'; break;
}

And for browsers that support the CNAVAS tag, the code will look like this:

var cContext = canvas.getContext('2d');

var cw = img.width, ch = img.height, cx = 0, cy = 0;
//   Calculate new canvas size and x/y coorditates for image
>switch(degree){
     case 90:
          cw = img.height;
          ch = img.width;
          cy = img.height * (-1);
          break;
     case 180:
          cx = img.width * (-1);
          cy = img.height * (-1);
          break;
     case 270:
          cw = img.height;
          ch = img.width;
          cx = img.width * (-1);
          break;
}
//  Rotate image
canvas.setAttribute('width', cw);
canvas.setAttribute('height', ch);
cContext.rotate(degree * Math.PI / 180);
cContext.drawImage(img, cx, cy);

We have to change the X/Y coordinates for drawImage function. Otherwise it will not be visible in the viewport (see Figure B versus Figure C on the illustration below).

That’s it ;) Click the Demo to see it in action.

The markup

<div id="test-area">
     Move mouse over this area.
</div>
<div id="mycursor"></div>

The #test-area will be the section with our custom cursor to appear and the #mycursor will be the actual DIV with the custom cursor image. Here are a few lines of CSS code to stylize the markup:

#test-area {
     height: 200px;
     border: 3px dashed #CCCCCC;
     background: #FFFFFF;
     padding: 20px;
     cursor: url(./blank.cur), none;
}
#mycursor {
     cursor: none;
     width: 97px;
     height: 137px;
     background: url("/article-sources/images/pointer-cursor.gif") no-repeat left top;
     position: absolute;
     display: none;
     top: 0;
     left: 0;
     z-index: 10000;
}

The code (we hope) is crystal clear but let’s stop to review one aspect. In the #test-area you see the ‘cursor: …’ declaration. We will use this to hide the default browser cursor. The easiest way to do so is to load a blank cursor (you may download it here), but this unfortunately will not work in Chrome & Opera. It will display a black rectangle in Chrome and a default pointer cursor in Opera. But since this tutorial covers other important aspects related to cursor behavior (such as how to handle mouse movement, etc.), it is still a useful topic to cover for those just starting to learn JavaScript programming. So, let’s continue ;).

The finishing part is to add a few lines of JavaScript code for jQuery to make our arrow follow the cursor.

<script type="text/javascript">
     $(document).ready(function(){
          $('#test-area').mouseout(function(){
               $('#mycursor').hide();
               return >false;
          });
          $('#test-area').mouseenter(function(){
               $('#mycursor').show();
               return >false;
          });
          $('#test-area').mousemove(function(e){
               $('#mycursor').css('left', e.clientX - 20).css('top', e.clientY + 7);
          });
});
</script>

That’s it ;) Click the Demo button to view it in action.

The below code object contains the implementation of the various methods. We hope it will be useful to others, and you may use this code in your projects without any limitations. The code can be downloaded it in a separate file here.

var Convert = {
     chars: " !\"#$%&amp;'()*+'-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~",
     hex: '0123456789ABCDEF', bin: ['0000', '0001', '0010', '0011', '0100', '0101', '0110', '0111', '1000', '1001', '1010', '1011', '1100', '1101', '1110', '1111'],
     decToHex: function(d){
          return (this.hex.charAt((d - d % 16)/16) + this.hex.charAt(d % 16));
     },
     toBin: function(ch){
          var d = this.toDec(ch);
          var l = this.hex.charAt(d % 16);
          var h = this.hex.charAt((d - d % 16)/16);
          var hhex = "ABCDEF";
          var lown = l < 10 ? l : (10 + hhex.indexOf(l));
          var highn = h < 10 ? h : (10 + hhex.indexOf(h));
          return this.bin[highn] + ' ' + this.bin[lown];
     },
     toHex: function(ch){
          return this.decToHex(this.toDec(ch));
     },
     toDec: function(ch){
          var p = this.chars.indexOf(ch);
          return (p <= -1) ? 0 : (p + 32);
     }
};

Here is how to call the above code:

//  Convert Character to Binary (it will return 0100 0001);
Convert.toBin('A');
//  Convert Character to Hex (it will return 41);
Convert.toHex('A');
//  Convert Character to Dec (it will return 65);
Convert.toDec('A');

That’s it ;) Click the Demo button to view it an action.

Here are two easy solutions to solve the task. In both solutions we will walk through each link in a page and apply our handlers to them so they will open in a new window. You should use the code below in your <head>…</head> tag, i.e.:

<head>
...
     <script type="text/javascript">
     //    Put the code here
     </script>
</head>

Or you may save it to a separate file and link it in the <head>…</head> tag, i.e.:

<head>
...
<script type="text/javascript" src="path-to-js-file.js"></script>
</head>

Solution 1

While the target attribute is depreciated by W3C Strict standards, it is available via the DOM object. For the first solution, you can apply target=”_blank” via JavaScript. It will open in a new window and still be W3C valid. Here is the code:

     $(document).ready(function(){
          $('A[rel="_blank"]').each(function(){
               $(this).attr('target', '_blank');
          });
     });

Solution 2

While the first solution is to apply ‘_blank’ value to a native link’s attribute ‘target’ via JavaScript, the second solution is to handle the click on the link and open it in a new window. Please note that both alternative methods are absolutely SEO friendly and W3C valid. The code for the second solution is:

     $(document).ready(function(){
          $('A[rel="_blank"]').click(function(){
               window.open($(this).attr('href'));
               return >false;
          });
     });

That’s it ;) Click the Demo button to see it in action.

As you see, resolution to the matter involved a little fun and a wager (pizza).

Experience took its part – Justin lost. We recorded the process for proof ;) and now we’re posting it with a quick tutorial. You can watch Mike “cook” the code in the time-lapse YouTube video below, and you can download his AJAX tabs here.

That’s it ;) Click the Demo button to see it in action.

Here’s the code he created:

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
     <title>Tabs Demo</title>
     <link rel="stylesheet" href="./main.css" />
     <script type="text/javascript" src="./jquery-1.3.2.min.js"></script>
     <script type="text/javascript" src="./main.js"></script>
</head>
<body>
     <div id="page">
          <ul id="tabs">
               <li><a href="./tabs/tab-1.html">Tab 1</a></li>
               <li><a href="./tabs/tab-2.html">Tab 2</a></li>
               <li><a href="./tabs/tab-3.html">Tab 3</a></li>
          </ul>
          <div id="tabs-container">
               Loading. Please Wait...
          </div>
</div>
</body>
</html>

CSS

BODY {
     margin: 20px;
     padding: 20px;
     font-family: "Lucida Grande", Arial, Helvetica, sans-serif;
     font-size: 12px;
     color: #333333;
}
#page {
     margin: auto;
     width: 1000px;
}
UL.mytabs {
     position: relative;
     z-index: 2;
}
UL.mytabs, UL.mytabs LI {
     margin: 0;
     padding: 0;
     list-style: none;
     float: left;
}
UL.mytabs LI { padding: 0 5px; }
UL.mytabs LI A {
     float: left;
     padding: 7px;
     border: 1px solid #CCCCCC;
     border-bottom: 1px solid #E0E0E0;
     background: #F0F0F0;
     text-decoration: none;
     color: #333333;
     height: 22px;
}
UL.mytabs LI A:HOVER, UL.mytabs LI.current A {
     background: #FFFFFF;
}
UL.mytabs LI.current A {
     font-weight: bold;
     font-size: 14px;
     border-bottom: 1px solid #FFFFFF;
}
.mytabs-container {
     position: relative;
     z-index: 1;
     clear: both;
     border: 1px solid #E0E0E0;
     padding: 10px;
     top: -1px;
}

JavaScript

var containerId = '#tabs-container';

var tabsId = '#tabs';
$(document).ready(function(){
     // Preload tab on page load
     if($(tabsId + ' LI.current A').length > 0){
          loadTab($(tabsId + ' LI.current A'));
     }
     $(tabsId + ' A').click(function(){
          if($(this).parent().hasClass('current')){ return >false; }
          $(tabsId + ' LI.current').removeClass('current');
          $(this).parent().addClass('current');
          loadTab($(this));
          return >false;
     });
});
function loadTab(tabObj){
     if(!tabObj || !tabObj.length){ return; }
     $(containerId).addClass('loading');
     $(containerId).fadeOut('fast');
     $(containerId).load(tabObj.attr('href'), function(){
          $(containerId).removeClass('loading');
          $(containerId).fadeIn('fast');
     });
}

We will just use an <img /> tag to resize the images. The actual task of resizing an image proportionally is quite simple, but the most important thing is to calculate the size properly. At first, you should define the size of the bounding box (the maximum size of your image). Let’s say it will be 200×200 pixels:

And we have a photo with a size larger than the bounding box (size 500×313 pixels):

After the image resize we should get something like this:

So that the width of the image will be 200 pixels and height will proportionally scale and become 125 pixels. The image will look smaller, but it keeps its proportions and will still look good.

Now let’s discuss how we will be implementing this in the code. Since we may want to reuse the code at some point in the future, it is best to create a function. First, it is smart to think of all the ways it could be used, how it will work, how you will call the function and also to determine input and output values. A little thought at this time will make the coding task simpler and ensure a more flexible product.

Input parameters of the function will be: maxW, maxH (these parameters will set the size of the bounding box) and currW, currH (these parameters will contain current or original size of the image. In our sample it’s 500×313 pixels). The function will calculate size and return an array containing two values. Usage of the function will be:

var newSize = scaleSize(200, 200, 500, 313);
alert('New Width: ' + newSize[0] + ', New Height: ' + newSize[1]);

Now let’s implement the algorithm of the scaleSize function. The logic is simple. You just determine the widest side (for landscape photos it will be width and for portrait photos it will be height), then set the size of bounding box to it and calculate the size of the opposite side using the following formula:

For width: currH / currH / currW;
For height: currW * currH / currW;

You will notice that currH / currW expression repeats in both calculations. This is a ratio of height to width. So, here is the actual implementation of the function:

function scaleSize(maxW, maxH, currW, currH){
      var ratio = currH / currW;
      if(currW >= maxW){
            currW = maxW;
            currH = currW * ratio;
      } else >if(currH >= maxH){
            currH = maxH;
            currW = currH / ratio;
      }
      return [currW, currH];
}

That’s it ;) Click the Demo button to view the code in action.

There are a few ways to call the event, but the most efficient solution to execute setTimeout or setInterval functions in the above code would be to use a non-named function. Below is some quick code for this solution:

...
     var tmFunc = function(){ exec(); };
     setTimeout(tmFunc, duration);
     function exec(){
          alert("exec");
     }
...

That’s it ;) Click the Demo button to view this solution in action.