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>


16 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
  6. Thank you for sharing! I hope you will continue to have great articles like this to share with everyone!

    ReplyDelete
  7. hello sir,
    thanks for giving that type of information. Really enjoyed this blog post. Really looking forward to reading more. Much obliged.
    digital marketing company in delhi

    ReplyDelete
  8. Thanks, you guys that is a great explanation. keep up the good work in your granite blog.

    ReplyDelete
  9. I feel happy about and learning more about this topic. keep sharing your information regularly for my future reference. This content creates a new hope and inspiration with in me. Thanks for sharing article like this. the information which you have provided is better then other blog.
    Best IELTS Coaching in Dwarka

    ReplyDelete