Last week I started a series of tutorials about using some javascript tools in your website and I’m continuing this week with Flip, a jQuery plugin that gives the effect of a piece of paper flipping to show alternative content on the other side.

What will we use it for?

It’s quite neat as it can be used for a whole variety of tasks – anything that you would like to change the content of with a neat transition.
For this tutorial though I’m going to use it to make an effect that I thought of a while ago – to deal with responses from an AJAX form submission.

How to do it

Unlike most of my other tutorials on ProgTuts I’m going to use jQuery to handle the AJAX side of things because we need to have that package included to use the Flip extension anyway. The form I’m going to use is going to be really very simple – it will just send a name and age and the corresponding action page will just display them. Of course, this tutorial isn’t about making an AJAX form; it’s about making the Flip style the transaction between form and action page.

There are a variety of procedures to put together to make a nice effect but the one I’m going to go with is this:
Send Form -> Show Loading -> FLIP -> Show results

For a more detailed form that would need more time in the action page (such as a login form) I would probably do a flip between sending the form and showing the loading image – to avoid a messy set of transitions call the flip to the loading image before sending the AJAX call.

What code is needed?

Not all that much!
First we need to make sure all our javascript is loaded, as well as our stylesheet. The stylesheet is pretty flexible but can be easily messed up so I’ll mention that a wee bit later, but for the moment we’ll just link it all in the head section of the page:

<link rel="stylesheet" href="style.css" type="text/css" media="screen" title="Style">
<script src=”http://www.google.com/jsapi” />
<script type="text/javascript">
  // Load jQuery
  google.load("jquery", "1");	
</script>
<script type="text/javascript" src="jquery-ui.js” />
<script type="text/javascript" src="jquery.flip.js” />

Note here that I’m using the Google javascript API to load jQuery – this is an incredibly useful tool so I recommend you read into it and use it! It’s also important to make sure the jquery.flip file is linked last.

Next, in the body section of the page we need our code for the form; as I said I’m just going to make a very simple form and just set the action attribute to call a javascript function. We will store this inside a div which we will call flipBox – this is the div that will actually be flipped by the jQuery plugin.

<div id="flipBox" class="flipBox">
	<form id="flip" class="flip" name="flip" action="javascript: send();">
		<label for="name">Name: </label><br />
		<input type="text" id="name" class="textbox" name="name" /><br />
		<label for="age">Age: </label><br />
		<input type="text" id="age" class="textbox" name="age" /><br />
		<input type="submit" id="submit" name="submit" class="button" value="Send" />
	</form>
</div>

The last thing we need on this page is the actual javascript!

<script type="text/javascript">
	function send()
	{
		$.ajax({
			type: "POST",
			url: "action.php",
			data: $("#flip").serialize(),
			beforeSend: function()
			{
				// Display something when the AJAX is loading.  This could be an image or just ext...
				$('#submit').innerHTML = "Loading...";
			},
			success: function(html)
			{
				var response = html || "No response text";					
				$("#flipBox").flip({
					direction: 'lr',
					color: '#00FF33',
					speed: 400,
					content: response
				});
			},
		        error: function()
			{
				// Display something when the AJAX fails.  This could be an image or just text...
				$("#flipBox").flip({ direction: 'tb', color: '#FF0000', content:"Failed to load page correctly!" }); 
			}
		});
	}
</script>

The code here is fairly standard for a javascript library ajax call so I won’t go into too much detail, but the important part comes in the success section:

$("#flipBox").flip({
	direction: 'lr',
	color: '#00FF33',
	speed: 400,
	content: response
});

This is the section that is needed to actually flip our div.
It’s quite straightforward – “#flipBox” is our div containing the form, so we’re calling the flip() function on it and giving that function a few arguments:

  • direction: ‘lr’ – flip from left to right (alternatives are rl, tb, bt…try no prizes for working out what they mean…)
  • color: ‘#00FF33’ – change the colour of the div to the given colour. This is a nice was to show success or failure and just a general status change.
  • speed: 400 – specifies how many milliseconds it takes to carry out the flip.
  • content: response – sets the content of the div to the response variable we made the line above this section.

You can see that I’ve also made a different style of flip if there is an error in the AJAX call.
And that’s pretty much it. Easy!
There are some other attributes etc. available which you can explore on the Flip homepage but those are the most important imho.

The final thing we need to do is make our page for the AJAX function to call – some simple PHP for that one:

<?php
	if(!empty($_POST['name']) && !empty($_POST['age']))
	{
		?>
		The name supplied is: <?=$_POST['name'];?><br />
		The age supplied is: <?=$_POST['age'];?>
		<?php
	}
	else
	{
		?>
		You didn't fill in the form....
		<?php
	}
?>

Obviously not complex, but neither is this example ;)

Styling

As promised, I’ll try and describe a little bit about the styling.
The code I’ve used is this:

#flipBox {
	width: 500px;
	height: 200px;
	margin: 0 auto;
	background-color: #999999;
	color: #fff;
	font-weight: bold;
	font-size: 24px;
}
 
	#flipBox > * {
		padding: 15px;
	}

In real terms you won’t need much more than that. I haven’t tried it with floated layouts but I would guess it doesn’t work – maybe if anyone tries it they can post a comment up telling me of it’s success or failure.
The one thing that I’ve found doesn’t work is the min-height or min-width attributes – this messes up the transition of it flipping so I recommend you avoid it.

I’ll add anything I find about the styling to this section, but as I said before it is pretty flexible, just try to avoid restricting sizes and it should work perfectly.

Conclusion

Dynamic changes are commonplace in websites these days, so make them visually effective! The only thing I’d say is that personally I’d hate it if my entire webpage flipped. It might be appealing the first 2 or 3 times but would get old fast! Try to only do it with small sections which are changing on user input (such as a form!). Also try and keep the speed pretty fast; I don’t like waiting and neither do most of your site visitors.
For such a simple little piece of additional code, using the jQuery Flip plugin really is a nice way of adding a little extra to your forms.

As always, leave any comments and I’ll try and reply and if you have any discussion or whatever, head on over to the forum and share your thoughts and skills.

View the Demo Download the ZIP file

Related Posts

More?

If you enjoyed this post, please consider promoting it.
  • Digg
  • del.icio.us
  • StumbleUpon
  • Design Float
  • Reddit
  • Mixx
  • Technorati

Remeber to subscribe to the feed and get future articles delivered to your feed reader.

If you want to discuss this tutorial or any other thoughts you have then you can do so over on our fourm.

Comments


No comments yet...

Leave a Comment

(required)

(required)