Forum | Appery.io

Im trying to put in a red notification bubble inside a button (an example of what I want to do is shown below), and I wrote the following css and all it does is make the button disapear when i run it:

.noti_bubble {
position:absolute;
top: -6px;
right:-6px;
padding:1px 2px 1px 2px;
background-color:red;
color:white;
font-weight:bold;
font-size:0.55em;
border-radius:30px;
box-shadow:1px 1px 1px gray;
}

In addition, where would I find the name of the # to assign so I can map it to my back end?

Hi John!

Does the Button have an image in the background and you want to add the bubble with JS on it?
Under "the name of the # " do you mean mapping variable of number in the bubble?
Could you please check if you have any errors in console?

the button is just a standard button style with no background image. Im using this code as a css class. I assigned the class name to the button directly. (Orders Button below). I checked my console in firebug and no errors.

And yes I mean the mapping variable of the number in the bubble.

This is my working design (you will see the 'Orders' button on the upper right corner of the mobile container):

This is what it looks like when I implement the above css code:

John..
I have implemented this after much debugging and testing.
I'm placing counters and text indicators over my images used as buttons.
Example.
Button is on my screen named Menu.
Name of button is "mobileimageJobs"

Javascript is
code
//Call this function on Page show event
function showMenuCounters() {
//shows counts over Menu screen Icons
var counter = localStorage.getItem('SendCounter');
if (counter > 0 localStorage.getItem('TotalRecordCount') > 0 localStorage.getItem('PicsToSendCounter') > 0) {
setTimeout(function() {displayCounters();},1000);
}
}
function displayCounters() {
var counter = localStorage.getItem('SendCounter');
var tasksend = Tiggzi('mobileimageConnect').parent(); //get Div of connections pic
var taskmsg = counter + " Unsent&quot
var mode = 'ScreenMenu';
var picstosend = showPicsToSend(mode); //Get pics to send count
var picsend = Tiggzi('mobileimagePhotos').parent(); //get Div of pic Photos
var picmsg = picstosend + " Unsent&quot
var jobsdo = Tiggzi('mobileimageJobs').parent(); //get Div of Jobs Pic
$('#jobscount').remove();//Remove any existing Jobs counter style first
$('#taskscount').remove();//Remove any existing Data To send Count msg first
$('#picscount').remove();//Remove any existing Pics To send Count msg first
var jobscount = localStorage.getItem('TotalRecordCount');
var StyleTask = {'text-align': 'center', 'position':'absolute', 'color': 'white', 'text-shadow': '10px 10px 1px #000', 'font-weight': 'bold', 'font-size': '100%', 'margin-left':'15px','margin-top':'-15px'};
var StyleJob = {'text-align': 'center', 'position':'absolute', 'color': 'lime', 'text-shadow': '8px 8px 1px #000', 'font-weight': 'bold', 'margin-left':'65px','margin-top':'-32px'};
if (jobscount > 0 ) {$('<p id="jobscount">')&#46;appendTo(jobsdo)&#46;text(jobscount)&#46;css(StyleJob);}
if (counter > 0 ) {$('<p id="taskscount">')&#46;appendTo(tasksend)&#46;text(taskmsg)&#46;css(StyleTask);}
if (picstosend > 0 ) {$('<p id="picscount">')&#46;appendTo(picsend)&#46;text(picmsg)&#46;css(StyleTask);}
}
/code

My example updates and shows counters over 3 buttons. Tweak the JS and css to suit.

Example of app..

Note.. The text mobileimageJobs I added during screen capture just to show the name of the button

Also.. If I were you.. Run showMenuCounters() function on success event of your rest service. And have your rest service set the localstorage variables of SendCounter, TotalRecordCount ,PicsToSendCounter (In my case as shown)

Thanks Neil, it looks like Im gonna attempt implement this a bit down the line.