hi guys,
Today i’ll show you how to create an interactive action for some forms using jQuery. Actually when you want to create a good UI you should make use of every single pixel in your page. Also try to use some interactive action form displaying and hiding your forms.

Here we are gonna use

fadeIn();

and

fadeOut();

actions to do so. Actually this design can be used for example to hide and display login forms or creating any usable forms.

first i’ll show you the mark up below


<html>
	<head>
		<title>Creating Interactive Forms Using jQuery</title>
		<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
		
		
		<link rel="stylesheet" type="text/css" href="demos.css" />
		
		<style>
			#form{
				display:none;
				height : 200px;
				width:200px;
				color: black;
				background-color : black;
			}
			
			#mask {
				display: none;
				background: #000; 
				position: fixed; left: 0; top: 0; 
				z-index: 10;
				width: 100%; height: 100%;
				opacity: 0.8;
				z-index: 999;
			}

		</style>
		
	<head>
	<body>
		<button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all">
			<span class="ui-button-text">Click Me</span>
		</button>
		
		<center>
			<div id="form">
			</div>
		</center>
	</body>
</html>

as you can see above there is a mask that is hidden, the mask will be the background for the form that will appear when we click on the button.

Then i’ll list the click button action.
When we click on the button the mask must be visible, and the form will be shown above it. So first we will append our markup with the mask element. Then use the

fadeIn();

to display our form.

fadeIn();

takes one parameter the time for the form to be shown in m seconds. Also we’ll use the

fadeIn();

to display the mask after we have appended it’s markup element.
Here we have another action that we must pay attention for, when the user clicks anywhere on the mask element. First its markup must be remove then the mask and the form must be hidden and here we’ll use the

fadeOut();

to do so.

Here’s the button click action code

$(function(){
				
				$("button").button();
				
				$("button").click(function(){
				
					//display the form area
					$("#form").fadeIn(1000);
					
					//add the mask to the html body
					$('body').append('<div id="mask"></div>');
					
					//display the mask
					$('#mask').fadeIn(1000);
				});
				
				$('#mask').live('click', function() { 
				 //hide the mask and form
				 $('#mask , #form').fadeOut(300 , function() {
						//remove the mask to display the normal html page without <div id=""></div>
						$('#mask').remove();  
					})
				});
			});

hope you enjoyed this tutorial, and finally here’s the full code


<html>
	<head>
		<title>Creating Interactive Forms Using jQuery</title>
		<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
		
		
		<link rel="stylesheet" type="text/css" href="demos.css" />
		
		<script type="text/javascript">
			$(function(){
				
				$("button").button();
				
				$("button").click(function(){
				
					//display the form area
					$("#form").fadeIn(1000);
					
					//add the mask to the html body
					$('body').append('<div id="mask"></div>');
					
					//display the mask
					$('#mask').fadeIn(1000);
				});
				
				$('#mask').live('click', function() { 
				 //hide the mask and form
				 $('#mask , #form').fadeOut(300 , function() {
						//remove the mask to display the normal html page without <div id=""></div>
						$('#mask').remove();  
					})
				});
			});
		</script>
		
		<style>
			#form{
				display:none;
				height : 200px;
				width:200px;
				color: black;
				background-color : black;
			}
			
			#mask {
				display: none;
				background: #000; 
				position: fixed; left: 0; top: 0; 
				z-index: 10;
				width: 100%; height: 100%;
				opacity: 0.8;
				z-index: 999;
			}

		</style>
		
	<head>
	<body>
		<button class="ui-button ui-button-text-only ui-widget ui-state-default ui-corner-all">
			<span class="ui-button-text">Click Me</span>
		</button>
		
		<center>
			<div id="form">
			</div>
		</center>
	</body>
</html>
Advertisements

4 responses »

  1. url forward says:

    Write more, thats all I have to say. Literally, it seems as though you relied on the
    video to make your point. You clearly know what youre talking about, why waste your intelligence
    on just posting videos to your blog when you could be giving us something enlightening to read?

  2. Thank you a lot for sharing this with all folks you actually know what you
    are talking approximately! Bookmarked. Please also seek advice from my site =).
    We may have a link trade arrangement between us

  3. hello there and thank you for your info – I have
    certainly picked up anything new from right here. I did however expertise some
    technical points using this site, as I experienced to reload the web site lots
    of times previous to I could get it to load correctly.
    I had been wondering if your hosting is OK? Not that
    I am complaining, but slow loading instances times will sometimes affect
    your placement in google and could damage your high quality score if ads
    and marketing with Adwords. Well I’m adding this RSS to
    my email and could look out for much more of your respective interesting
    content. Ensure that you update this again soon.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s