How many of you are developing and/or supporting web applications which provide feedback to the user? If you are working with an older web application in your environment, then there’s a high probability that some pages still use the alert() function in javascript to display errors and/or information to the user.
Alert() might be fine for debugging and/or mocking up a site or application, but there’s no excuse for using it in a working production environment in 2010! Begone Alert()!
Instead we can use the power of jquery and css to skin together some pretty cool effects. For the uninitiated, jquery is a high-speed, performance optimized javascript library which can handle a wide range of tasks for you!
The effect we’re going to focus on, is to create an “error box” which fades in on the page via AJAX, then fades out after a few seconds. While it sounds complicated to put together, using JQuery makes this a trivial task with which to impress your clients!
We’ll break this down into several stages: the CSS, the HTML and then the javascript/JQuery script we need.
1. The CSS – We want to create a box of text within which our error message is displayed. Within our HTML, we need to define a DIV tag which will become the panel upon which our error message is written.
<style>
#errordiv {
width: 550px;
height: 100px;
padding: 10px;
border:1px solid black;
background-color: #9E5205;
}
</style>
2. The HTML – Nothing very complex or difficult is required for modifying our HTML to incorporate this error message box.
//somewhere on your HTML page, drop in the errordiv
<div id="errordiv" style="display:none;">
</div>
<form action="" method="post">
<input type="button" onclick="errormsg('errordiv','LFM for OS10');" />
</form>
3. The javascript / JQuery script. Here’s where the magic happens. We simply hook up the test button with a javascript function to handle the jquery execution.
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
function errormsg(div_id, msg){
$('#' + div_id).text(msg); //set the DIV text to our 'msg'
$('#' + div_id).fadeIn(3000); //fade in the DIV and pause for 3000 ms
$('#' + div_id).fadeOut("slow"); //fade out the DIV in a gentle glide
}
</script>
That’s it! The javascript function takes in as a parameter the DIV tag to use, and the error text to display in the DIV. Once we have that, JQuery handles the rest of the heavy lifting for us.
Popularity: 4% [?]
{ 1 trackback }
{ 0 comments… add one now }