You are here: Home

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…]

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

{ 0 comments }

jQuery: applying selector within 'this'

jQuery

When you handle events for a particular element, it is often required to make a change only within children of the element. Here is how to do it.

Read the full article →

Doing real-time calculations in a form using JavaScript

Javascript Form Handling

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 […]

Read the full article →

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

HTML Forms

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 […]

Read the full article →

How to make a web form and get it online quickly

HTML Forms

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 […]

Read the full article →

Simfatic Forms Validation: save your time coding

HTML Forms

This is in continuation of the JavaScript form validation script explained here. Simfatic Forms is a complete web form development software. You can create forms add form validations, select your options for server side processing, generate the script and install the form on the web server. No coding required. This page takes you through some […]

Read the full article →

JavaScript Form Validation Script: More features

HTML Forms

This is in continuation of the JavaScript Form Validation script in this page. In this page, we will see some of the advanced features of the script. Showing all the form validation errors together in a message box If you want to show all the error messages together, then just call the EnableMsgsTogether() function as […]

Read the full article →

JavaScript Form Validation : quick and easy!

HTML Forms

Using client side JavaScript is an efficient way to validate the user input in web forms. When there are many fields in the form, the JavaScript validation becomes too complex. The JavaScript class presented here makes the form validations many times easier.

Read the full article →

Using the window.close method

JavaScript Popup Windows

It may be needed that you need to give a close link in the popup you created. The window.close () method could be used to close a window. However, there are certain security restrictions for using the close() method. The close method closes only windows opened by JavaScript using the open method. If you attempt […]

Read the full article →