Changing CSS content property dynamically - javascript

A friend of mine is renting a webshop from a company. He is able to choose from different templates, and has the ability to override the predefined CSS and add javascript snippets. He asked me to help her making several changes, but there is something I cannot deal with: the add to cart button. In the below CSS there is a "content" property that holds a predefined value. I would like to change the value of this property dinamically, based on the HTML lang attribute. Do you have any idea how could I achieve this? (I know how to get the value of the lang attribute. My problem is changing the value of the "content" property)
#add_to_cart:before {
display: block;
font-family: 'sosa';
font-size: 35px;
content: "Ä";
padding-right: 5px;
font-weight: 400;
width: 71px;
height: 71px;
line-height: 65px;
text-align: center;
text-indent: 0;
text-shadow: none;
color: #fff;
}

Try this:
HTML:
<html lang="en">
...
<div id="add_to_cart" data-content="">example</div>
CSS:
#add_to_cart:before {
display: block;
font-size: 35px;
content: attr(data-content);
padding-right: 5px;
font-weight: 400;
width: 71px;
height: 71px;
line-height: 65px;
text-align: center;
text-indent: 0;
text-shadow: none;
color: red;
}
JS:
$('#add_to_cart').attr('data-content', (document.documentElement.lang == 'en' ? "x" : "y"));
You'll see that the character before 'example' changes when lang attr of <html> is changed.

Write a Javascript function that updates the CSS. Javascript can access the HTML attribute.
document.documentElement.lang

Related

Apply styling only on the text inside a DIV

I'm having a div in HTML which is dynamically creating from the server side. I want to apply css in HTML(front-end) only on that div if and only if its having some-content. If it doesn't have any content then I have no need to apply the new styling.
The sample of HTML code is:
<div class="attr-marker">
Some-text-content <!-- Apply New Styling on it -->
</div>
<div class="attr-marker">
<!-- No need of new styling -->
</div>
<div class="attr-marker">
<!-- No need of new styling -->
<i class="fas fa-car" style="color:#d42424;font-size:px"></i>
</div>
And the CSS which I tried but failed is:
.attr-marker text {
display: block;
width: 12px;
height: 12px;
border-radius: 50%;
line-height: 12px;
font-size: 9px;
text-align: center;
background: #000;
color: #fff;
}
I can achieve it by using javascript but I want purely CSS solution so it'll help me to minimize the code.
You can set default style for empty div by using :empty pseudo selector. And then for regular div, just set the style as given above.
Or you can use :not(:empty) Pseudo Selector to set the style for the div that is not empty.
Here's an example:
.attr-marker:not(:empty) {
display: block;
width: 12px;
height: 12px;
border-radius: 50%;
line-height: 12px;
font-size: 9px;
text-align: center;
background: #000;
color: #fff;
}
Let me know in case you have any questions.
Regards,
AJ
You can use the :empty pseudo-class. However your server will need to output the .attr-marker div with no whitespace.
Like...
<div class="attr-marker"></div>
not
<div class="attr-marker">
</div>
And then the css would be,
.attr-marker:empty {
display: block;
width: 12px;
height: 12px;
border-radius: 50%;
line-height: 12px;
font-size: 9px;
text-align: center;
background: #000;
color: #fff;
}
Additional reading, https://developer.mozilla.org/en-US/docs/Web/CSS/:empty
Writing .attr-marker text { } means you want to access child elements with tag text of class attr-maker. No such tag exists in HTML.
There are specific CSS text and CSS font properties which work only on text. They are to be used in the text's parent element (in your case div with class name attr-marker):
.attr-marker {
/* text properties */
/* some other properties */
}
Properties like display: block;, width: 12px;, height: 12px; and so on, won't work on text.
That being said, you don't need to worry whether your CSS properties will be applied to the text or to the whole div. If you're using the right properties, you can be sure they are only applied to the text.
As for the content(text) presence, you don't need to worry about it. If there is no text, CSS won't change anything.
Either add another class to that div from the server side if it will send content or wrap content with another element and give it some styling.
Edit:
If you know exact position of your element then you can select it with nth-child pseudo-class:
.attr-marker:nth-child(1):not(:empty) {
border: 1px solid #333;
background-color: yellow;
}
If these markers are block rendered elements, the browser should not display them, unless they have content, therefore you can trust the browser to not render the elements with no content, use the max-width and max-height properties below:
.attr-marker {
display: block;
max-width: 12px;
max-height: 12px;
border-radius: 50%;
line-height: 12px;
font-size: 9px;
text-align: center;
background: #000;
color: #fff;
/*If required*/
overflow:hidden
}

changing the properties in a external CSS thorugh Javascript

There's an external CSS file and I want to change one of the property of a class using JS. The property "content" in this class should dynamically change with a local directory of images.
.carousel-cell {
width: 75%;
height: 580px;
margin-right: 10px;
background: #8C8;
border-radius: 5px;
counter-increment: gallery-cell;
}
/* cell number */
.carousel-cell:before {
display: block;
text-align: center;
content: counter(gallery-cell);
line-height: 580px;
font-size: 80px;
color: white;
}
What changes should be done in order to take in list of images in a local folder using JS. The 'images' folder contains 8-10 images.
Thanks in advance for the help.

How to make a strikethrough look like an x

I am trying to make a page that uses only jquery to make tabs, not jQuery UI. At the top of the page there is an h1, like this:
<h1>Jquery <del>UI</del> Tabs</h1>
I want to know if I can make the strikethrough look like an x, like this:
You could do something like this using CSS:
del {
text-decoration: none;
position: relative;
}
del:before {
color: #000;
content: 'X';
display: block;
font-family: "arial";
font-size: 1em;
font-weight: normal;
left: 0;
position: absolute;
text-align: center;
top: 0;
width: 100%;
}
<h1>Jquery <del>UI</del> Tabs</h1>
Essentially all it does it place an "X" on top of the text using the :before sudo selector.

Change class and css , with jQuery , of a flaticon

This is the situation
<div id="idDiv">
<span class="flaticon-edit23"></span>
</div>
to change the css of the span i have to do this
#idDiv > span::before{
position: relative;
font-size: 26px;
line-height: 60px;
margin-left: 13px;
color: white;
}
if i click on #idDiv, I have to change the icon of the span, and also change some parameters of the css span (in this case, the font-size)
this works , and change correctly the icon
$("#idDiv").find("span:first").removeClass().addClass("flaticon-floppy13");
but I should change the css of the ::before selector , and i try this (and other similar combinations)
$("#idDiv").find("span:first").removeClass().addClass("flaticon-floppy13").find("span:before").css({"font-size":"36px"});
but it does not work properly
how can I do this ? thanks
UPDATE
this don't work
$("#idDiv").find("span:first").removeClass().addClass("flaticon-floppy13");
$("#idDiv").find("span:before").css("font-size","36px");
this don't work
$("#idDiv").find("span:first").removeClass().addClass("flaticon-floppy13");
$("#idDiv").find("span:before").css({"font-size":"36px"});
this don't work
.new_class{font-size: 36px; }
$("#idDiv").find("span:first").removeClass().addClass("flaticon-floppy13");
$("#idDiv").find("span:first").addClass("new_class");
this don't work
.new_class > span::before{font-size: 36px; }
$("#idDiv").find("span:first").removeClass().addClass("flaticon-floppy13");
$("#idDiv").find("span:first").addClass("new_class");
I don't think pseudo elements can be selected and modified as you are trying to do here.
What you can instead do is to have two different pseudo elements defined and either of them would get applied based on the span's CSS class.
e.g.
#idDiv > span.flaticon-edit23::before{
position: relative;
font-size: 26px;
line-height: 60px;
margin-left: 13px;
color: white;
}
#idDiv > span.flaticon-floppy13::before{
position: relative;
font-size: 36px;
line-height: 60px;
margin-left: 13px;
color: white;
}
and then, only changing the CSS class of the span
$("#idDiv").find("span:first").removeClass().addClass("flaticon-floppy13");
should be sufficient..
$("#idDiv").find("span:first").removeClass().addClass("flaticon-floppy13");
$("#idDiv").find("span:before").css("font-size":"36px");
Also
if (!$('.your class').val()) {
$('#idDiv').val("flaticon-floppy13");
} else {
$('#idDiv').val("");
}
or just remove {} but its better to separate the functions. I don't think they work together.
Have you done the same like this?
.new_class{font-size: 36px !important; }
$("#idDiv").find("span:first").addClass("new_class");

jQuery in Chrome returns "block" instead of "inline"

I have two divs that are inline. they both have similar styles and importantly both are inline.
JQuery is reporting that their css "display" is block ONLY in chrome. I really need to know that these two are inline.
jsfiddle here
css:
div
{
display: inline;
width: 50%;
float: left;
height: 100px;
text-align: center;
font-weight: bold;
padding: 10px;
box-sizing: border-box;
}
.div1
{
background-color: black;
color: white;
border: 2px solid grey;
}
.div2
{
background-color: white;
color: black;
border: 2px solid black;
}
html:
<div class="div1">1</div>
<div class="div2">2</div>
jQuery:
jQuery("div").click(function()
{
jQuery(this).append("<br/><span>" + jQuery(this).css("display") + "</span>");
});
jQuery("div").click();
Does anyone know what is happening or more importantly what can I do? (other than pull my hair out... its starting to hurt ;) )
As I said in my comment, float: left forces display: block.
Here's the relevant information in the spec:
http://www.w3.org/TR/CSS21/visuren.html#propdef-float
The element generates a block box that
is floated to the left.
And then:
http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo
Otherwise, if 'float' has a value
other than 'none', the box is floated
and 'display' is set according to the
table below.
To summarize said table: float = display: block.

Categories