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>


21 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
  14. Dank vapes are fast becoming a staple substitution for marijuana in homes. Although vape carts remain an illegal comodity in many states across the USA and parts of the world, Dank vape carts suppliers continue to promote the use of these vape carts in these states by delivering discreetly over the mail.
    vape danks , and other carts such as Mario carts , stiizy pods,moonrock carts, exotic carts are often criticized for not scoring a pass in laboratory test. However these carts remain the best vapes in the market and constitute the best vape flavors. Dank vapes in particular for over the years has scored the highest criticism on the market but also has made the highest sales for over the years.the most popular vapes products are so far the dank vapes and the most recommended vape is the moonrock carts.
    Dankwoods blunts and backwood prerolls are also a product of the dank company.
    Though the company is an illegally operating company with no official web account, dankwoods can be found all over the internets platforms such as instagram, facebook, and tweeter.
    Dankwoods prerolls constitute a 2gram mass of dank blunt and some aromatic dank flavors.
    Dankwoods price varies over the internet and cheapest dankwood prices are determined by the dankwoods suppliers. However buying dankwoods in bulk can always be facilitated over the web.

    ReplyDelete