-3

I made this jsfiddle: http://jsfiddle.net/alonshmiel/2PeEK/19/

I set numOfNewNotifications to be the number of li that their hasRead attribute is false.

Meantime, I put numOfNewNotifications in the middle of the globes.

how can I do it like the notification of facebook please?

enter image description here

I want to put it only if the numOfNewNotifications is not zero

any help appreciated!

Alon Shmiel
  • 6,753
  • 23
  • 90
  • 138
  • If you just want to edit the number's position in the image, you should consider using CSS. So I would suggest adding CSS as a tag as well... – Joum Jul 05 '13 at 11:21
  • I want to put it only if the numOfNewNotifications is not zero. I will try to do what you suggested, thank you! – Alon Shmiel Jul 05 '13 at 11:24
  • Then you should have added that detail to your question. – Joum Jul 05 '13 at 11:30
  • 1
    possible duplicate of [Easiest css for Facebook style "red" notifications](http://stackoverflow.com/questions/5747863/easiest-css-for-facebook-style-red-notifications) – Mohammad Areeb Siddiqui Jul 05 '13 at 11:46

1 Answers1

4

Your image is enter image description here, consider an image without whiteblock like enter image description hereand have whiteblock div externally. So that we can easily position it using css.

Please have a look at this SO answer and their JSFiddle.

I have done something enter image description here similar to yours, check this jsfiddle

Added HTML:

<div id="whit"></div>

CSS:

#whit {
    width: 20px;
    height: 20px;
    background-color: #fff;
    text-align: center;
    top: 0;
    position: absolute;
    margin-left: 29px;
    border: 1px solid #000;
}

change your JS:

$("#whit").text(numOfNewNotifications);
Community
  • 1
  • 1
Praveen
  • 55,303
  • 33
  • 133
  • 164