Just add the following jquery,
$(document).ready(function() {
var $alertdiv = $('<div id = "alertmsg"/>');
$alertdiv.text("Welcome to twitter");
$alertdiv.bind('click', function() {
$(this).slideUp(200);
});
$(document.body).append($alertdiv);
$("#alertmsg").slideDown("slow");
setTimeout(function() { $alertdiv.slideUp(200) }, 3000);
});
var $alertdiv = $('<div id = "alertmsg"/>');
$alertdiv.text("Welcome to twitter");
$alertdiv.bind('click', function() {
$(this).slideUp(200);
});
$(document.body).append($alertdiv);
$("#alertmsg").slideDown("slow");
setTimeout(function() { $alertdiv.slideUp(200) }, 3000);
});
Css:
#alertmsg
{
font-family:Arial,Helvetica,sans-serif;
font-size:135%;
font-weight:bold;
overflow: hidden;
width: 100%;
text-align: center;
position: absolute;
top: 0;
left: 0;
background-color: #333F31;
height: 20;
color: #F3FDED;
font: 20px/40px arial, sans-serif;
opacity: .9;
display:none;
}
{
font-family:Arial,Helvetica,sans-serif;
font-size:135%;
font-weight:bold;
overflow: hidden;
width: 100%;
text-align: center;
position: absolute;
top: 0;
left: 0;
background-color: #333F31;
height: 20;
color: #F3FDED;
font: 20px/40px arial, sans-serif;
opacity: .9;
display:none;
}
Not too shabby... I used some different CSS to get the style more like twitter...
ReplyDeletewidth:100%;
position:fixed;
top:0;
left:0;
z-index:32768;
background-color:#efefef;
font-size:18px;
color:#000;
text-align:center;
font-family: inherit;
padding:20px 0px;
border-bottom:1px solid #bbb;
cursor: pointer;
overflow: hidden;
opacity: .9;
display:none;
Thanks both Pandiya and Anonymous. I like the css in the comment
ReplyDeletenice article i'll added this up on my site
ReplyDeletehttp://ran.pdf-games.com
It works good for me :)
ReplyDeleteSEO Training Pakistan
great bar using jquery, it's what I want really.
ReplyDelete