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>


20 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
  10. Nice and interesting post. Thank You! For sharing such a great article, I like to read your information you have mentioned in this article are helpful for me.
    Best IELTS coaching in Gurgaon

    ReplyDelete
  11. Usually I never comment on blogs but your article is so convincing that I never stop myself to say something about it. You’re doing a great job Man,Keep it up.
    Study Abroad in New Zealand

    ReplyDelete
  12. Nice and interesting post. Thank You! For sharing such a great article, I like to read your information you have mentioned in this article are helpful for me.
    best ielts coaching in gurgaon

    ReplyDelete
  13. The first thing I look for is personalization. This is so easy, I really enjoyed this post. Check out this unrelated link. I wrote about the IELTS.
    IELTS Coaching in Dwarka

    ReplyDelete