Slide In and Slide Out Status Message Box using jQuery

Mar 24, 2009

Slide In and Slide Out Status Message Box using jQuery

Categories: Featured, JavaScript, jQuery

Tags: JavaScript, jQuery

Written By: admin

Introduction

This post help beginners to learn and implement some jQuery Web Applications. Develop Slide In and Slide Out effect of Status Message Box using simple jQuery functions. Here in this tutorial I have used some events and function to get the result and extensively used CSS to get some beautiful look to the Message Box.

Ingredients Used

jQuery
Cascading Style Sheets (CSS)
Photoshop (To Crop Images)

Successfully Tested In

I have tested this simple snippet in Mozilla Firefox 3, Google Chrome 1.0.154.53 and Internet Explorer 7

About the application

As I have stated above, this will help beginners in understanding simple concepts of jQuery and how we can built simple reusable web apps and plugin’s. I would like to say, this is a very good example where in which you can start learning jQuery. Daily or weekly I would like to post jQuery related articles which help us in implementing good and awesome web apps in our projects.

My basic idea behind this is, when user mouse overs on thumbnail images, I am capturing image ‘alt’ attribute value into a rounded corner message box (div) which has been built using Nifty Corners, and given respective animated effect to slide in and slide out accordingly. This will help users to know which image has been selected. The message box is showing in the top center of the page.

HTML Code

Filename: messagebox.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Slide In and Slide Out Status Message Box using jQuery</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<!-- Below is the jQuery JavaScript, which you need to include (this is mandatory) -->
<script type="text/javascript" src="js/jquery.js"></script>
<!-- Below is the messagebox JavaScript, this is a custom script written to get the effect -->
<script type="text/javascript" src="js/messagebox.js"></script>
</head>
<body>
<!-- Message Box Div -->
<div id="messagebox" style="display:none">
	<b class="rtop">
	  <b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b>
	</b>
	<div id="statusText"></div>
	<b class="rbottom">
	  <b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b>
	</b>
</div> 
<!-- Message Box Div -->
 
<!-- Container Div -->
<div id="container">
  <div id="network">
    <div id="header_title">Network of Developer Snippets</div>
    <div id="thumbimages">
		<a href="http://www.developersnippets.com" title="Developer Snippets"><img src="images/01.png" alt="Developer Snippets" width="121" height="83" border="0" class="req_img" /></a>
		<a href="http://www.developersnippets.com/techvideobytes/index.php" title="Tech Video Bytes"><img src="images/02.png" alt="Tech Video Bytes" width="121" height="83" class="req_img" /></a>
		<a href="http://www.wittysparks.com/" title="Witty Sparks"><img src="images/03.png" alt="Witty Sparks.com" width="121" height="83" class="req_img" /></a>
		<a href="http://www.snehah.com/" title="Snehah"><img src="images/04.png" alt="Snehah.com" width="121" height="83" class="req_img" /></a></div>
	<div style="clear:both"></div>
	<div id="footer_text">Mouse Over on the images to see a 'message box' sliding in</div>
  </div>
</div>
<!-- Container Div -->
 
</body>
</html>

CSS Code

Filename: styles.css

/* 
************************************
Author : Vivekanand
URL : http://www.developersnippets.com
************************************
*/
 
*{
	padding:0;
	margin:0;
}
 
body {
	font-family:Arial, Helvetica, sans-serif;
	padding:0;
	margin:0;
	font-size: 10px;
	color: #000000;
}
 
.req_img {
	border: 1px solid #817d7d;
	margin-left: 12px;
}
 
.img {
	border: 1px solid #817d7d;
	margin-left: 12px;
}
 
.head_title {color: #000000}
 
#network {
	float: left;
	width: 570px;
	margin-top: 200px;
}
 
#container {
	width: 570px;
	margin: auto;
}
 
#header_title {
	float: left;
	font-size: 18px;
	color: #000000
}
 
#thumbimages {
	width: 560px;
	border: 1px solid #817d7d;
	float: left;
	background-color: #595353;
	margin-top: 7px;
	padding: 10px;
}
 
#footer_text{
	text-align:right;
	font-size: 10px;
	color: #000000;
}
 
div#messagebox{ margin: 1% 40%;background: #595353; position:absolute; text-align:center; width:200px;}
div#statusText{ padding:20px; font-size:12px; color:#FFFFFF}
/* Nifty Corners (Rounded Corners)*/
b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;
    overflow: hidden; background: #595353}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}
/* Nifty Corners (Rounded Corners)*/

JavaScript Code

Filename: messagebox.js
Work Log: Updated on 25-Mar-09

$(document).ready(function(){
		$(".req_img").fadeTo("slow", 0.5); // When page loads, set the opacity of images to 50%
		$(".req_img").hover(function(){
			$(this).fadeTo("slow", 1.0); // On mouse hover, set the opacity of images to 100%
			$("#statusText").text($(this).attr('alt')); // Capture the 'alt' attribute values of images
			$("#messagebox").stop().animate({opacity: "show", top: "0"}, "slow"); // show message box with slow opacity
		},function(){
			$(this).fadeTo("slow", 0.5); // On Mouseout set the opacity to 50%
			$("#messagebox").stop().animate({opacity: "hide", top: "-300"}, "slow"); // hide message box with slow opacity
		});
});

Preview and Download

By looking at the above code, I think you guys might be eager to view the demo of the same, then click here for the same. And if you would like to download the whole then please do click here.

Articles which you would like to read:

Mike Dedmon Says:
March 24th, 2009 at 6:36 pm

I’m definitely a beginner with jquery. After playing with the demo, I noticed that the animation “builds” when I hover/no hover quickly. I’ve seen someone use the “stop()” function in other tuts. Wouldn’t you use that here? How would you use it? I’ve tried putting it inline before the animate() and .fadeTo() functions, but it doesn’t seem to work completely right. Eventually the messagebox becomes hidden and I can’t get it back without a refresh.

Any ideas?

admin Says:
March 24th, 2009 at 7:17 pm

Hi Mike,

Thanks for your valuable comment, will check on it and will let you know Mike.

Thanks,
Vivek

admin Says:
March 25th, 2009 at 10:18 am

Here is the entire code with “stop()” function

$(document).ready(function(){
$(“.req_img”).fadeTo(“slow”, 0.5); // When page loads, set the opacity of images to 50%
$(“.req_img”).hover(function(){
$(this).fadeTo(“slow”, 1.0); // On mouse hover, set the opacity of images to 100%
$(“#statusText”).text($(this).attr(‘alt’)); // Capture the ‘alt’ attribute values of images
$(“#messagebox”).stop().animate({opacity: “show”, top: “0″}, “slow”); // show message box with slow opacity
},function(){
$(this).fadeTo(“slow”, 0.5); // On Mouseout set the opacity to 50%
$(“#messagebox”).stop().animate({opacity: “hide”, top: “-300″}, “slow”); // hide message box with slow opacity
});
});

I will update the code accordingly…. Once again, thanks for your valuable comment.