Friday, July 23, 2010

Twitter like notification bar in jquery

Just designed a twitter like notification bar in jquery... See it in action demo here...

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);
                            });

Css:

   #alertmsg
    {
      font-family:Arial,Helvetica,sans-serif;
      font-size:135%;
      font-weight:bold;
      overflowhidden;
      width100%;
      text-aligncenter;
      positionabsolute;
      top0;
      left0;
      background-color#333F31;
      height20;
      color#F3FDED;
      font20px/40px arialsans-serif;
      opacity.9;
        display:none;
}

6 comments:

  1. Not too shabby... I used some different CSS to get the style more like twitter...

    width: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;

    ReplyDelete
  2. Thanks both Pandiya and Anonymous. I like the css in the comment

    ReplyDelete
  3. nice article i'll added this up on my site
    http://ran.pdf-games.com

    ReplyDelete
  4. great bar using jquery, it's what I want really.

    ReplyDelete