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! Mon, 02 May 2011 07:38:01 +0000 http://wordpress.org/?v=2.8.5 en hourly 1 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 3 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 11 MooRTE http://www.ajaxblender.com/moorte.html http://www.ajaxblender.com/moorte.html#comments Mon, 09 Nov 2009 13:07:31 +0000 ajaxBlender.com http://www.ajaxblender.com/?p=1009 MooRTE is a rich text editor control using MooTools JavaScript framework. The script is light-weight, customizable and contains a lot of options for its skinning.

]]> http://www.ajaxblender.com/moorte.html/feed 1 NiceForms http://www.ajaxblender.com/niceforms-javascript-forms-customization-script.html http://www.ajaxblender.com/niceforms-javascript-forms-customization-script.html#comments Thu, 05 Nov 2009 10:21:51 +0000 ajaxBlender.com http://www.ajaxblender.com/?p=973 Niceforms is a script that will replace the most commonly used form elements with custom designed ones. You can either use the default theme that is provided or you can even develop your own look with minimal effort.
The script does not require any JavaScript framework.

]]> http://www.ajaxblender.com/niceforms-javascript-forms-customization-script.html/feed 3 Virtual Keyboard http://www.ajaxblender.com/jquery-virtual-keyboard.html http://www.ajaxblender.com/jquery-virtual-keyboard.html#comments Tue, 03 Nov 2009 14:13:30 +0000 ajaxBlender.com http://www.ajaxblender.com/?p=959 This script is a reusable system for adding a graphical keyboard interface to text fields, password fields and textareas so they can be filled with mouse only. It also adds easy access to special characters your existing keyboard may not otherwise have the ability to generate.

]]> http://www.ajaxblender.com/jquery-virtual-keyboard.html/feed 1 Masked Input http://www.ajaxblender.com/masked-input.html http://www.ajaxblender.com/masked-input.html#comments Tue, 13 Oct 2009 13:50:47 +0000 ajaxBlender.com http://www.ajaxblender.com/?p=768 This is a masked input plugin for the jQuery javascript library. It allows a user to more easily enter fixed width input where you would like them to enter the data in a certain format (dates, phone numbers, etc.)

]]> http://www.ajaxblender.com/masked-input.html/feed 0 Custom Select Boxes http://www.ajaxblender.com/custom-select-boxes.html http://www.ajaxblender.com/custom-select-boxes.html#comments Mon, 12 Oct 2009 14:43:57 +0000 ajaxBlender.com http://www.ajaxblender.com/?p=758 This script for jQuery allows creating fully customizable SELECT boxes. The script works properly in all major browsers and displays a generic selectbox control incase browser does not support JavaScript.

]]> http://www.ajaxblender.com/custom-select-boxes.html/feed 3 Ajax Username Availability Checker Using MooTools http://www.ajaxblender.com/ajax-username-availability-checker-using-mootools.html http://www.ajaxblender.com/ajax-username-availability-checker-using-mootools.html#comments Fri, 02 Oct 2009 13:14:19 +0000 ajaxBlender.com http://www.ajaxblender.com/?p=525 There a many examples of egregious usages of Ajax out there but every once in a while you find a great usage of Ajax. One great usage is the username availability checker. Why make the user submit their form if you can just use Ajax to let them know if it’s available right away? Read this tutorial to learn how you can implement a username available checker using Mootools.

]]> http://www.ajaxblender.com/ajax-username-availability-checker-using-mootools.html/feed 0 Amazing Auto Completion Component Using Mootools http://www.ajaxblender.com/amazing-auto-completion-component-using-mootools.html http://www.ajaxblender.com/amazing-auto-completion-component-using-mootools.html#comments Fri, 02 Oct 2009 12:47:03 +0000 ajaxBlender.com http://www.ajaxblender.com/?p=516 Learn how to create a cool-looking auto completion control with a known UI style of Facebook.

]]> http://www.ajaxblender.com/amazing-auto-completion-component-using-mootools.html/feed 0 Checkboxes, Radio Buttons, Select Lists, Custom HTML Form Elements http://www.ajaxblender.com/checkboxes-radio-buttons-select-lists-custom-html-form-elements.html http://www.ajaxblender.com/checkboxes-radio-buttons-select-lists-custom-html-form-elements.html#comments Fri, 02 Oct 2009 12:03:44 +0000 ajaxBlender.com http://www.ajaxblender.com/?p=502 Have you ever wanted to use your own images for checkboxes, radio buttons or select lists? Read this tutorials to find out how to easily customize your form controls using Mootools framework.

]]> http://www.ajaxblender.com/checkboxes-radio-buttons-select-lists-custom-html-form-elements.html/feed 0