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

13 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
  5. Softicweb.com is the best web Developing company in Pakistan. Softicweb provides web design,web development and seo in very
    affordable price.www.softicweb.com

    ReplyDelete
  6. Computer courses in Lahore and training are a great way to learn and advance in career and I think more people should move towards it

    ReplyDelete
  7. Computer Education is a very common and easy way to make money online or office a related job. MS Office course is the main course it is all documentation concepts are complete when completing this course. Data Entry jobs are relevant to this course. Genuine Tech

    ReplyDelete
  8. here are some of the best trainer in lahore
    Computer Foundation
    English Typing Course
    Urdu Typing Course
    Graphic Designing
    Freelancing training course
    Social Media Marketing
    AutoCAD 2D/3D Drawing
    Content Writing course and start freelancing
    WordPress Development

    ReplyDelete
  9. The Version Soccer Jersey reflects innovation and style, embodying the spirit of the game with its sleek design and performance-oriented features

    ReplyDelete
  10. Scored myself a ronaldo jersey
    – ready to represent my favorite player on and off the pitch!

    ReplyDelete