I have some flags that I save in my database, each flag has a specific icon on my page.
like:
<div class="myClass">
<i class="icon-flag1"></i>
<i class="icon-flag2"></i>
<i class="icon-flag3"></i>
</div>
Whenever the flag is on, e.g: it's '1'. I need to call the user's attention, the icon/flag will indicate that he needs to pay attention to this specific flag, by the icon and the hover pop-up I have the user will know what each icon means.
My problem is: How do I change the color of that element <i class="icon-flag1"></i> according to the database flag value ?
Or maybe is there an easier way to achieve this goal?
First of all, it's would be a good idea to create a generic class, for example .icon-flag which contains styles that will be applied to all of the icons, this way you're not repeating yourself, or using selectors like .icon-flag1, .icon-flag-2, .icon-flag-3 {}, etc. which should be used to set the individual icon (for example, a background image).
Then you'd add 'state' styles, for example .active, .inactive to change the font.
Here's an example:
// Common styles to all icons
.icon-flag {
font-size: 20px;
font-style: normal;
display: block;
}
// State styles
.icon-flag.active { color: green; }
.icon-flag.inactive { color: red; }
.icon-flag.deleted { color: grey; font-style: italic; }
// You'd do your different icon backgrounds, etc in here.
// .icon-flag-1 {}, .icon-flag-2 {}, .icon-flag-3 {}, etc...
<div id="icon-example-1">
<i class="icon-flag icon-flag-1 active">1</i>
<i class="icon-flag icon-flag-2 inactive">2</i>
<i class="icon-flag icon-flag-3 deleted">3</i>
<i class="icon-flag icon-flag-4 active">4</i>
<i class="icon-flag icon-flag-5 deleted">5</i>
</div>
Please check this code snippet which shows how you can change an icons color based on some trigger in your website or app.
For demonstration purposes, my trigger here is onMouseOver so you can see it in action, in your own app it will of course be triggered by a MySQL query, signals, or the ID of the icon as you stated.
$('#iconA').mouseover(function(){
$('#iconA').addClass('isRED');
});
$('#iconB').mouseover(function(){
$('#iconB').addClass('isGREEN');
});
$('#iconC').mouseover(function(){
$('#iconC').addClass('isBLUE');
});
.isRED { color: red; }
.isGREEN { color: green; }
.isBLUE { color: blue; }
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<div class="myClass">
<i id="iconA" class="icon-flag1">X</i>
<i id="iconB" class="icon-flag2">X</i>
<i id="iconC" class="icon-flag3">X</i>
</div>
Alternatively, or let's say additionally, you can set the color class based on the id of the icon as follows:
if( $('#iconA').hasClass('icon-flag1') )
{
$('#iconA').addClass('isRED');
} else if( $('#iconA').hasClass('icon-flag2') )
{
$('#iconA').addClass('isGREEN');
} if( $('#iconA').hasClass('icon-flag3') )
{
$('#iconA').addClass('isBLUE');
}
Related
I have tried this. But It does not get filled on hovering.
.flag-icon
{
fill:white;
}
.flag-icon:hover
{
fill:red;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Roboto+Mono:400,500|Material+Icons" rel="stylesheet">
<span class="material-icons flag-icon">outline_flag</span>
Use color instead of fill.
See the snippet bellow:
.flag-icon{
color:blue;
}
.flag-icon:hover{
color:red
}
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic|Roboto+Mono:400,500|Material+Icons" rel="stylesheet">
<span class="material-icons flag-icon">outline_flag</span>
Edit - Filled x outlined icons.
To have the outlined style one must add the class material-icons-outlined.
If you want to change from a outlined icon to a filled icon on hover, you may use the following code that relies on a simples jquery script:
$(document).ready(function(){
$('.flag-icon').hover(function(){
$(this).removeClass('material-icons-outlined');
}, function(){
$(this).addClass('material-icons-outlined');
});
});
.flag-icon:hover{
color: red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Sharp|Material+Icons+Round|Material+Icons+Two+Tone" rel="stylesheet">
<span class="flag-icon material-icons material-icons-outlined">flag</span>
Take a look at this question for more examples:
How to use the new Material Design Icon themes: Outlined, Rounded, Two-Tone and Sharp?
.flag-icon::before {
font-size: 18px;
margin-top: 5px;
font-family: "Material Icons";
transition: 0.1s ease;
content: 'outlined_flag';
}
.flag-icon:hover::before {
content: "flag";
color: red;
}
I have say 3 spans as below :
<span class = "testVar1" onClick = "testFunction(Var1)">
<span class = "testVar2" onClick = "testFunction(Var2)">
<span class = "testVar3" onClick = "testFunction(Var3)">
testFunction(var){
here I assign class "on" to the span which calls this function
}
If span with class testVar1 calls this then it becomes
<span class = "testVar1 on" onClick = "testFunction(Var1)"></span>
My Css is as below
.test .on {
some CSS
}
Is there a way in CSS where I can use a variable and apply css to those span which is clicked?
Like
.test[Var1 or Var2 or Var3] .on {
some CSS
}
I have achieved it by using multiple selectors manually like#
.testVar1 .on {
some CSS
}
.testVar2 .on {
some CSS
}
I have read the post Using regular expression in css? , it,s helpful but not answering my question.
In this post css is applied to all the element, but I want css to be applied only to the element which called the function.
and so on.
Any help or pointers would be appreciated!
Thanks!
You are making things too complicated. Just use the same CSS class on all of them, then add the click listener programmatically, not as an inline onlick listener:
document.querySelectorAll('span.test').forEach(
span =>
span.addEventListener('click', () => {
console.log(`you clicked ${span.innerText}`)
span.classList.toggle('on')
})
)
.test {
background: red;
color: white;
display: inline-block;
padding: 40px;
}
.test.on {
background: green;
}
<span class="test">foo</span>
<span class="test">bar</span>
<span class="test">baz</span>
If you insist on inline event listeners (you really shouldn't, it's widely considered bad practice), for this simple example it's probably even easier:
function foobar(span) {
console.log(`you clicked ${span.innerText}`)
span.classList.toggle('on')
}
.test {
background: red;
color: white;
display: inline-block;
padding: 40px;
}
.test.on {
background: green;
}
<span class="test" onclick="foobar(this)">foo</span>
<span class="test" onclick="foobar(this)">bar</span>
<span class="test" onclick="foobar(this)">baz</span>
You can use regex selector: span[class^='test'] which means select every span with class start with "test".
You can combine it with another class (.on) like that: span[class^='test'].on
As for inline code, you can do something like that:
const spans = document.querySelectorAll('span[class^="test"]'); // select all spans
for (var i=0; i < spans.length; i++) { // iterate them
spans[i].addEventListener('click',function() { // add event listener to them
this.classList.add('on'); // set class on click
});
}
span[class^='test'] {color: blue;}
span[class^='test'].on { color: red; }
<span class="testVar1">1</span>
<span class="testVar2">2</span>
<span class="testVar3">3</span>
Check this for selecting element with more then one class.
And this for regExp selector.
Enjoy code!
Let's say I have links looking like buttons all over my app. They are orange, unless they are "disabled" (having no href):
a.button {
background-color: orange;
}
a.button:not([href]) {
background-color: grey;
}
Now, I'm not sure how to allow certain buttons look different in their context, but keep the disabled ones as they were. Let's say I need the "buttons" inside my <footer> to be green, or - as usual - grey if disabled:
footer a.button {
background-color: green;
}
The problem is that this rule has higher priority, as it's more specific. How can I allow disabled buttons in the footer to still be grey without repeating my code? I know I can use !important, but please assume that my real-life example is more complex and I want to avoid using it.
Use CSS variables. You define the default value and you simply set the variable to define a new one.
a.button {
background-color: var(--main, orange);
}
a.button:not([href]) {
background-color: var(--disable, grey);
}
footer#foo a.button { /*I am adding an ID to make it really more specific*/
--main: green;
}
<a class="button">a link</a>
a link
<footer id="foo">
<a class="button">a link</a>
a link
</footer>
Check out http://qnimate.com/dive-into-css-specificity/ to see a full list of CSS specificity.
Assuming you have more than one a.button in your footer, we'll skip using a plain id selector. You could pair an id and attribute selector, using the title attribute to identify all disabled "buttons":
index.html
<a class="button">a link</a>
a link
<footer id="foo">
<a class="button" title="disabled">a link</a>
a link
</footer>
and styles.css
#foo a[title="disabled"] {
color: green;
}
I've basically seen some answers where I can try to do something similar to what I need, but those examples are using text, about text. But in this case I need to achieve this with the element, I would like that when I pass the cursor over, a smooth animation is produced and it becomes a text ("add text"). How can I do it?
<i class="fa fa-users red" aria-hidden="true"></i>
https://jsfiddle.net/gp83bkuf/
You can handle the events in Javascript using Jquery for mouseenter and mouseleave in order to create you desired behavior. I have created an example using fadeIn fadeOut which renders a basic animation.
$('.myImage').mouseenter(function(){
var $image = $('.myImage');
$('.myImage').fadeOut(2000,function(){
$('.myText').fadeIn(2000);
});
});
$('.myText').mouseleave(function(){
$('.myText').fadeOut(2000,function(){
$('.myImage').fadeIn(2000);
});
})
.myImage {
font-size: 50px;
color: red;
}
.myText
{
font-size: 20px;
color: red;
display: none;
}
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<i class="myImage fa fa-users" aria-hidden="true"></i>
<p class="myText">add text</p>
I have twelve <a href> links that lead to different categories. As a means of orientation for the user I would like to emphasise the very category (<a href>-button) that the user is in right now.
How can I achieve this in CSS? I read about selected and active, but I haven't been able to make it work yet.
This is one of the links/buttons:
<span class="category_item"></span><span class="category_description">Handy & Co.</span>
The corresponding CSS:
.category_item {
display:inline-block;
background:url(../img/category_item/ph.png) no-repeat;
width: 45px;
height: 45px;
margin-right: 11px;
margin-bottom: 20px;
}
.category_item:hover {
background:url(../img/category_item/hover.png);
}
.category_description {
position: absolute;
font-size: 11px;
color: #000;
margin-top: 43px;
margin-left: -62px;
z-index: 1;
opacity: 0;
}
Thank you in advance!
You can run some jquery code when you load the page that checks the link urls with the current page's url and setting a class on the links that match.
JSFiddle: http://jsfiddle.net/og4o1tdh/2/
something like this:
HTML:
<div id="categories">
<span class="category_description">Google</span>
<!-- jsfiddle code is apparently run on fiddle.jshell.net -->
<span class="category_description">JSFiddle</span>
</div>
JS:
$('#categories a').each(function (){
var link = $(this).attr('href');
if (window.location.href.indexOf(link) > -1) {
$(this).find('span').addClass('currentCategory');
}
});
CSS:
.currentCategory {
color: orange;
font-weight: bold;
}
To give a special class to an anchor when a user clicks you can use simple javascript and jQuery.
Give all the anchor's you want to be in the scope of this a class for instance:
HTML:
<a class="nav-link" href="http://www.google.com"> Google </a>
<a class="nav-link" href="http://www.yahoo.com"> Yahoo </a>
Javascript:
$(".nav-link").on("click", function() {
$(this).addClass("active");
});
To make sure you only have one anchor with "active" class I would do the following:
$(".nav-link").on("click", function() {
$(".nav-link").removeClass("active");
$(this).addClass("active")
});
There is no built-in way of knowing which link is the current one. The easiest way may be to use javascript to check the current URL by document.URL and add a CSS class to the link with an equal href attribute. Then, you may style this class in CSS.
CSS doesn't know what page you are on.
To do this you will have to change your HTML markup, for example: to add:
<a class="current-page" href="index.php?category=handy&location=&sort=" ...
on the relevant link which you can use to 'hook' an new CSS style onto:
.current-page { color: red; }
The alternative is to use Javascript to 'read' the URL and apply a style.
You could...
Simply add a unique classname to the body tag or (some element that wraps around the anchor tags). And then style your links accordingly. This option is quite easy if you have access to change the HTML in your pages:
HTML
<body class="category_handy">
...
<a href="..." class="category_handy">
<span class="category_item"></span>
<span class="category_description">Handy & Co.</span>
</a>
....
</body>
CSS
body.category_handy a.category_handy {
color:red;
}
body.category_dandy a.category_dandy {
color:yellow;
}
body.category_something a.category_something {
color: blue;
}
If you don't have access to directly edit each page, you may have to dynamically check the URL, and then add a classname (like "current") to the anchor tag who's href attribute matches.
Either way, the solution will not involve "css only".