ajaxBlender.com— jQuery Scripts. Custom jQuery Programming. jQuery Scripts Integration.

jFiller

ajaxBlender.com — Mon, 26 Apr 2010 08:08:30 +0000

Our team often works on developing server-side scripts which sometimes have registration forms, large survey forms, etc. During testing our engineers might have to fill out a form 200-300 times a day, and this, of course, is a boring and tedious process ;)

That’s why we developed a quick but very useful jQuery plugin which prevent the developer from having to fill out the form manually during testing. It automatically detects forms in your document and saves your filling preference. The jFiller plugin also provides proper data for the different types of fields: radio buttons, check boxes, text inputs, textareas, selects, etc. The only field type we cannot provide automatic data filling for is the file upload field, but the reason is obvious, right? :)

And at the end it won’t require any modifications, you just include it and use it. When the debug phase is complete, you can simply exclude it from your HTML document. We like this automatic form filling script, and hope others will find it useful during development too.

How to Use

1.) Download jFiller script. The package already contains jQuery framework.
2.) Add the following code to your … tag to connect jQuery framework and jFiller plugin. (Make sure paths to files are correct.)

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

How to Add Hints & Auto Focus Form Fields using jQuery

ajaxBlender.com — Fri, 19 Feb 2010 15:52:16 +0000

This tutorial teaches you how to easily add hints to your forms and auto focus fields.

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:

"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:

"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:

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() == '' &amp;&amp; $(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.

jSnow

ajaxBlender.com — Thu, 17 Dec 2009 15:21:33 +0000

Adding an animation effect of falling snow with JavaScript is a quick and easy way to keep your site looking current during the holidays for your site’s users. jSnow, is a jQuery plug-in that adds falling snow effect to your website. jSnow is lightweight (2kb), doesn’t require any external files to run (css or images) and it’s very easy to use.

Convert Images to Grayscale

ajaxBlender.com — Mon, 07 Dec 2009 15:33:03 +0000

Read this tutorial to find out how to desaturate an image (convert color images to grayscale) using JavaScript. A cross-browser code sample is supplied.
Recently we published a tutorial explaining how to rotate images using JavaScript. To continue this series of tutorials on image manipulation using JavaScript, we would like to explain how to change color images to grayscale using JavaScript.

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.

Rotate Images Using JavaScript

ajaxBlender.com — Mon, 30 Nov 2009 17:32:19 +0000

Rotate images using JavaScript – is this even possible? Of course ;) Read this tutorial to find out how to rotate images using JavaScript, and the code is a cross-browser solution.

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

"/article-sources/images/plane-1.jpg" alt="" id="image" />
>

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 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.

Create Custom Cursors without .cur File

ajaxBlender.com — Wed, 25 Nov 2009 14:33:10 +0000

Sometimes you may want to replace your cursor with a custom image or use a custom image to move with your cursor. This quick JavaScript tutorial will show you how to implement it.
The task is pretty simple. At first we should hide the default cursor for the section where we will display our custom one. Our custom cursor will actually be a DIV with an image on the background. We will use JavaScript to change the position of this DIV when the user moves the mouse over the section.

The markup

"test-area">
     Move mouse over this area.

"mycursor">

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.

jAni

ajaxBlender.com — Mon, 23 Nov 2009 16:05:22 +0000

jAni is a simple plugin for jQuery which allows you animate background images. The plugin is basically an alternative to the animated GIF but with several benefits. At first, it’s always better to use an animated GIF as this format is supported by all browsers without any JavaScript code or additional markup, but the “dark side” of it is that an animated GIF allows only 256 colors and you cannot control animation in any way. The jAni loads a long vertical image and changes its background position with the speed you setup, giving you more control of the animation.

Features

Light-weight script
Easy to integrate
Fully customizable via CSS
Works with all modern browsers

How to Use

1.) Download jAni script. The package already contains jQuery framework.
2.) Add the following code to your … tag to connect the jQuery framework and jAni plugin. (Make sure paths to files are correct.)

3.) Add a style containing the url to your background with animation (this may be added to a separate CSS document or inside the … tag):

4.) Add an empty DIV which will display animation in your document:

"animation-1">

5.) Add the following code to your … tag to initialize jAni and start the animation.

<script type="text/javascript">
$(document).ready(function(){
$('#animation-1').jani({ frameWidth: 100, frameHeight: 100, speed: 100, totalFrames: 19 });
$('#animation-1').jani.play();
});
</script>

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

jAni Methods

jani.play()
Start playing animation.

jani.pause()
Pause animation.

jani.stop()
Stop animation.

Parameters

The table below contains a list of parameters accepted by the .jani() function.

Parameters	Description
frameWidth	Width of a single frame.
frameHeight	Height of a single frame.
speed	Animation speed.
totalFrames	Total frames in the animation.
loop	Loop an animation or not. By default, value is true.

Convert ASCII Character to Hex, Decimal and Binary Code

ajaxBlender.com — Thu, 19 Nov 2009 17:38:19 +0000

This JavaScript tutorial explains how to convert ASCII Character to Hex, Decimal and Binary Code using JavaScript.
Recently we were asked for a function code to convert user input to hex code which was intended to be used in a JavaScript remote terminal application. We decided to share this code and also added two more conversion methods to it. The methods are Character to Decimal, Character to Binary, and Decimal to Hex.

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.