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".
Related
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;
}
Firstimer here. Sorry if myquestion is too stupid.
How can I change the label in :
<span class="fluid-thumbnail-grid-image-type">
XYZ
</span>
I want change XYZ to something else in a hosted application.
I have access only to add custom CSS to the head section.
Thanks in advance
Fernando
CSS/HTML Solution:
If you are able to edit the html, and want to use only CSS, you may use the :before (or :after) selector:
.fluid-thumbnail-grid-image-type:before{
content:"ZYX"
}
<span class="fluid-thumbnail-grid-image-type"></span>
Javascript Solution: If you are able to add javascript I would recommend jQuery .html() like so:
$('.fluid-thumbnail-grid-image-type').html('ZYX');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="fluid-thumbnail-grid-image-type">XYZ</span>
Using only CSS Here's what you can do >>>DEMO Using CSS Pseudo-element :after and content
.fluid-thumbnail-grid-image-type {
visibility: hidden;
}
.fluid-thumbnail-grid-image-type:after {
content: 'ABC';
visibility: visible;
display: block;
}
<span class="fluid-thumbnail-grid-image-type">
XYZ
</span>
I've got the following HTML code. My CSS for tax-details is:
.products-grid .tax-details {
margin-top: -15px;
}
I need to have a seperate css selector for tax-details that have the class regular-price. I tried the following:
.products-grid .regular-price .tax-details {
margin-top: 0px;
}
but this does not work. Can somebody help me out?
<ul class="products-grid first odd">
<li class="item first"> <a class="product-image" title="Navy Frotteejacke" href="urll"><img width="180" height="180" alt="Navy Frotteejacke" src="url"></a>
<h2 class="product-name"><a title="Navy Frotteejacke" href="url">Navy Frotteejacke</a></h2>
<div class="price-box">
<span id="product-price-167" class="regular-price">
<span class="price">9,00 €</span></span>
</div>
<span class="tax-details">inkl. MwSt., zzgl. Versandkosten</span>
</li>
</ul>
If I understand correctly you are trying to change the CSS of .tax-details but it is not a child of .regular-price so that won't work.
Have you tried adding !important; behind your CSS like this:
.tax-details {
margin-top: 0px!important;
}
Or if you are trying to control two classes with one code (like your title suggests) you can use this:
.regular-price, .tax-details {
margin-top: 0px;
}
for tax-details that have the class regular-price
=> tax-details hasn't a regular-price class associated to it in your HTML sample.
The selector: .products-grid .regular-price .tax-details
applies to a structure like this:
products-grid
regular-price
tax-details
BUT
Your current HTML has this structure:
products-grid
regular-price
tax-details //not a regular-price's child
So don't expect it to work that way.
Refine the structure to match the CSS declaration, or change the CSS selector.
---------From your comment just below:----------
You could perhaps not changed the whole structure, but adding a class I hope yes:
<span class="tax-details regular-price">inkl. MwSt., zzgl. Versandkosten</span>
and the CSS becoming:
.products-grid .tax-details.regular-price { //note the union (without space) between tax and regular
margin-top: 0px;
}
For more info on this: http://www.bennadel.com/blog/680-Defining-A-CSS-Selector-That-Requires-A-Multi-Class-Union.htm
I have the following CSS to show a whole event as "completed".
.afc-completed,
.fc-agenda .afc-completed .fc-event-time,
.afc-completed a {
color: yellow; /* text color */
background-color: #6C3; /* default BACKGROUND color #36c */
text-decoration: line-through;
}
How do I write a CSS for only changing the fc-event-title only?
I saw my class afc-completed is added to the <div> element, but I don't find a solution to just change the title (fc-event-title) or the time.
Any help here?
Günter
#wsanville & #Thomas
I think that's not that simple, sorry.
Just defining what wsanville said will change for all events. The point is to change only for "completed" events.
For that I have
if (newEvent.completed != null) {
newEvent.className = "afc-completed";
}
But that's going to the div and not to title only.
I think I need to add a class directly to/or instead of the '.fc-event-title' for just only those selected/completed events, and only to the title.
Here is a typical div:
<div style="position: absolute; z-index: 8; left: 144px; width: 135px; top: 40px;"
class="fc-event fc-event-hori fc-corner-left fc-corner-right afc-completed ">
<a><span class="fc-event-time">15:15 - 16:15<br></span>
<span class="fc-event-title">Fri Dille</span>
</a>
<div class="ui-resizable-handle ui-resizable-e" unselectable="on"
style="-moz-user-select: none;">
</div>
</div>
But the newEvent.className doesn't work like that!
Is there another possibility?
And I need more modifications to the event presentation, like additional icons or text with italic ... and different combinations of those 'options'.
Thanks for your help.
Günter
OK, here is a working solution to solve for "important" and "completed" attributes of the event:
newEvent.className = ((newEvent.completed != null)? "afc-completed " : "")
+ ((newEvent.priority != null) ? "afc-important " : "");
and
.afc-completed .fc-event-title {
color: yellow;
background-color: #A6B5BC; /* grey */
text-decoration: line-through;
}
.afc-important .fc-event-title {
color: #C00 !important;
font-weight: bold !important;
}
Thanks for helping ;)
If you post some of your markup, I can give a better answer, but in the general case, you will need to add an additional rule to your stylesheet that applies to elements with the fc-event-title class. Something like this:
.fc-event-title
{
color: #ff0000; /* change the color values to something more appropriate */
background-color: #00ff00;
text-decoration: line-through;
}