Sunday, May 16, 2010

Twitter style Flash message with Jquery

5/16/2010

Twitter like styling applications are the most popular these days on the web. So lets try one of those. Here we will try to create the Twitter style flashing message. It hardly take 2 minutes to develop the script and thats too without any horrible prograaming.
Enjoy the live demo.


Live Demo Download Script

JQuery Code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
 $('#button').click(function()
 {
  $('#flashContent').html($('#uname').val());
  $('#flashContent').fadeIn("slow", function ()
  {
   setTimeout(function(){$('#flashContent').fadeOut("slow", function ()
   {
    $('#flashContent').remove();
   });} ,2000);
   
  });
 });
});
</script>


HTML Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>WebSpeaks.in</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body class="body">
<div id="flashContent"></div>
<div class="main">
 <div>
 <label>Username : </label>
 <input type="text" id="uname"> <input type="submit" value="Submit" id="button">
 </div>
</div>
</body>
</html>

CSS Code

.body{
background-color:#000000;
text-align:center;
margin:15px;
}
.main{
background-color:#FFFFFF;
font-family:Tahoma;
width:500px;
text-align:left;
padding:10px;
-moz-border-radius:6px;
}

#flashContent{
width:500px;
padding-top:8px;
padding-bottom:8px;
background-color: #fff;
font-weight:bold;
font-size:20px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
display:none;
margin-bottom:10px;
}
#uname{
border:#000000 solid 1px;
font-size:16px;
height:25px;
width:300px;
}
#button{
-moz-border-radius-bottomleft:6px;
-moz-border-radius-bottomright:6px;
-moz-border-radius-topleft:6px;
-moz-border-radius-topright:6px;
background-color:#0060A1;
border:#003399 solid 1px;
color:#FFFFFF;
font-size:16px;
font-weight:bold;
padding-left:10px;
padding-right:10px;
}

Written by

Arvind is a web developer, programmer and blogger. He has expertise in PHP, Magento, WordPress, jQuery, JavaScript, HTML5 and CSS3. He loves to develop good looking websites with strong backend.

2 comments :

  1. Hi ! thanks for sharing the tutorial.join our community. your article was submited in nestdev.com. take a look at in http://nestdev.com/javascript/jquery-javascript/twitter-style-flash-message-with-jquery/ :)

    ReplyDelete

We would love to hear from you...

 

© 2014 Web Speaks . All rights resevered. Designed by Templateism