Home/ Questions/Q 6687193
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-26T05:15:35+00:00

I’m trying to replicate the gmail label functionality for the system I’m working on.

  • 0

I’m trying to replicate the gmail label functionality for the system I’m working on. I’m using the jQLable plugin to ‘show’ the labels but the feature that we are trying to implement is this:

When the user hovers over the ‘color box’ of the label a down-arrow/triangle shows up that contrasts with the background of that color box quite well. Question is how do you do it?

Are there any jquery plugins to help you do that or can it be done by pure CSS?

I looked at the source of the gmail page and it seems that the triangle is a unicode character that shows up like this:

<div class="p8" style="">▼</div>

Just copy pasting the triangle didn’t seem to even render it on the browser 🙂 – I even entered the unicode character code for it, but no luck either.

I then created a triangle-div and absolutely positioned it where I wanted but I created an extra div just for that, but the above code seems to have the triangle as a text! It’s had me stumped!

So what I’m looking for is:

  1. Is there a way to get the triangle to show up without creating an extra div and playing with it’s style, like the above code snippet of gmail’s page? i.e., is there a special character code that I’m missing?
  2. How do I get the ‘color’ of the triangle to contrast with the background? Is there a jquery plugin (I’m guessing pure CSS wouldn’t work here, correct?) e.g. if the user selects a black label color, the triangle is better displayed as a lighter color – the triangle wouldn’t be visible if it was preset to black.

Googling around for something like this turned out weird results. Seems I need human responses 😀

UPDATE: #1 above is resolved and works fine. It was an issue with using multiple editors. However #2 of being able to ‘contrast’ the arrow with the background still remains ‘unsolved‘ 🙁

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It’s taken quite a while but the 2nd part still remained unanswered. However, here is a potential solution that I stumbled on. The solution is similar to the ‘complement’ color wheel on http://www.colorschemedesigner.com

    Basic algorithm:

    1. Convert RGB to HSV
    2. Calculate complement in HSV color space (there are common algos to do this it seems)
    3. Convert value back to RGB

    That’ll ensure the complement is always contrasting to the background.

    I’m not sure if any solution exists, but I guess I’ll go with this one and mark it as an answer for now. If you play with the color wheel on the above link it seems to solve my problem…you may want to give it a try it for yourself 🙂

    • 0