4
I am making a kind of "notification system" very simple in CSS.
What I want is that when the number of notifications is (0) he stays with display:none;.
I know a way I think it’s possible to do.
Ex: .bolinha [style*="text-align:center;"] { display:none; } <- I think it’s possible to adapt it, I just don’t know how to do it.
I’ll leave an image illustrating for a better understanding:
6
Make the same system that changes the element number change the style.
Follow example in PHP, adapt to the language of your system:
// Antes:
echo "<span class=\"bolinha\">$comentarios</span>";
// Mude para:
$estilo=($comentarios==0)?'invisivel':'bolinha';
echo "<span class=\"$estilo\">$comentarios</span>";
Then just create the .invisivel {display: none}.
Or with JS:
contador = document.getElementById("contador");
contador.className = (contador.innerHTML == '0')?'invisivel':'bolinha';
Don’t forget to put the id="contador" in the element, or update the existing JS pro id.
See the demo on Jsfiddle (change the value and press Run).
3
Unfortunately using only CSS cannot select an element by its text. An option would be to place an attribute in this element to differentiate it, example:
In his element span, place an attribute, for example data-value:
<span class="bolinha" data-value="0">0</span>
And in CSS, do:
span.bolinha[data-value="0"]{display:none;} /*Oculta o elemento com data-value="0"*/
Example: Jsfiddle
Excellent tip!
I will use the @Bacco tip for this project, and I will use your brilliant tip for another project! It will be really cool! Thanks......
@Alexandrelopes I’m happy to help.
Browser other questions tagged css
You are not signed in. Login or sign up in order to post.
To be clear, I want to integrate it with WHMCS. And it’s not open source, meaning it’s all encrypted. . :(
– Alexandre Lopes
J can’t even get?
– Bacco
Yes!!!!!!!!!!! : D :D :D :D
– Alexandre Lopes
I would already ask if it was possible with JS. :D
– Alexandre Lopes
Very booooooom... Thank you @Bacco you’re awesome!
– Alexandre Lopes
@Alexandrelopes just don’t forget that if it is a JS that updates the counter, you must include these two lines inside the updater, or call with some timer. Then just seeing the real case.
– Bacco