Using Spry to Show Clean Error Messages

Today’s post is pretty simple. For those of you who would like to jump ahead, here is your link. Website error messages are always something that seem a bit clunky on most websites. They either show up as crappy looking alert boxes, or mess up the pages design somehow. I would like to show you an easy way to display nice-looking error messages, using the “fade” effect from you guest it, Spry. This is really simple to do, and in my example I show how you can create a function in PHP, as well as use javascript to display your messages.

Fade via Javascript:
Calling a spry effect is very simple. You first need to create a variable which sets up the fade parameters, and then call that variable again and start the fade. It goes a little something like this:


var error_fade = new Spry.Effect.Highlight('errorBox', {duration: '1500', from:'#ffffff', to:'#ff3300', toggle: true});
error_fade.start();


What’s going on here? In english it would read like this. Create the variable “error_fade” and attach a spry effect to it. Make the effect effect the div on my page with the id “errorBox”. Fade the effect for 1500 milliseconds, starting with the color white and fading to a reddish color. The great thing about setting it up in the variable “error_fade” is that I can call it at anytime. I could set up another variable called “success_fade” and give it a different set of parameters. Actually, I end up doing this with php.

Fade via php function:
Obviously the php isn’t going to do the fade. All it will do is call the fade via a function. The great thing about this, is you could put this function in a class and use it to display any type of message, error or not throughout your application. On an app I am currently working on, this function is in my main file of functions used throughout the site. When I want to show a fade, for example on a successful form submission, I will call it. To see an example, submit the form in my example. You can put anything for your email, I am not validating it’s structure. Here is the function that is being used:


function success($message,$time,$from, $to) {
echo '<div class="success" id="suc">'."\n";
echo "<p>$message</p>";
echo '</div>'."\n".'
<script type="text/javascript">
var sts_fade = new Spry.Effect.Highlight("suc", {duration: "'.$time.'", from:"'.$from.'", to:"'.$to.'"});
sts_fade.start();
</script>';
}


Then you can call the function like this, and set all the parameters you want. For the success box on my example:


$message = "<h2>Your message was sent!</h2><p>A representative will contact you as soon as possible!</p>";
success($message,'1500','#f5fa73','#cfebf7');


Using this function is very easy. I can call it at anytime, reusing the code for you recyclers out there, and being able to set the parameters however I would like. One function to handle all of my needs. Well, I hope you enjoy. If you have any problems adding it to your site, let me know. Let’s all make error messages friendlier, and better looking.

ahead nero uk Cheap Soft Downloads ahead software download nero uninstaller ahead cost nero software Cheap Soft Downloads :: Buy Cyberlink PowerDVD 8 Ultra ahead nerovision express 3.1.0.0 ahead nero 5 serial number Cheap Soft Downloads :: Buy Ahead Nero 9 ahead nero burning room download ahead nero express download Cheap Soft Downloads :: Buy McAfee Total Protection 2009 windows ahead nero

 Subscribe

Subscribe via email: (Delivered by FeedBurner)

This entry was posted on Wednesday, April 9th, 2008 at 2:27 pm and is filed under Code, Featured. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.