Jquery Tutorial – Animated Callbacks
Whilst working on my content manager I wanted to create a way to show a user if an action had been successful or not. This tutorial will show you how you can quickly and easily implement success callbacks on your own web projects. The code is very versatile and lightweight, its literally just a couple of lines of Jquery, and it gives an awesome effect. To see the code in action check out the demo.
What You Need
to start you will need a copy of the jQuery library which you can download from the jQuery website. if you aren’t familiar with jQuery check out the documentation for a full brief.
The HTML
To begin we want to create a page. we will call it callback.php put the following code into the page:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="callback.js"></script>
<style type="text/css">
body {
font-family:helvetica;
}
#success {
background-color:#BDD994;
border:1px solid #85C329;
color:#587506;
display:block;
font-weight:bold;
padding:5px;
text-align:center;
}
#failure {
background-color:#F04848;
border:1px solid #C40E0D;
color:#B01212;
display:block;
font-weight:bold;
padding:5px;
text-align:center;
}
</style>
</head>
<body>
<?php if($_GET['success'] == true) {?> <div id="success">Successfully done something</div> <?php }?>
<?php if($_GET['failure'] == true) {?> <div id="failure">Failed to do something</div> <?php }?>
</body>
</html>
All we are doing here is attaching a copy of the query library and another javascript file, I will explain shortly. Then we add some styling information (ideally you want to put this into a separate css file).
Further down the page we then have a couple of lines of PHP, all these are very similar, all they are doing is checking is a $_GET parameter is being passed through, either with a value of ?success=true, or of ?failure=true if the parameter is passed through then a dive will be displayed. Of course if nothing is displayed the page will be blank.
The Jquery Code
If we send through one of the specified get parameters, we only want to display the div with the message for a short period of time, then have it disappear again. This is where the jQueys animate() function comes into it own. Create a new js file, call it callback.js then insert the following code.
$(function() {
//show sucess message then fade out
$('#success').animate({ opacity: 1 }, 2000 ).animate({ opacity: 0.0 }, 2000 ).slideUp('fast');
//show failure message then fade out
$('#failure').animate({ opacity: 1 }, 2000 ).animate({ opacity: 0.0 }, 2000 ).slideUp('fast');
});
The code starts with an on load function, then we specify the div we are talking about either “#success” or “#failure“. we then fade the div slowly, then slide up the div.
That’s all their is to it. If you wanna see the code in action check out the demo, or download the sourcecode. Happy coding!
