Share

Slide In and Slide Out Status Message Box using jQuery

On 03.24.09, In Featured, JavaScript, jQuery, by admin
Tags: ,
Advertisement

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.

 

messagebox

 

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

<!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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75

/* 
************************************
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

1
2
3
4
5
6
7
8
9
10
11

$(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.

Related Entries...

admin

Visit Authors Website  |  All Articles From This Author

Share

World News:

4 Responses

Mike Dedmon
03.24.09

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
03.24.09

Hi Mike,

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

Thanks,
Vivek

admin
03.24.09

Hi Mike,

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.

Thanks,
Vivek

Bradley Reed
03.24.09

How could I call this as a simple javascript function to say something like “Login Success!” when the login is successful.

Leave Your Response

* Name, Email, Comment are Required
Advertisement

Daily Favorite Design & Development News

Daily Favorite Design & Development News

Online Sponsors

Start Foreign Exchange Trading today with the Forex Affiliate Program and also you can have access Online Forex News to know what happens every single moment.


Forex Floor