Ways to incorporate a notification feature with an icon or image

I'm looking to create a visually dynamic icon/image similar to mobile device notifications, but primarily for desktop use. This image will be positioned before some text. For instance:

https://i.sstatic.net/MHocy.pngSome Text

This design features two images: a telescope and a gear, as well as a variable number.

As someone who is new to CSS, I'm struggling with the placement of the gear in relation to the telescope and figuring out how to scale the gear based on the number (e.g., larger gear for 10,000 than for 3).

Additionally, this combination should scale properly across different screen sizes. How can I achieve this elegantly?

Here's a snippet of my HTML:

<div class="sidebar-item active">
            <a href="#">
                <img class="lab-image"/>
                <span class="sidebar-item-title">Labs</span>
            </a>
</div>

Currently, my lab-image only shows the telescope. What steps should I take next?

htmlcssangulartwitter-bootstrap-3

Answer №1

If you're in search of a badge that features a unique background image, look no further. Referencing this helpful resource, I've put together a fiddle showcasing how it can be done:

$(document).ready(function(){
var cw = $('.inner-badge').width();
$('.inner-badge').css({'height':cw+'px'});
})
body {
  margin: 25px
}
.outter-badge {
  position: relative;
  margin: 10px;
  background: #fff;
  width: 64px;
}
.inner-badge {
  display: table;
  position: absolute;
  top: -15px;
  right: -25px;
  background-image: url('https://openclipart.org/image/2400px/svg_to_png/174149/fancy-badge.png');
  background-repeat: no-repeat;
  background-size: cover;
  text-align: center;
}
.inner-badge p{
  display: table-cell;
    vertical-align: middle;
padding: 8px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="outter-badge"> 
  <img src="http://www.iconarchive.com/download/i88396/icons8/ios7/Industry-Microscope.ico" alt="" height="64">
  <div class="inner-badge">
    <p>1000</p>
  </div>
</div>

Answer №2

Creating a notification builder with NotificationCompat is essential for building notifications in Android applications. The code snippet below demonstrates how to set up the notification icons, content, sound, priority, visibility, and other important attributes:

NotificationCompat.Builder notificationBuilder = new NotificationCompat.Builder(context);

if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    notificationBuilder.setSmallIcon(context.getResources().getIdentifier(appIcon + "_transparent", "drawable", context.getPackageName()));
}else{
    notificationBuilder.setSmallIcon(context.getResources().getIdentifier(appIcon, "drawable", context.getPackageName()));
}

if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    Bitmap icon = BitmapFactory.decodeResource(context.getResources(), context.getResources().getIdentifier(appIcon, "drawable", context.getPackageName()));
    notificationBuilder.setLargeIcon(icon);
}

notificationBuilder.setContentTitle(title)
        .setStyle(new NotificationCompat.BigTextStyle().bigText(message))
        .setContentText(message)
        .setSound(defaultSoundUri)
        .setPriority(NotificationCompat.PRIORITY_HIGH)
        .setVisibility(NotificationCompat.VISIBILITY_PUBLIC)
        .setAutoCancel(true)
        .setContentIntent(pendingIntent);

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What sets apart HttpClient.post() from creating a new HttpRequest('POST') in Angular?

I've recently started learning angular, and I've noticed that there are two different ways to make a POST request: constructor(private httpClient: HttpClient) { httpClient.post(url, data, options); } constructor(private httpClient: HttpClie ...

angularhttprequesthttpclient

CSS to target every second visible tr element using the :nth-child(2n)

My table has a unique appearance (shown below) thanks to the application of CSS nth-child(2n). tr:nth-child(2n) {background-color: #f0f3f5;} https://i.sstatic.net/1AnDi.png I made some elements hidden on the vID, ID, and MO_Sub tr. <tr style="displa ...

javascriptjqueryhtmlcss

Prevent textArea from reducing empty spaces

I am facing an issue with my TextEdit application set to Plain Text mode. When I copy and paste text from TextEdit into a textarea within an HTML form, the multiple spaces get shrunk. How can I prevent the textarea from altering the spacing in the text? T ...

javascripthtmlcsstextareaforms

What are some effective ways to slow down the image transitions in a Javascript slideshow?

I am currently developing a slideshow that updates Images, Title, and Description simultaneously based on their Array index. The slideshow is functional BUT, my goal is to achieve a smooth transition to the next/previous Image (... title & descript ...

javascriptjqueryhtmlcssslideshow

Exploring the integration of Construct 3 objects with ReactJs

Although I am well-acquainted with Construct 3 platform, I now have an interest in website development. Specifically, I would like to incorporate a character-like object into my web project that moves similar to a game character. While I know how to achiev ...

htmlreactjsgame-developmentconstruct-2construct-3

Traverse Through Nested JSON Data and Display it in an HTML Table using Vue

Struggling to find a way to loop through my data, I have JSON data presented like this: [ { "STATUS":"CUTTING INHOUSE", "STID":"1", "CATS":[ { "CAT":"ORIGINALS ", "ARTS":[ { "ARTNO":"GY8252", ...

javascripthtmlvue.js

Comparing two arrays in Angular through filtering

I have two arrays and I am trying to display only the data that matches with the first array. For example: The first array looks like this: ["1", "2" , "3"] The second array is as follows: [{"name": "xyz", "id": "1"},{"name":"abc", "id": "3"}, ,{"name ...

angulartypescript

It is not possible to place the cursor before a non-contenteditable div within a contenteditable div

Here is the layout I am working with: <div contenteditable=true> /// <div contenteditable=false>not editable</div> /// </div> One problem I'm facing is that when the non-contenteditable div is the first element on a ...

htmlcss

Steps for organizing a list based on the number of clicks

I've created an HTML list with images of political party logos. Each logo is a grid item that can be clicked on. I want to sort the list based on the number of clicks each logo receives, essentially ranking them by popularity. However, I'm not su ...

javascripthtmlcss

Scrolling to zoom in on the div content

I need the ability to resize the content within a div without changing the size of the div itself when the user scrolls. The function I currently have is as follows: var zoomable = document.getElementById('zoomable'), zX = 1; window.addEvent ...

javascriptjqueryhtmlcssresize

Understanding the Functions of Angular Providers and Implementing Them

Just starting out with Angular and following a tutorial from this video. I decided to experiment by adding providers :[EmployeeService] to both employee-list.component.ts and empployee.component.ts within the @component section. However, this led to an err ...

htmltypescriptdependency-injectionangular-providers

Angular 4 is having trouble retrieving the JSON response

When I attempt to log errors in a specific scenario and use error, the following error message is displayed: { "errors" : [ { "entity" : "Movement", "property" : "direction", "invalidValue" : null, "message" : "Il campo non può essere v ...

angular

Enhance your image viewing experience with a React component that smoothly zooms in on images without distorting their dimensions, all with

After searching extensively for a solution, I have been unable to find one that works. My current setup involves using React with Bootstrap. I am in need of a stateless functional component that can take an image path as input and return an img element. Th ...

javascriptcssreactjsbootstrap-4css-transforms

Step-by-step guide: Crafting an UP Arrow solely with HTML and CSS

What is the method to utilize solely HTML and CSS for creating a triangle? I am in need of constructing a thick triangle, but want to achieve this using only CSS So far, I have experimented with the following code: .arrow-up { width: 0; height: 0 ...

htmlcss

Execute the 'loadURL' function in the electron-Angular project when the Angular Compiler has finished preparing

When working with electron-Angular tutorials, it is common to create the window and load index.html from localhost after a set timeout. You'll often come across instructions similar to this: // set timeout to render the window not until the Angular c ...

angularelectron

data-abide is flagging all fields as incorrect

Recently, I encountered an issue with a specific form I have created: <%= form_for(@building_shared_space, data: {abide:''}) do |f| %> ... <div class="field"> <%= f.label :room_type, 'Room Type' %> <%= ...

htmlruby-on-railsrubyzurb-foundation

Guide to adding a theme switcher feature to your current React website

Currently, I am faced with a challenge involving two theme files, theme.js and theme-dark.js, within the context of a complex React-based website. Despite having already set up the site, I am struggling to find a way to allow users to seamlessly switch bet ...

cssreactjsmaterial-uithemes

Resources for ExpressJS

New to ExpressJS and trying to figure out how to reference images stored in the /public/images/ directory in my /public/stylesheets/styles.css The code snippet below doesn't seem to be working for me: .home-bg { background-image:url('../ima ...

cssnode.jsexpress

The functionality of two-way data binding seems to be failing in Angular 2

I encountered an issue in my Angular 2 application where I attempted to bind view data using ngModel, but it did not function as expected. event.component.html <div class="form-group"> <label for="comment">About Us:</label> ...

angulartypescriptdata-binding

Top-notch tools and guides for front-end web development

As I prepare to transition to a new role focused on front-end web development, specifically CSS and jQuery, I am seeking recommendations for valuable resources to enhance my skills in these areas. Whether it be books, websites, blogs, or any other medium, ...

jquerycssresourcesfrontend