Develop Reference

How to remove automatically applied background color to the body?

I'm working on a Covid-19 tracking web app and utilizing chartJS to display data from an API.
Applied background color to * in CSS but somehow there are empty spaces around the Canvas.
I inspected it on Chrome, and somehow background color of white is applied to the body, which I never wrote. How to remove this automatically applied background color?
Thank you in advance. :)
JS CODE
var ctx = document.getElementById('myChart').getContext('2d');
let myChart = new Chart(ctx, {
type: 'line',
data: {
labels: date,
datasets: [
{
label: 'Total',
data: total,
borderColor: '#cf0000',
fill: false,
},
{
label: 'Recovered',
data: recovered,
borderColor: '#4ca1a3',
fill: false,
},
{
label: 'Deaths',
data: deaths,
borderColor: '#907fa4',
fill: false,
},
HTML CODE
<div class="container">
<h1 class="text-center mt-3 heading">COVID-19 Tracker</h1>
<canvas id="myChart"></canvas>
</div>
CSS
* {
margin: 0;
padding: 0;
background-color: #e7d4b5;
}

Add some CSS to your code and set the background color to transparent.
body{
background-color: transparent;
}

Changed
<div class="container"> -> <div class="container-fluid">
and the side spaces with white background are filled with the background color that I wrote.
I guess it was more on the Bootstrap side of the problem.
After changing the class to container-fluid, the chart stretched to fill the screen, so I added padding to the chart to have some spaces.

Morris graph design

I recently bought the template , And I wanted to use the graph design that is part of the template, but when I use Morris with Javascript it ruins the colors of the graph.
Code:
JS:
<script>
$(function () {
// Fuel per 100k data //
var fuel_data = <?php echo $fuelData; ?>;
Morris.Line({
element: 'graph-line',
hideHover: 'auto',
data: fuel_data,
xkey: 'date',
xLabels: 'Date',
ykeys: ['views'],
labels: ['Views'],
resize: true,
lineColors: ['white'],
pointFillColors: ['white'],
});
});
</script>
HTML:
<div class="graph" id="graph-line" style="max-height: 335px; position: relative; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);">
</div>
The wanted layout:
The current layout:
As you can see, I managed to change the line and dots colors but coudn't change the label and the backlines ones.

Hide element in HTML generated by JSP file until additional script is loaded

I want to use Google Content Experiments to test different versions of a search bar. The search bar on this site (see here) is part of a JSP file that I am not able to manipulate outside of a complicated and time-consuming process; it is also tied to a CSS file on the server that I can't update.
What I can do is use our CMS to add CSS and jQuery, but with the code I have written below, the original search bar still shows for a flash before visibility: none hides it, and then the new version displays.
<style type="text/css">
#search-box, #search-box form#CatalogSearchForm{visibility: hidden;}
</style>
<script src="https://www.google-analytics.com/cx/api.js?experiment=PNsL-7hLRy-zjV_zTZrBLQ"></script>
<script>
var chosenVariation = cxApi.chooseVariation();
</script>
<script>
var pageVariations = [
function() {$('#search-box, #search-box form#CatalogSearchForm').css('visibility','visible'); console.log('original');},
function() {
$('#search-box button').css({
color: '#fff',
'background-image': 'url(/wcsstore/CVWEB/images/home/search-bar-btn.png)',
height: '22px',
width: '22px',
position: 'absolute',
right: '0px'
});
$('#search-box').css({
background: 'none',
border: '1px solid #000',
position: 'relative',
width: '190px'
});
$('input#searchTerm').css({
'font-weight': 'bold',
'text-transform': 'uppercase',
'font-size': '11px',
});
$('#search-box, #search-box form#CatalogSearchForm').css('visibility','visible');
$('input#searchTerm').val('SEARCH');
$('#search-btn').empty();
console.log('Test1');
},
function() {
$('#search-box').css({
'background-image': 'url(/wcsstore/CVWEB/images/home/search-bg-neutral.png)',
});
$('#search-box button#search-btn').css('color', '#fff');
$('#search-box, #search-box form#CatalogSearchForm').css('visibility','visible');
$('input#searchTerm').val('Search');
console.log('Test2');
},
];
$(document).ready(
pageVariations[chosenVariation]
);
</script>
Is there another front-end method I can use to hide the search bar until my script is loaded and the correct version of the search bar can display? Most of the posts I've seen here suggest adding display: none to the actual element via inline CSS but that isn't an option in this case. I did find this post which brings up a good point about users w/out JS enabled but I will worry about that if I can get the search bar to hide on load.
If you look at that same page, you'll see the "L'Atelier" in the navigation - that text is manipulated successfully with CSS/jQuery, and the incorrect text does not flash before the corrected text is loaded. The technique is the same - does the search bar show first because it's a bigger element (more than just text and URL)? This is the code for that piece, which works perfectly
<script type="text/javascript">
$(document).ready(function(){
$("ul#links > li:contains('PARTNERS')").addClass("brand-content");
var brandContent = $('ul#links > li.brand-content > a').text();
if (brandContent == 'PARTNERS'){
$('ul#links > li.brand-content > a').text("L’Atelier").attr("href", "/cookware/content_latelier_10151_-1_20002").attr("onClick", "_gaq.push(['_trackEvent','TopLevelNav', 'Click', 'Latelier']);");
}
$('ul#links').show();
</script>
<style type="text/css">
ul#links {
display: none;
}
</style>
The site runs jquery 1.3.2, which can't be updated at this time. I am open to all ideas and suggestions on how to achieve this that would be compatible w/ that version of jQuery.

Growl works easy way but not hard way, blockUI

when I use this it works perfectly,
$.growlUI('Growl Notification', 'Have a nice day!');
but when I replace it with this, (it doesn't work)
$.blockUI({
message: $('div.growlUI'),
fadeIn: 700,
fadeOut: 700,
timeout: 2000,
showOverlay: false,
centerY: false,
css: {
width: '350px',
top: '10px',
left: '',
right: '10px',
border: 'none',
padding: '5px',
backgroundColor: '#000',
'-webkit-border-radius': '10px',
'-moz-border-radius': '10px',
opacity: .6,
color: '#fff'
}
});
reason I am trying hard way is because I want to change color of growl, can I add css to $.growlUI(' anyway ?
also if i can add fadeIn: 700, to uigrowl
http://www.malsup.com/jquery/block/#demos

The code you posted works fine, I'm pretty sure you just forgot to add the content of the $('div.growlUI') selector.
Here's a working example: http://jsfiddle.net/xcT4L/
I just added
<div class="growlUI" style="display: none">
<p>Hello world!</p>
</div>
in the HTML page.

I know this an old question, but you can also simply override $.blockUI.defaults.growlCSS to supply your own styles.
If you want to $.blockUI properties like fadeIn, you can change the $.growlUI definition in jquery.blockUI.js to pass in an opts object, then you can set any properties you want there.
Here's a fiddle to demonstrate this: http://jsfiddle.net/hM3KX/2/

Click query never work

I am doing a javascript script that work like bookmark. After allot of code i need to click in one of the divs I got but i can't get it. If I put mouseover it works but no with click
I am using query
js:
var $j = jQuery.noConflict();
$j('<div></div>').prependTo($j(this)).attr('id', 'shadow').css({
'height': '220px',
'width': '220px',
'background-color': 'black',
'position': 'absolute',
'top': 0,
'left': 0,
'opacity': 0.4,
'cursor': 'pointer'
}).click(function() { //this dons't work i try to put apart
//But if I put bind('mouseover' it works
alert('a');
//...more stuff
});
In my HTML code its get like this:
<div id="div0" class="div" style="position: relative; ">
<div id="shadow" style="height: 220px; width: 220px; background-color: black; position: absolute; top: 0px; left: 0px; opacity: 0.4; cursor: pointer; "></div>
<img class="select" id="select0" src="url..." onclick="alert('aaa')">
<img src="url..." class="img" id="img0" height="62" width="220" style="margin-top:79px"></div>
</div>
I put an alert directly to the image and it doesn't work neither
Thanks for all the help

Assuming that you've setup a shortcut for jQuery to be $j, I've created a sample jsFiddle:
http://jsfiddle.net/TxKPD/
$('<div></div>').prependTo('body').attr('id', 'shadow').css({
'height': '220px',
'width': '220px',
'background-color': 'black',
'position': 'absolute',
'top': 0,
'left': 0,
'opacity': 0.4,
'cursor': 'pointer'
}).click(function() { //this dons't work i try to put apart
//But if I put bind('mouseover' it works
alert('a');
//...more stuff
});
Since it wasn't clear what $(this) was in your query i simply appended your element to the body. Everything is working with the click handler. So that leaves the question, what is triggering your script and what is $(this) ?

You're missing something or looking in the wrong place. This code as it's presented is fine. See the proof:
http://jsfiddle.net/H9vzM/
Note: I don't know the context of "this" from your code sample, so I manually select an existing "placeholder" div instead.