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.

Icon Badge

Icon Badge

Button Badge Count

Button Badge Count

 

 

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:

<span class="badge">7</span>
<div class="badge">New</div>

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

<span class="iconMenuBadge badge">7</span>
<div class="buttonBadge badge">7</div>

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('<div class="buttonBadge badge">' + $v("Pn_NOTIFICATIONS")  + '</div>');

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:

<a role="button" id="btnReset" class="uButton" href="javascript:apex.submit('RESET_NOTIFICATIONS');">
 <span>Reset Notifications</span>
 <div class="buttonBadge badge">7</div>
</a>

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.

Hi, I'm Jorge Rimblas. Father, husband, photographer, Oraclenerd, Oracle APEX expert, Oracle ACE, coffee lover, car guy, gadget addict, etc... I'm a Senior Technical Consultant with Accenture Enkitec Group, an Oracle centric consulting firm. I have worked with Oracle since 1995 and done eBusiness Suite implementations and customizations. Nowadays I specialize almost exclusively in Oracle APEX.

Posted in APEX, Oracle
One comment on “Adding a badge style count indicator
  1. Juergen Schuster says:

    Thanks Jorge, excellent solution!

I love comments, write me a line

%d bloggers like this: