Understanding JavaScript Variables

The variable is one of the most fundamental concepts in any programming language. The first step towards becoming proficient in JavaScript is having a good understanding of variables.

Variables can be a little confusing, especially to newbie programmers. Even people who are familiar with variables from other programming languages may find JavaScript’s take a little strange. The good news is that JavaScript variables are actually easy to understand.

This tutorial is going to help you achieve just that. We shall start from the basics, and progress to the trickier parts.
[click to continue…]

Using Try…Catch in JavaScript

Errors are almost inevitable in JavaScript programs. As a JavaScript developer, it is your responsibility to anticipate errors and handle them effectively. This will ultimately help you to create programs which are robust, reliable and efficient. One simple way of handling errors is through try…catch statements.

A try…catch statement is a programming mechanism which enables you to test your code for possible errors, and carry out certain actions in case an error occurs. It is a feature which is common in many programming languages, and in some like Java, it is sometimes mandatory. In JavaScript, the basic anatomy of a try…catch statement is as follows:

try{

}
catch(error){

}
finally{

} 

[click to continue…]

A Modern Reintroduction To AJAX

AJAX is one of the most interesting web development paradigms emerged a few years back(around 2005). Since the term was first coined,( here ) AJAX has become commonplace in almost all web applications. Overtime, Ajax got many manifestations and applications. Some of the interesting Ajax based implementations include ‘infinite’ scrolling, live validations of usernames, ‘auto-suggest’ boxes and so on. Ever since Ajax was introduced long back, the technology has evolved beyond its earlier definition. For example, the data interchange format for the Asynchronous communication has geared towards JSON rather than the verbose XML (the X in Ajax is for XML).
[click to continue…]

The Most Indispensable jQuery Form Validation Reference Guide

Using a library to do form validation can save lots of your development time. Being a tested and proven library guarantees it. jQuery Form validation library is the most popular validation library. This post collects all my notes and references on jQuery Form validation library. This includes a large bunch of sample code and a complete reference guide to all the built-in validation rules in the library.
[click to continue…]

How to Use the Dreamweaver Form Validation Feature

dreamweaver form validation Sometimes, you may feel frustrated when you look at the form submissions that you get from a web form and find out that the respondents did not fill in some crucial details. This calls for some details on the form to become mandatory to fill in. for example, a form that is used to subscribe visitors to regular newsletters via email will be of no use if the user does not enter their email address. In case you are shipping products to the user, it will be necessary that you make sure that they enter their address on the form.
[click to continue…]

jQuery Popups

JavaScript popups are handy to display help information or to zoom in an Image.

There are different types of Popups. The first type is a new browser window opened using the window.open() function. Such types of Popup windows were overused and exploited by many websites during the earlier days of the web.This resulted in the later versions of browsers blocking popup windows. Eventually, popup windows became almost extinct now. Automatically opening popup windows is considered a very bad practice.

Div based popups

Div is a block of content enclosed with the <div> and </div> tags. Unlike the browser window popups, div based popups are less intrusive and are often very useful.

There are a number of ways to use a popup.

Tooltips

JavScript tooltip

Tooltips are useful pieces of information displayed usually on moving the mouse cursor on top of an element.
(like an image or a link). The qTip jQuery plugin is good to show tool tips.

jQuery is a great JavaScript Library. You can learn it here

Here are the steps to create some cool tool tips:

For the elements that you need the tooltip, give a unique id attribute. For this example, we add an id attribute to the hyper link like this:

<a href='#' id='link_example1'>The tooltip Link</a>

Now, add the following code to your page within the <head> and </head> tags:

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="jquery.qtip-1.0.0-rc3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
    $('#link_example1').qtip(
    {
     content:'A simple tooltip for the link',
     style: {name: 'dark', tip: 'topLeft'}
    });
});
</script>

The first line adds jQuery to to your page. If you already have jQuery included in your page, no need to add that line.
The second line adds the tooltip library qTip. (You can download the script from here and don’t forget to upload the script to your website )

The line below creates the tooltip:

$('#link_example1').qtip(
    {
     content:'A simple tooltip for the link',
     style: {name: 'dark', tip: 'topLeft'}
    });

As you might have noticed, this attaches the tooltip to the element with the unique ID link_example1

See the jQuery tooltip demo here

The qTip jQuery plugin has a huge set of customizable options. See the documentation.

Popup on clicking a link

Colorbox is another good Popup jQuery plugin. The example below shows how to open a modal popup when a link is clicked

First, the link:

<a href='content_help.html' id='link_content' >Help Link</a>

Notice that the link points to ‘content_help.html’ we want to open ‘content_help.html’ in a popup.

Now, the popup code:
Put the code below between <head> and </head> tags of your page.

<link media="screen" rel="stylesheet" href="colorbox.css" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="jquery.colorbox-min.js" type="text/javascript"></script>

<script type="text/javascript">
    $(function()
    {
        $('#link_content').colorbox({opacity:0.3});
    });
</script>

Notice that the ID of the link is link_content.

The code below opens the popup.

$('#link_content').colorbox({opacity:0.3});

You can provide any valid link (like an image ) in he href attribute of the link. The colorbox plugin grabs it and puts it in the popup.

See the Popup demo here

For more options and customization, see the colorbox documentation page

Opening a popup on loading the page

We can use Colorbox plugin to open a popup on loading the page as well.
Here is the code (put it inside <head> and </head> tags of your page ) :

<link media="screen" rel="stylesheet" href="colorbox.css" />
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="jquery.colorbox-min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
    $(window).bind('load',
        function(e)
        {
            $.colorbox({opacity:0.3, href:"offer.html"});
        });
});
</script>

The code opens the page “offer.html” in the popup:

$.colorbox({opacity:0.3, href:"offer.html"});

See the popup demo here

Delayed popup

A slight change in the code above can delay the popup for a few seconds.

$(function()
{
$(window).bind('load',
    function(e)
    {
    window.setTimeout(function()
        {
         $.colorbox({opacity:0.3, href:"offer.html"});
        }, /*timeout->*/ 2000);
    });
});

Delayed popup demo

You can download the samples here

Doing real-time calculations in a form using JavaScript

In this tutorial, we will learn how to perform calculations using JavaScript. It is quite often required to do calculations online in order forms, request quote forms and the like. This tutorial will show you how to use different form elements like drop-down list, radio button, check box and text box in a calculation.

We will be using a ‘cake order form’ as an example. As the user makes selections in the form, the total price is calculated in real time.
[click to continue…]

A Form Design Software that is Quick, Easy and Simple.

HTML form design can often turn to be a tedious task.

First, you need to design the HTML page that contains the form using an HTML editor.

Next, you have to create a set of input validations using JavaScript. The final step is to create a form processor script that collects the data submitted in the form, validates it again and then sends it as email/stores in database or a file.

Finally, you have to test and test to ensure that the form looks same in all browsers and that the form works as expected.

Imagine, if there is a form design software that can take all of these tedious work from you, won’t you run and grab one copy?

Simfatic Forms is the tool that you are looking for.
[click to continue…]

How to make a web form and get it online quickly

Coding a web form is a long, tedious process. However, there is an easier way.

Using Simfatic Forms you can quickly create feature-rich web forms without coding. You just have to design the form using the visual editor; Simfatic Forms generates all the required code. You don’t have to worry about coding HTML, CSS JavaScript or PHP.

Even if you know coding, and do forms regularly, Simfatic Forms saves you all the time spent on coding and lets you focus on the form design.

This tutorial takes you step-by-step through the process of creating a web form using Simfatic Forms and getting it online.

First, download a Free trial version of Simfatic Forms.
[click to continue…]