I am using the odometer.js library and I want to add a '$' right before the display of numbers. (EX: $123,435) Does anyone know how to go about this to get it to work? I have tried adding tags and inserting it in the options section of the javascrip which is in correlation with the library, but it still will not work. I have also tried :before and :after pseudos but that is not very dynamic.
<div class="odometer" id="odometer"></div>
.odometer {
color: rgba(250,250,250,.75);
font-size: 50px;
margin-top: 100px;
background-color: #2ecc71;
text-align: center;
padding-top: 10px;
position:fixed; top: -50px; width:100%; border: 0px solid black !important;
}
.odometer:before {
content: "$";
}
This should do the trick:
.odometer-inside:before {
content: "$";
}
DEMO: https://jsfiddle.net/lmgonzalves/tuqhmok1/1/
Related
I've been trying to build a page that has external SCSS files. I was having no trouble overriding specific elements with !important until now. I know this question is popular here. I've gone through
This answer
How to override external css marked as !important? ,
this
How to override external css?
this
How to overwrite SCSS variables when compiling to CSS
and some other, but none of them seem to work for my case.
My goal is to set a change of colors of my boxes through CSS #keyframe timer (or any other method that can work), BUT there's a color rule set as !important in a external SCSS file.
I was able to override it once by also adding a !important in MY local css, to get to the base color I wanted, but the color change seems not to work and not be able to override those two !important s, even with higher specificity and so on.
I'll provide the parts of the code that are important for this question:
Theme styles:
<link rel="stylesheet" href="box2.css">
<link rel="stylesheet" href="http://shipping.mambo.com.br/shipping-store/views/_includes/dist/css/adminlte.min.css">
The box I'm using:
<div href="#" id="boxMaster" class="small-box bg-info" class="box-PEDIDO" tabindex="0">
<a class="nmroPedido small-box-header" id="header" href="#"></a> <a class="float-right" id="dataEntrega"></a>
<hr>
<div class="inner">
<p id="nomeproduto"></p>
</div>
<div class="icon">
<i class="fas fa-shopping-cart" id="carrinho"></i>
</div>
<hr id="footer" class="baixoHr" tabindex="-1">
<a class="small-box-footer" tabindex="-1">
</a>
</div>
and my local CSS:
.row .info-box .info-box-icon {
font-size: 20px;
cursor: pointer;
height: 115px;
width: 30px;
}
.box-PEDIDO {
height: 135px;
width: 423px;
cursor: pointer;
}
.card-title {
font-weight: bolder;
}
.row {
height: max-content;
}
hr#antigo {
border: 0;
height: 25px;
background: #333;
background-image: linear-gradient(to right, #ccc, rgb(0, 0, 0), #ccc);
}
/* NOVO */
body #preparando .small-box {
width: 423px;
height: 160px;
cursor: pointer;
margin-right: 11px;
}
html body div #preparando .small-box {
background-color: var(--bs-success) !important;
}
#preparando:focus-within .small-box:focus-within {
background-color: #29923f !important;
}
#prontos .small-box {
width: 423px !important;
height: 160px !important;
cursor: pointer;
margin-right: 11px;
background-color: var(--bs-dark) !important;
}
.small-box-footer {
position: absolute !important;
bottom: 0px;
width: 423px !important;
text-align: right !important;
margin-right: 5px !important;
font-size: 13px;
font-weight: 250 !important;
background: none !important;
cursor: default;
}
h3 {
font-size: 1.2rem !important;
font-weight: lighter !important;
}
.h3qtd {
position: relative;
margin-top: -37px !important;
margin-left: 10px !important;
}
p {
font-size: 1.3rem !important;
word-wrap: break-word;
height: 90px;
margin-top: 4px !important;
position: absolute;top: 65px;
width: 250px;
line-height: 27px;
margin-left: 12px;
font-weight:500;
}
.inner {
height: 42px;
margin-top: -30px; /*Altura da "quantidade", ajustar dps*/
}
#header {
font-family: "Source Sans Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
font-size: 11px;
margin-left: 5px;
padding: 8px 0;
height: 20px;
font-weight: 200;
display: inline-block;
}
#dataEntrega {
font-size: 13px;
margin-top: 4px;
margin-right: 5px;
}
.small-box .icon > i {
position:absolute; top: 50px !important;
}
hr {
position: relative; bottom: -9px !important;
width: 423px !important;
}
.baixoHr {
position: relative; top: 74px;
}
.nroPedHead {
display: inline-block;
position: relative;
}
.nmroPedido-0 {
margin-top: -72px !important;
position: absolute !important;
margin-left: 5px;
font-size: 0.75rem;
}
.float-right {
margin-top: -71px;
margin-right: 5px;
font-size: 13px;
}
#preparando div .small-box .bginfo {
animation: change 10s step-end both !important;
}
#keyframes change {
to { background-color: var(--bs-warning) !important }
}
where the important parts lie in html body div #preparando .small-box { background-color: var(--bs-success) !important; } (where it works even without all that specification)
and the most bottom part
#preparando div .small-box .bginfo {
animation: change 10s step-end both !important;
}
#keyframes change {
to { background-color: var(--bs-warning) !important }
}
Note: the color change keyframes work for other elements in the page, but is NOT able to change the color of the box.
How can I make it work? Thank you in advance.
Edit: MRadev 's answer does work and triggers the color change, with every element BUT .bg-info (which is the background of the box), because of that !important in external CSS file I believe.
Still trying to find a way to work around that.
Set MRadev's lines to each element won't work because of the remainders of green from .bg-info background that bleeds through the colors of the elements.
Your problem lies in the !important statement that is embeded inside of a key. "!important" inside of keyframe is ignored. Please refer to:
https://developer.mozilla.org/en-US/docs/Web/CSS/#keyframes#!important_in_a_keyframe
And
https://rules.sonarsource.com/css/RSPEC-4655
This shouldnt be the problem you want to solve, but rather the need to use !important. Usually that would mean you have a badly structured styles. (I do get what you are trying to do with the overwriting the library.
Maybe your best solution would be using JS animations instead of the CSS ones in your case. Or maybe think in another direction and avoid the animation all together as your example works perfectly if you do not use the animation, but overwrite the "background-color" directly and as mentioned in the upper answer - have your "!important" be loaded first so the library one is ignored.
Shown here with your code:
// Smallbox:
.small-box > .inner {
animation: change 2s step-end both;
}
// Outher box
.bg-info {
background-color: yellow !important;
}
#keyframes change {
to { background-color: red}
}
#import url("https://cdn.jsdelivr.net/npm/admin-lte#3.1/dist/css/adminlte.min.css")
https://codepen.io/Rbx/pen/zYdrvRP?editors=1100
This is the problem with libraries using !important in their styles; it is very hard to be overridden. It would be impossible for the browser to assume which !important tag is more important than another !important tag, so it just takes the first one. The only way to do this is to make your style targeting more specific than the library.
For instance, if the library is setting !important on an element based on class name, then you can use an ID target in your CSS to make it "more specific" (IDs are supposed to only be set on a single element, so it is considered the most specific form of targeting).
The only other way to override a third party !important tag is to make sure your CSS loads first with its own !important tag on that particular style. Then when the library styles load, it won't be able to override yours.
An example in code:
html body div #preparando .small-box { // This is targeted by class name
background-color: var(--bs-success) !important;
}
html body div #preparando .small-box#someID { // This is targeted by ID which is more specific
background-color: var(--bs-success) !important;
}
I'm working on a reference project with tooltip notes throughout a text, and I'd like for the text affected by a note to be highlighted when the tooltip is displayed. My current code has a bug where displaying the first note highlights the correct text, but displaying a subsequent note highlights the text from the first note, not its own. I'm new to Javascript so it's likely I made a rookie mistake, but I think the problem is that I'm using getElementById which can only work once, but if I should be using getElementsByClassName instead, how do I tell it which node to get when? I know getElementsByClassName returns the whole array, and I need a way to only return one node at a time. I haven't yet been able to figure it out myself so help is very much appreciated. Below is a pared-down example of my code that demonstrates my problem.
<!DOCTYPE html>
<html>
<head>
<style>
mark {
background-color: white
}
/* now <mark> is only effective at my discretion */
sup {
vertical-align: text-top;
font-style: italic
}
a:link {
text-decoration: none
}
a:visited {
color: blue
}
a:hover {
text-decoration: underline
}
/* these describe the appearance and behavior of tooltips */
a.tooltips {
position: relative;
display: inline
}
a.tooltips span {
position: absolute;
width: 70px;
color: #FFFFFF;
background: #000000;
height: 25px;
line-height: 25px;
text-align: center;
visibility: hidden;
}
a:hover.tooltips span {
visibility: visible;
font-size: 0.8em;
top: 22px;
left: 50%;
margin-left: -43px;
z-index: 999;
}
a.tooltips span:after {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
width: 0;
height: 0;
border-bottom: 8px solid #000000;
border-right: 8px solid transparent;
border-left: 8px solid transparent;
}
</style>
<script>
function seeNote() // <mark> is now activated
{
document.getElementById("note").style.backgroundColor = "yellow"
}
function hideNote() // <mark> is now deactivated
{
document.getElementById("note").style.backgroundColor = "white"
}
</script>
<title>Bug Demonstration</title>
</head>
<body>
Mousing over note <i>a</i> highlights
<a class="tooltips" href="#"><sup onmouseover="seeNote()" onmouseout="hideNote()">a</sup><span>note <i>a</i></span></a>
<mark id="note">affected text</mark> as intended,
<br> but mousing over note <i>b</i> highlights
<a class="tooltips" href="#"><sup onmouseover="seeNote()" onmouseout="hideNote()">b</sup><span>note <i>b</i></span></a>
<mark id="note">note <i>a</i>'s text</mark> instead of note <i>b</i>'s text.
</body>
</html>
Problem solved! I saw something similar to my intended effect done on another website and looked at its source; it turns out there's a way to do this without any scripting at all! The whole effect can be accomplished merely with extra styling of the <a> elements in CSS, like so:
a. Delete all JavaScript
b. Delete all <mark> tags and their CSS and move each </a> to replace each </mark>
c. Delete href="#" from all <a> tags
d. Insert this code into the CSS:
/* affected text highlighted... */
a:hover.tooltips {
background-color: yellow;
}
/* ...but not the superscript letter */
a:hover.tooltips sup {
background-color: white;
}
I have a following HTML:
<span class="day-number">{{day-number}}</span>
<div class="event-box">
<div class="event-container">
</div>
<div class="more-events">more ...</div>
</div>
Event-container is filled with an unknown number of .event elements like the following:
<div class="event">{{event-name}}</div>
I want to show or hide the .more element based on if the .event-container has a height of over 76px (equal to the height of four .event elements stacked).
The styling for the above elements:
.event {
text-align: left;
font-size: .85em;
line-height: 1.3;
border-radius: 3px;
border: 1px solid #3a87ad;
background-color: #3a87ad;
font-weight: normal;
color: whitesmoke;
padding: 0 1px;
overflow: hidden;
margin-bottom: 2px;
cursor: pointer;
}
.event-box {
max-height: 76px;
overflow: hidden;
position:relative;
}
.event-box .more-events {
height: 10px;
position: absolute;
right: 0;
bottom: 10px;
display: none;
z-index: 5;
}
No styling for .event-container
I can do what I want with Javascript (jQuery):
$(".event-box").each(function(){
var $this = $(this);
if($this.children(".event-container").height() > 76){
$this.children(".more-events").css("display", "block");
} else {
$this.children(".more-events").css("display", "");
}
});
And run that every time a make a change, but I'd rather do it with CSS.
Is this possible? Maybe with pseudo elements or media queries or something?
JSFIDDLE: http://jsfiddle.net/pitaj/LjLxuhx2/
If changing the markup is acceptable there is a possibility to achieve a somewhat similarly looking page without using JavaScript to show or hide, here is the Fiddle
I have removed <div class="more-events">more ...</div> line and made elements of event class to get hide when it is necessary I also made them to appear when hovering over more ... .
The CSS I have added:
.event:nth-child(n){
display: none;
}
.event:nth-child(1),.event:nth-child(2),.event:nth-child(3),.event:nth-child(4){
display: block;
}
.event:nth-child(5){
text-indent: -9999px;
position: relative;
display: block;
color: black;
border: none;
background-color: #FFF;
}
.event:nth-child(5)::before{
position: absolute;
text-indent: 0px;
content: "more ...";
display: block;
}
.event:nth-child(5):hover{
position: static;
text-indent: 0;
border: 1px solid #3a87ad;
background-color: #3a87ad;
color: whitesmoke;
}
.event:nth-child(5):hover::before{
display:none;
}
.event:nth-child(5):hover ~ .event:nth-child(n){
display: block;
}
And for .event-box class I have commented out max-height: 76px; because in my browser 76px was not equal to the height of four .event elements stacked. Also removed update function.
I dont think it's possible using css only. but for better approach in what you are trying to do.instead of using max-height for .event-box I use this css which is add display:none to +4.event on your event container:
.event-box .event-container .event:nth-child(n+5){
display: none;
}
and now when it's more than 4 .event your more text appears. FIDDLE
UPDATE:
HERE I make little change in you js as well and make it more professional,
while you are using template to render the page, maybe you can do it as follow
<div class="event-container">
{{#each events}}
<div class="event">{{event-name}}</div>
{{/each}}
</div>
{{#if canshowmore}}
<div class="more-events">more ...</div>
{{/if}}
and
function canshowmore() {
return events.length >= 4;
}
I want increase title tag size on mouse hover which is in anchor tag. so how can target to title.
kesar sisodiya
The title text is handled by the browser and is not made available to us. You could make your own title text handler with JavaScript, but I don't think that's a very good solution.
You can't increase the size of title property.
You can try using the tooltip provided by jQuery.
jQuery Tooltip example
You could use a div that displayed when you hover over your text.
<div class="custom_title_tag">This is the title</div>
then style it with css
a:hover .custom_title_tag {
background:black;
opacity: 1.0;
}
The first answer was pretty straightforward though. But you could just position it relative to the link title you want to show.
check this, hope it helps you
a {
color: #000;
text-decoration: none;
}
a:hover {
color: green;
position: relative;
}
a[title]:hover:after {
content: attr(title);
padding: 4px 8px;
color: #000;
position: absolute;
left: 0;
top: 100%;
white-space: nowrap;
z-index: 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
background:#ccc;
}
I try to achieve something like the Facebook does when you type #<NAME_OF_A_FRIEND> in a reply. After you choose a friend, the name of that friend is highlighted with a blueish background, so you know it's a separate entity in that text.
I've "inspect element"-ed that textarea and there is no div placed on top of the textarea.
Can anyone give me a clue about how that is done ?
I have a completely different approach to this issue using HTML5. I use a div with contentEditable="true" instead of a textarea (wich I was using until I got stuck with the same problem you had).
Then if I want to change the background color of a specified part I just wrapp that text with a span.
I am not 100% sure if it is the correct approach as I am a newbie in HTML5 but it works fine in all the browsers I have tested it (Firefox 15.0.1 , Chrome 22.0.1229.79 and IE8).
Hope it helps
See this example here. I used only CSS and HTML... The JS is very more complex for now. I don't know exactly what you expect.
HTML:
<div id="textback">
<div id="backmodel"></div>
</div>
<textarea id="textarea">Hey Nicolae, it is just a test!</textarea>
CSS:
#textarea {
background: transparent;
border: 1px #ddd solid;
position: absolute;
top: 5px;
left: 5px;
width: 400px;
height: 120px;
font: 9pt Consolas;
}
#backmodel {
position: absolute;
top: 7px;
left: 32px;
background-color: #D8DFEA;
width: 53px;
height: 9pt;
}
The textarea has background-color: transparent; the extra div you're looking for is behind it, with the same text and font as the textarea, but different colours.
A short example to illustrate the point:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style>
* { font-family: sans-serif; font-size: 10pt; font-weight: normal; }
.wrapper { position: relative; width: 400px; height: 400px; outline: solid 1px #666; }
.wrapper > * { position: absolute; top: 0; left: 0; height: 100%; width: 100%; margin: 0; padding: 0; }
.highlighter { background-color: #fff; color: #fff; }
.highlight { background-color: #9ff; color: #9ff; }
textarea { background-color: transparent; border: 0; }
</style>
</head>
<body>
<div class="wrapper">
<div class="highlighter">
This <span class="highlight">is a</span> demonstration.
</div>
<textarea>
This is a demonstration.
</textarea>
</div>
</body>
</html>
Of course, this does not update the special div as you type into the textarea, you need a lot of JavaScript for that.
hi you can check this jquery autosuggest plugin similar to facebook .I have used this to achive the same functionality you required
http://www.devthought.com/2008/01/12/textboxlist-meets-autocompletion/
I would suggest changing the text you want to assign a background inline to to display: inline-block; background-color: #YOURCOLOR;. This should do exactly what you want it to do without all the complexities of some of the above answers.
Ultimately your CSS should look something like this:
.name {display: inline-block; background-color: purple;}
Then add some sort of event listener in jQuery (not sure how you're identifying that it is a name) and inside that conditional put:
$(yourNameSelectorGoesHere).addClass(".name");