Adding a badge style count indicator

Recently, I had the requirement of showing how many pending whatchamacallits I had with a visual count indicator. I thought that a small bubble with the count would fit the bill. A quick search for “iphone badge css” yielded many hits. But I settled on this one.
I wanted to show the pending count on top of an image (used as an icon) and on a standard APEX button.

Here’s the end result.

Here’s final CSS I used:

.iconMenuBadge {
position: absolute;
top: 2px;
left: 2px;
}
.buttonBadge {
position: absolute;
top: -9px;
left: -15px;
}
/*Badge credit: http://blog.thinkingstiff.com/2012/01/21/iphone-notification-badge-in-css/ */
.badge {
  background: radial-gradient( 5px -9px, circle, white 8%, red 26px );
    background: -moz-radial-gradient( 5px -9px, circle, white 8%, red 26px );
    background: -ms-radial-gradient( 5px -9px, circle, white 8%, red 26px );
    background: -o-radial-gradient( 5px -9px, circle, white 8%, red 26px );
    background: -webkit-radial-gradient( 5px -9px, circle, white 8%, red 26px );
  background-color: red;
  border: 2px solid white;
  border-radius: 12px; /* one half of ( (border * 2) + height + padding ) */
  box-shadow: 1px 1px 1px black;
  color: white;
  font: bold 15px/13px Helvetica, Verdana, Tahoma;
  height: 16px; 
  padding: 4px 3px 0 3px;
  text-align: center;
  min-width: 14px;
}

To use it you just need a span (or div) tag with the count (or message) inside the span. For example:

7
New

For the icon I used the iconMenuBadge class for positioning. For the button I used buttonBadge.

7
7

For your theme, buttonBadge may need the top and left positions adjusted. Also, your buttons will need “position: relative;” or the absolute positioning of the badge will keep cascading up to the first position relative element or the top of the page. That would not look good.

To apply it to a button (or image, or any element) I used a dynamic action that would add it to the element.
For example, I would use a Dynamic Action on “Page Load” with a regular PL/SQL condition like “:Pn_NOTIFICATIONS > 0”. Then the True Action would be “Execute JavaScript Code” with this code:

$("#btnReset").find("span").after('
' + $v("Pn_NOTIFICATIONS")  + '
');

When the page loads, the badge HTML is added right away after first span of the button (but inside the button). In this case, btnReset is the Static ID I’ve assigned to my button.  The button template on my theme is of the form <a class=”uButton”><span>Button Label</span></a>.  And to avoid conflict with “a.uButton span” I’m adding the badge as a div. If we inspect the page, the final HTML looks something like this:

 Reset Notifications
 
7

It is very important to make the button position relative. So I add this CSS also:

#btnReset {position: relative;}

This will anchor the badge to the button. That’s all there is to it.

Go ahead, share...

Facebook

Twitter

Linkedin

Google

Tumblr

Buffer

Stumbleupon

Email