Creating down-arrows like gmail labels that contrast with selected label color with CSS and/or jquery
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 d开发者_如何学编程own-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:
- 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?
- 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 :D
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' :(
Answer to your first question: You can render that arrow, but your document must be UTF-8 (choose the encoding in your editor), and also must specify it in the code like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
...
Hope this helps. Cheers
I seem to be able to get it to render just fine: http://jsfiddle.net/mcPbD/ - I'm not sure what might be causing the problem for you - unless I'm still not understanding correctly what the real problem is.
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 www.colorschemedesigner.com
Basic algorithm:
- Convert RGB to HSV
- Calculate complement in HSV color space (there are common algos to do this it seems)
- 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 :)
UTF-8 has a variety of special characters that will create the triangle for you. This is what I would recommend if your site is encoded using UTF-8.
Here is a site that is handy for finding these characters decimal values (you want you use decimal or hexadecimal). http://www.kinsmancreative.com/transfer/char/index.php
They have an arrows section
There's quite a few things you can do here.
It's funny how you decided to position it absolutely though. Out of curiosity, why not inside the list element? Also, why don't you just use 2 images of a triangle instead of finding some obscure character?
in css, you should check out :hover.
Example:
element:hover{csscodehereblah}
But what you're looking for is probably this:
$(".list_element").hover(
$("#triangleinsidethelistelement").css('color',-put your color here-);
);
I think there are other ways to approach your application than the one you did, but for your purposes, this should work. The jQuery will only work if you're using text instead of images.
加载中,请稍侯......
精彩评论