[Jquery] Visually Appealing Notifications - Happy New Year !

Status
Not open for further replies.

desiboy

Active Member
1,544
2008
7
0
[SLIDE]http://i.imgur.com/qcBdW.png[/SLIDE]


PHP:
<html>
<head>
<title>Jquery- Display Notifications with close option - Desiboy @ wjunction.com</title>
<link href=' http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>
<style type="text/css">
#notify {
    font-family: 'Droid Sans', arial, serif;
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    z-index:105;
    text-align:center;
    font-weight:normal;
    font-size:100%;
    color:#000;
    background-color:#66615E;
    padding:5px;
}
#notify span.close {
    border:2px solid #FFF;
    padding:0 5px;
    cursor:pointer;
    float:right;
    margin-right:10px;
}
#notify a {
    color:white;
    text-decoration:none;
    font-weight:bold
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script type="text/javascript">
$(document).ready(function () { 
    $("#notify").fadeIn("slow");
    $(".close").click(function(){
    $("#notify").fadeOut("slow");
    });
});
</script>
</head>
<body>
<div id="notify" style="display: none;">
CDNPIC Wishes All It's Users A HAPPY NEW YEAR 2011 !
 <span class="close"><a title="dismiss this notification">x</a></span>
</div>
</body>
</html>
PS : you can find similar notifications on popular site stack overflow ;)


<3
 
1 comment
Status
Not open for further replies.
Back
Top