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.

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 &amp;&amp; ratio <= 1){
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.

We previously built a CMS driven website for a client which contains several large photo galleries that use a lightbox effect. Today, the client requested that we add slideshow functionality to the existing plugin to allow automatic switching between photos instead of having visitors click the Next button to view the next item in the gallery.

At first, we suggested to our client to use a different script (a script that already has slideshow features). But since the client needed this “yesterday” :) and he also wants to continue using the current plugin because it’s already proven to work well with his CMS, he asked that we find a way to implement it using the existing plugin. So, in this tutorial we decided to share our experience extending jQuery Lightbox plugin to have basic slideshow functionality.

Okay…we had 10 minutes, we don’t want to disappoint the client, and we have code from a 3rd party plugin that we’ve never seen before ;). Well, at first our idea was to build our extension on top of the existing code, but the jQuery Lightbox has been created as a single object with private methods which made this idea useless. We had no choice but to make changes to the lightbox.js (sorry Leandron ;)). Here we go.

Step 1. First, we added two configuration parameters to the lightbox’s settings:

settings = jQuery.extend({
     // Configuration related to slideshow,
     slideshow: false,
     nextSlideDelay: 7000,
     ...

slideshow – This sets it to display images in slideshow mode or not. Slideshow functionality is turned off by default, of course.
nextSlideDelay – This is a value in milliseconds which sets the period of time for the script to wait before displaying the next image. It is set to 7 seconds, by default.

Step 2. Next, we make a simple add-on to the _initialize() method to start the slideshow if settings.slideshow parameter is turned on:

function _initialize() {
     if(settings.slideshow){
          var tmFunc = function(){ _doSlideShow(); };
          setTimeout(tmFunc, settings.nextSlideDelay);
     }
     ...

Step 3. And implementation of the actual _doSlideShow() function which switches to next image:

function _doSlideShow(){
     settings.activeImage++;
     if(settings.activeImage >= settings.imageArray.length){
          settings.activeImage = 0;
     }
     _set_image_to_view();
     var tmFunc = function(){ _doSlideShow(); };
     if($('#jquery-lightbox').length > 0){
          setTimeout(tmFunc, settings.nextSlideDelay);
     }
}

A few notes about the code:

The lightbox plugin has a variable settings.activeImage which points to the visible image from the settings.imageArray array. Our function executes every 7 seconds (or any other period of time set via the parameter in the plugin settings), then increases the value of activeImage and calls the _set_image_to_view() method which displays the current image.

That’s it ;) Click the Demo button to view it in action, or click here to download a patched version of the jQuery Lightbox plugin. It’s a quick mod and saved time for both us and our client. Hopefully, it will save others some time too.

Preface

Steps to create the ExtJS preloader:

• Create a loading layer, which will contain the progress indicator and display messages while external files (i.e. JavaScript, CSS code, etc.) are loading.
• Add a few lines of CSS code to stylize the loading layer.
• Add JavaScript code to hide the layer when all external files are loaded.

Implementation

Let’s start from the loading layer. You should create the following HTML code for it:

<body>
     <div id="loading-mask"></div>
     <div id="loading">
          <span id="loading-message">Loading. Please wait...</span>
     </div>
</body>

<div id=”loading-mask”> will be our overlay layer which will be placed at the top of the page’s content. We will hide it once the data is fully loaded by the preloader. <div id=”loading”> is the layer which will be placed at top of “loading-mask” and it will be used to display a progress indicator and loading messages.

Use the following CSS code to stylize the content loader. Remember to insert this CSS inside of your <head>…</head> tag:

<style type="text/css">
HTML, BODY { height: 100%; }
#loading-mask {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: #000000;
     z-index: 1;
}
#loading {
     position: absolute;
     top: 40%;
     left: 45%;
     z-index: 2;
}
#loading SPAN {
     background: url('/article-sources/images/loader.gif') no-repeat left center;
     padding: 5px 30px;
     display: block;
}
</style>

Now, when you have the loading layer, let’s load two JS files. We will be using a common JavaScript to update the progress messages (preload message) while the data loads.  Remember to insert this code inside of the <body>…</body> tag, just after the code for loading layer:

<script type="text/javascript">
     document.getElementById('loading-message').innerHTML = 'Loading Core API...';
</script>
<script type="text/javascript" src="/article-sources/extjs/lib/ext-base.js"></script>
<script>
     document.getElementById('loading-message').innerHTML = 'Loading ExtJS 3.0 ...';
</script>
<script type="text/javascript" src="/article-sources/extjs/lib/ext-all.js"></script>

After this, you use use ExtJS code to fade out the loading message and remove the loading overlay layer from the page:

<script type="text/javascript">
Ext.onReady(function(){
     var loadingMask = Ext.get('loading-mask');
     var loading = Ext.get('loading');
     //  Hide loading message
     loading.fadeOut({ duration: 0.2, remove: true });
     //  Hide loading mask
     loadingMask.setOpacity(0.9);
     loadingMask.shift({
          xy: loading.getXY(),
          width: loading.getWidth(),
          height: loading.getHeight(),
          remove: true,
          duration: 1,
          opacity: 0.1,
          easing: 'bounceOut'
     });
});
</script>

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