top_menu

Friday, 23 December 2011

facebook like red notification using simple css technique

.

Do you wish to implement a red notification counter similar to facebook. Creating this is much simpler using CSS.

    

Here is a explanation of the above implementation using CSS and simple javascript.
The CSS

<style>
.noti_Container {
position:relative;
border:1px solid blue; /* This is just to show you where the container ends */
width:16px;
height:16px;
cursor: pointer;
}
.noti_bubble {
position:absolute;
top: -8px;
right:-6px;
padding-right:2px;
background-color:red;
color:white;
font-weight:bold;
font-size:0.80em;

border-radius:2px;
box-shadow:1px 1px 1px gray;
}
</style>

The HTML code

<div onclick="return f1();">
<img src="friends.png" style="border:none;"/>
<div id="n1">2</div>
</div>

The small javascript code to add some more functionality

<script>
function f1()
{
document.getElementById("n1").style.visibility='hidden';
}
</script>


6 comments:

  1. nice tutorial
    http://aitamelearning.blogspot.com

    ReplyDelete
  2. nice tut bro

    www.thenewsinformer.com

    ReplyDelete
  3. I would like to add this on the news page of my blog, but as a circle notification is that possible?

    www.ksisoooofly.blogspot.com

    ReplyDelete
  4. Why are you using in-line styles????

    ReplyDelete
  5. Nice tutorial.

    Have a look to my blog http://codeinnovators.blogspot.in/

    ReplyDelete