ajaxBlender.com— A Whole Lot of AJAX! Directory for Web 2.0 AJAX scripts, demos and tutorials. Custom AJAX Coding Service for Your Web 2.0 Website. http://www.ajaxblender.com A Whole Lot of AJAX! Thu, 03 Jun 2010 15:20:57 +0000 http://wordpress.org/?v=2.8.5 en hourly 1 Josh Farkas http://www.ajaxblender.com/josh-farkas.html http://www.ajaxblender.com/josh-farkas.html#comments Thu, 03 Jun 2010 15:20:57 +0000 ajaxBlender.com http://www.ajaxblender.com/josh-farkas.html CubicleNinjas.com
As a full-time freelance designer, keeping up with the latest in compliant web coding is simply out of my reach. Finding Html Blender was my saving grace. Instead of worrying about how to build, I can focus on creating beautiful designs and be sure that they’ll come back quickly and with the highest quality. In working with other web conversion companies, I’ve found that their turnaround time and commitment to quality simply aren’t there. When working with Html Blender it was clear immediately that they were committed to building it perfectly. And even when there was a slight hitch, they worked to be sure that we get above and beyond what was expected. My highest recommendations!

]]> http://www.ajaxblender.com/josh-farkas.html/feed 0 Mitul Thobhani http://www.ajaxblender.com/mitul-thobhani.html http://www.ajaxblender.com/mitul-thobhani.html#comments Thu, 03 Jun 2010 13:28:40 +0000 ajaxBlender.com http://www.ajaxblender.com/mitul-thobhani.html Portfolio Software Limited
I would like to say that you guys have done an outstanding job with the markup!

]]> http://www.ajaxblender.com/mitul-thobhani.html/feed 0 Mitch Dial http://www.ajaxblender.com/mitch-dial.html http://www.ajaxblender.com/mitch-dial.html#comments Thu, 03 Jun 2010 13:26:33 +0000 ajaxBlender.com http://www.ajaxblender.com/mitch-dial.html We had problems with coding flash menus in Safari. The menus would disappear. htmlBlender fixed this for us and delivered it in 3 hours from the time we placed the order. We are impressed and will use them again.

]]> http://www.ajaxblender.com/mitch-dial.html/feed 0 jFiller http://www.ajaxblender.com/jfiller.html http://www.ajaxblender.com/jfiller.html#comments Mon, 26 Apr 2010 08:08:30 +0000 ajaxBlender.com http://www.ajaxblender.com/?p=1157 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 <head>…</head> tag to connect jQuery framework and jFiller plugin. (Make sure paths to files are correct.)

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.cookie.js"></script>
<script type="text/javascript" src="jfiller.js"></script>
<style type="text/css" media="screen">
    @import url("jfiller.css");
</script>
<script type="text/javascript">
$(document).ready(function() {
    $('form').FillIt();
});
</script>

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

]]> http://www.ajaxblender.com/jfiller.html/feed 1 jShaker http://www.ajaxblender.com/jshaker.html http://www.ajaxblender.com/jshaker.html#comments Thu, 04 Mar 2010 15:18:19 +0000 ajaxBlender.com http://www.ajaxblender.com/?p=1142 jShaker is a simple jQuery plugin which runs a shake, vibrate effect on a selected web page element and all its children emulating an shaker effect.

Why jShaker? Well, we added a new guy to the ajaxBlender team and one of his tasks was to create several sample jQuery plugins. The jShaker is one of them, but we don’t think the script will find a real use. (Actually we’d be surprised if you do. So, please share links with us.) We posted it, because it’s still a good little learning script.

Please note that the script will shake every children element of the parent running jShaker, and obviously the browser may slow down if there are a lot of nested elements, so be careful.  ;)

Features

  1. Light-weight script
  2. Easy to integrate
  3. Works with all modern browsers

How to Use

1.) Download jShaker script. The package already contains the jQuery framework.

2.) Add the following code to your <head>…</head> tag to connect the jQuery framework and the jShaker plugin. (Make sure your paths to the files are correct.)

<script src="../jquery-1.4.2.min.js" type="text/javascript"></script> <script src="../jshaker.js" type="text/javascript"></script>

3.) jShaker plugin will extend the jQuery function so that you can call it on any element such as:

<script type="text/javascript">// <![CDATA[
$(document).ready(function(){
   $('.block').click(function(){
       $(this).jshaker();
   });
});
// ]]></script>

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

]]> http://www.ajaxblender.com/jshaker.html/feed 1 jNiceIt http://www.ajaxblender.com/jniceit.html http://www.ajaxblender.com/jniceit.html#comments Wed, 03 Mar 2010 14:25:23 +0000 ajaxBlender.com http://www.ajaxblender.com/?p=1136 jNiceIt is a jQuery plugin which allows you to customize generic form controls and apply your customized design to them. You may use this plugin to emulate MS Windows, Linux or Apple MacOS controls or your own unique style.

Design of each control can be fully customized via CSS. The plugin supports both fixed and fluid page layouts because it does not use absolute positioning of skinned controls like most jNiceIt alternatives do.

Features

  1. Light-weight script
  2. Easy to integrate
  3. Fully customizable via CSS
  4. Works with all modern browsers
  5. Supports fixed and fluid page layouts
  6. The following controls supported:
    1. Button
    2. Text Input
    3. Check Box
    4. Radio Button
    5. File Upload Input
    6. Select Box
    7. List
    8. Text Area

How to Use

1.) Download jNiceIt script. The package already contains jQuery framework.

2.) Add the following code to your <head>…</head> tag to connect jQuery framework and jNiceIt plugin. (Make sure paths to files are correct.)

<style type="text/css" media="screen">
    @import url("../jniceit.css");
</style>
<script type="text/javascript" src="../jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../jniceit.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    //    This will skin the form with class '.NiceIt'
    $('form.NiceIt').NiceIt();
});
</script>

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

]]> http://www.ajaxblender.com/jniceit.html/feed 4 How to Add Hints & Auto Focus Form Fields using jQuery http://www.ajaxblender.com/howto-add-hints-form-auto-focus-using-javascript.html http://www.ajaxblender.com/howto-add-hints-form-auto-focus-using-javascript.html#comments Fri, 19 Feb 2010 15:52:16 +0000 ajaxBlender.com http://www.ajaxblender.com/?p=1128 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:

screen-1

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

]]> http://www.ajaxblender.com/howto-add-hints-form-auto-focus-using-javascript.html/feed 2 jSnow http://www.ajaxblender.com/jsnow.html http://www.ajaxblender.com/jsnow.html#comments Thu, 17 Dec 2009 15:21:33 +0000 ajaxBlender.com http://www.ajaxblender.com/?p=1119 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.

]]> http://www.ajaxblender.com/jsnow.html/feed 1 Convert Images to Grayscale http://www.ajaxblender.com/howto-convert-image-to-grayscale-using-javascript.html http://www.ajaxblender.com/howto-convert-image-to-grayscale-using-javascript.html#comments Mon, 07 Dec 2009 15:33:03 +0000 ajaxBlender.com http://www.ajaxblender.com/?p=1113 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.

]]> http://www.ajaxblender.com/howto-convert-image-to-grayscale-using-javascript.html/feed 9 Advanced Plugins Development with ExtJS http://www.ajaxblender.com/advanced-plugins-development-with-extjs.html http://www.ajaxblender.com/advanced-plugins-development-with-extjs.html#comments Wed, 02 Dec 2009 18:04:59 +0000 ajaxBlender.com http://www.ajaxblender.com/?p=1109 In this ExtJS tutorial, the author provides helpful tips for successful Ext JS plug-in development. Basic questions are answered such as: “What is an Ext JS plug-in?” and more. Also discussed are advanced methods of adding your own custom functionality to the Ext JS framework. We highly recommend this article to those creating UI’s with ExtJS.

]]> http://www.ajaxblender.com/advanced-plugins-development-with-extjs.html/feed 0