css properties apply only by code - javascript - javascript

In my firefox extension I created a div element and added to it a paragraph with id named myP.
In the css file I wrote:
#myP
{
color: red;
text-align: center;
font-size: 16px;
font-weight: 900;
margin: 7px 7px;
}
but only the first two properties applied to the paragraph.
I tried to set the three others properties in my js code:
myP.style.fontSize = "16px";
myP.style.fontWeight = "900";
myP.style.margin = "7px 7px";
and it worked perfectly.
how can it be?

Maybe there is something else that is overriding your styles, can you inspect it in any way?
Have you tried:
#myP
{
color: red;
text-align: center;
font-size: 16px !important;
font-weight: 900 !important;
margin: 7px 7px !important;
}

Related

How to hide Google Translate toolbar popup?

I need to hide Google translate toolbar that appears after the user selects a language.
I did my research and most answers point use the following code to hide the popup:
.skiptranslate {
display: none !important;
}
body {
top: 0px !important;
}
However, on my project, the solution is working partially: if I use display none on the .skiptranslate class, the translation dropdown will stop working entirely.
I think google changed the structure of the popup recently as legacy solutions are not working for me.
I also tried to inspect the element and find a custom solution without success, any tips?
These are my current overwrite to the Google Translate dropdown:
.goog-te-gadget-icon {
display: none;
}
.goog-te-gadget-simple {
background-color: #ecebf0 !important;
border: 0 !important;
outline: 1px solid black;
font-size: 10pt;
font-weight: 800;
display: inline-block;
padding: 10px 10px !important;
cursor: pointer;
zoom: 1;
}
.goog-te-gadget-simple span {
color: #000 !important;
}
body {
top: 0px !important;
}

html2canvas 1.0.0-rc.5 2019 not working with rounded corners/border-radius (image is always rectangular)?

I used the 2016 (0.5.0) version of html2canvas for a long time because it always worked well for what I needed it for. Now I have to switch to the current version, but I have some problems:
The image that is created no longer has rounded corners. The png is always rectangular. And now I ask myself if I am doing something wrong, or if it might be a bug in the current version of html2canvas? I wanted to ask here first before posting this as an "issue" on GitHub.
The result with the 2016 0.5.5 version: https://i.imgur.com/gxutBEY.png (rounded corners)
The result with the 2019 1.0.0 version: https://i.imgur.com/LLY9WpI.png (rectangular corners)
Here's a JSFiddle that shows the issue: https://jsfiddle.net/ROPfiddle/jskLuw3v/3/
This is the current version (1.0.0-rc.5) of html2canvas: https://html2canvas.hertzen.com/dist/html2canvas.js
This is my CSS:
body {
font-family: system-ui, Helvetica, Arial, sans-serif;
margin: 19px 20px 0 20px;
background-color: #000;
}
#wrapper {
position: absolute;
white-space: nowrap;
}
#badge {
padding: 70px 67px 63px 71px;
border: 13px solid #a6a6a6;
border-radius: 110px;
line-height: 1;
background-color: #000;
color: #fff;
}
.icon img {
width: 273px;
height: auto;
border-radius: 62px;
}
.icon {
float: left;
}
.typo {
margin-top: -3px;
margin-left: 336px;
}
.text {
font-size: 92px;
font-weight: 500;
color: #a6a6a6;
letter-spacing: 0.04em;
}
.name {
font-size: 191px;
font-weight: 700;
margin-left: -6px;
letter-spacing: -0.0125em;
}
.finalbadge {
width: 100%;
height: auto;
}
This is my HTML (w/o the base64 encoded image):
<div id="wrapper">
<div id="badge">
<div class="icon">
<img src="data:image/png;base64, "/>
</div>
<div class="typo">
<span class="text">Listen on</span><br />
<span class="name">iTunes</span>
</div>
</div>
</div>
And this is my JS:
html2canvas(document.getElementById("badge")).then(function(canvas) {
document.body.appendChild(canvas);
var img = canvas.toDataURL("image/png");
document.body.innerHTML = '<img class="finalbadge" src="'+img+'"/>';
});
Am I doing something wrong? Or must it be html2canvas?
Since the question has already been answered, here's the JSFiddle that shows the solution/answer: https://jsfiddle.net/ROPfiddle/zyj9b6dc/2/
I can't tell you if this is a change from the 0.5.5 to the 1.0.0 version of html2canvas.
Nevertheless beside the required HTML element, html2canvas() accepts an optional second parameter which is a Javascript object. Among these options is a property called backgroundColor which accepts a rgba value - thus including transparency. If you set all 4 values to null you get your transparent rounded corners back.
So simply change
html2canvas(document.getElementById("badge"))
to
html2canvas(document.getElementById("badge"), {backgroundColor: "rgba(0,0,0,0)"})

How to modify CSS properties in one element, while selecting another?

I know that title is terribly worded, so hopefully I can explain this clearly.
I am modifying an existing google chrome extension. There is a floating button, defined in a .html file as:
.button
{
display: flex;
color: #fff;
font-size: 12px;
font-family: "Helvetica", "Arial", "sans-serif";
text-align: center;
margin: 0;
width: 35px;
height: 40px;
float: right;
border-radius: 40px 0 0 40px;
box-shadow: 0 1px 5px -1px #333;
cursor: pointer;
opacity: 1;
align-items: center;
justify-content: center;
border-right: none;
background: #fff;
}
On pressing this button, there is the following code in a .js file, which determines what should happen.
$(".button")
.fadeIn()
.click(function()
{
if (color == "black")
{
do this
}else if (color == "orange")
{
do that
}else
{
or even this
}
})
My goal is to display a new popup on top of the website with information, given that color == "orange". I can get do this, do that, and or even this to run, but what I would really like is to escape the selection of .button., so I can hide/show another popup on the screen without removing / changing the button.
Is there any way to do this? I've thoroughly exhausted my knowledge of html, css, and js, I'm really just a beginner...

Changing CSS content property dynamically

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

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