We Keep Coding

Problems with CSS changes in JavaScript

I am trying do a CSS change via JavaScript. I have a quiz site where, when the user marks the correct option, the option will become green, and when the user marks the incorrect option, the option will become red, but I have to change the color and redirect the user for another page, but the CSS change is very slow and, at certain times, doesn't work. This is my code:
CSS:
.choice{
white-space: normal;
word-wrap: break-word;
margin: 20px;
width: calc(40% + 100px);
height: calc(10% + 10px);
border-style: solid;
border-color: rgba(0, 0, 0, 0.4);
border-radius: 7px;
background-color: rgba(255,255,255,0.6);
cursor: pointer;
font-size: 20px;
transition: 0.4s;
}
JS:
function sleep(ms) {
var d = new Date();
var d2 = null;
do { d2 = new Date(); }
while(d2-d < ms);
}
function govariable(page,variable,valor,id,color) {
document.getElementById(id).style.backgroundColor = color
sleep(3000)
window.location.replace(`${page}?${variable}=${valor}`)
}

When you change something in the DOM (in this case, your background color) JavaScript won't update your screen until the event it is processing has finished.
This is because JavaScript runs in only one thread - it can't be looping around and around and re-displaying your background colour at the same time! It needs to finish looping first.
Instead of trying to implement a "sleep" function that will never work well in a single-threaded javascript world, you should try using setTimeout().
function govariable(page,variable,valor,id,color) {
document.getElementById(id).style.backgroundColor = color
setTimeout(function() {
window.location.replace(`${page}?${variable}=${valor}`)
}, 3000);
}
Instead of looping around again and again until time is up, at a very simplistic level this does something more like setting an internal "wake-up alarm" inside the JavaScript engine, that in 3000 milliseconds will go off, and tell JavaScript to run the code inside it. In this case, to call window.location.redirect.

How can I change the background color of a Leaflet popup?

I'm creating a map using Leafletjs, and I'd like to change the background color of a popup (which is currently displaying and image and a link) from white to a different color. It seems that basic background color css syntax won't cut it. Any advice?
Thanks,
-Scott

After you call leaflet.css, you can include a <style> tag with the following rule to change the color of the popup and popup tip.
.leaflet-popup-content-wrapper, .leaflet-popup.tip {
background-color: #000
}
Here's a screenshot I took after I edited background-color of a popup on Leaflet's homepage. Let me know if you have any more questions. Cheers.

Open leaflet.css and search for:
.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
background: rgb(111, 51, 51);
box-shadow: 0 3px 14px rgba(0,0,0,0.4);
}
Then change the background value to whatever color you want.

const marker = new L.marker(lastPoint, {
icon: markerIconSnake
}).bindPopup(getDataInHtml(dataPopup), {
className: 'stylePopup'
})
If you want to change the background color of a popup you can use the method .bindPopup (in your marker) and add a css class.
.stylePopup .leaflet-popup-content-wrapper,
.stylePopup .leaflet-popup-tip {
background-color: #f4913b;
padding: 8px;
}
If you wanna know more head to the docs!

In my case I'm using react-leaflet v2 and wasn't able to use css in js with material/core/styles. I created a function
const updatePopupCss = (color) => {
let popupElement = document.getElementsByClassName("leaflet-popup-content-wrapper");
let htmlPopupElement;
if (popupElement[0] instanceof HTMLElement) {
htmlPopupElement = popupElement[0] as HTMLElement;
htmlPopupElement.style.backgroundColor = color;
console.log(htmlPopupElement)
}
}
Then called it from the onOpen attribute like so
<Popup onOpen={() => {updatePopupCss("#036597")}} >

Button Hover effects on different Z-Indexes

here is my problem:
I had begun a game using JavaScript and HTML several weeks ago and decided to go ahead last week to reformat the code and make it more object oriented (this doesn't actually have any relevance to my question but its worth while putting things into context), along with making it more object oriented i had decided to break my games design up into different canvases, my understanding is that you can layer canvases on top of each other (i had read various recommendations about using multiple canvases for different jobs (included image buffering) for the benefit of performance, the canvases can be layered by applying z-index:; in CSS, at this time i have the following CSS code which i am using to manage the design of the site and for layering the canvases.
#canvas{
position: absolute;
top: 10px;
left: 100px;
z-index: 1;
background: transparent;
}
#bgCanvas{
position: absolute;
top: 10px;
left: 100px;
z-index: 0;
background: transparent;
}
#button{
position: absolute;
top: 430px;
left: 305px;
width: 116px;
border-style: solid;
border-color: red;
z-index:2;
background-color: #FFF;
}
the first canvas is at index 1, this as far as i know, is layered on top of index 0, the first canvas draws the player and the enemy, the second canvas bgCanvas is dedicated to the background, this is at z-index:0 meaning it should lay underneath the players. I then have a third canvas this is at z-index:2, this should provide the following hierarchy
2 - Game buttons
1 - Introduction image, player and enemy images (updated and displayed on this layer)
0 - the background
Now to the actual question: In a previous JavaScript file (as mentioned i am refactoring code from this file) i have code to enable hover over effects on the buttons such as the following code, which by the way is inside a function called update():
document.getElementById('button').style.left = canvas.width /2;
document.getElementById('button').css('z-index',1000);
document.getElementById('button').onmouseover = function(){
button.style.color = "red";
button.style.cursor= "pointer";
};
document.getElementById('button').onmouseout = function(){
button.style.color = "black";
};
document.getElementById('button1').onmouseover = function(){
button1.style.color = "red";
button1.style.cursor= "pointer";
};
document.getElementById('button1').onmouseout = function(){
button1.style.color = "black";
};
document.getElementById('button').onclick = function(){
button.style.visibility = "hidden";
button1.style.visibility = "hidden";
gameStart = true;
};
However, unlike the previous JavaScript file, this new file uses different layers to manage what is being drawn and as a result the hover and mouse effects that had worked previously, do not. But here is the kicker, when i adjust the z-index of the buttons from 2 to 1 the hover and mouse effects work. So my question is, can i apply the hover effects on different z-indexes? or should i be reducing the number of canvases etc. if you need more information i can try to provide it and thanks in advance.

This problem has been solved lol. The issue was this: the function update() holds the onclick, onmouseout etc. When you are drawing the intro screen in draw() and your using an if statement if(gameStarted===false){ you need to include the update() function in both the if and else statement, here is the code that fixed ^^
function draw(){
if(gameStarted === false){
startS.draw();
update();
}
else{
ctx1.drawImage(bgImage,0,0);
update();
ctx.clearRect(0,0,canvas.width, canvas.height);
p.draw();
h.draw();
requestId = window.requestAnimationFrame(draw);
}
};

Changing the colour inside characters/Font

Firstly, I need to say I am not a web developer, but I have managed to create a HTML5 and CSS3 web site by learning from as many tutorials as possible, also hacking code together from Google searches.
On my web site I would like to display environmental information: Temperature, Humidity, Air Pressure, etc.
I would like to know if the following is possible and if someone can point me in the right direction?
What I would like to do is display the value of the Temp. and have the colour inside the digits related to the Temp.
So for example:
If the Temp is below 10'C, then colour inside the digits is dark blue
If the Temp is between 10'C - 20'C, then the colour inside the digits is dark blue at the bottom and fades to light blue at the top of the digits
If the Temp is between 20'C - 30'C, then the colour inside the digits is light blue at the bottom and fades to orange at the top of the digits
If the Temp is between 30'C - 40'C, then the colour inside the digits is orange at the bottom and fades to red at the top of the digits
If the Temp is above 40'C then the colour inside the digits is red
I hope it makes sense
Thank-you in advance
Gregg

You can use some classes having different background colors like.
in css
.cssclassname1{
background-color:blue;
}
.cssclassname2{
background-color:blue;
}
in html
<div class="cssclassname1">below 10</div>
<div class="cssclassname2">above 10</div>
Hope this helps...

i have tried something but i cant define all ur condiotions
demo
HTML
<p>If the Temp is below 10C, then colour inside the digits is dark blue.<br>
If the Temp is above 40C then the colour inside the digits is red</p>
JS
$.fn.wrapInTag = function(opts) {
var o = $.extend({
words: [],
tag: '<strong>'
}, opts);
return this.each(function() {
var html = $(this).html();
for (var i = 0, len = o.words.length; i < len; i++) {
var re = new RegExp(o.words[i], "gi");
html = html.replace(re, o.tag + '$&' + o.tag.replace('<', '</'));
}
$(this).html(html);
});
};
$('p').wrapInTag({
words: ['10C', 'dark blue'],
tag: '<span>'
});
$('p').wrapInTag({
words: ['40C', 'red'],
tag: '<span1>'
});

You can get a good effect using background-clip: text.
This is only supported by webkit and mozilla, though.
I have prepared a demo for Chrome. The CSS is
.text {
font-size: 100px;
background-image: linear-gradient(0deg, red, orange, yellow, lightblue, blue);
background-size: 100% 400%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-animation: colors 10s infinite linear;
-webkit-text-stroke: 1px black;
}
#-webkit-keyframes colors {
0% {background-position-y: 300%;}
100% {background-position-y: 0%;}
}
In this demo, the background is clipped by the text, so that it will show only inside the numbers. To let it show we need also to make the text transparent. (and to make it a little nicer, we set a stroke around the font.
Then, we create a gradient background with the colors that you want, and just for fun we animate it.
In your code, the background-position would be set according to the temperature.
Notice that with that system, you can do it continous. (that is, a slightly different color for every temperature
demo

Js Fiddle Example here
(If your browser lacks webkit support, try this example instead.)
Probably the simplest way to control what the text looks like is to use css to define different styles (or colors as you've said) and then use javascript to set the class of a span tag around the temperature value text.
Some Sample HTML
<html>
<head>
<script src="[path to your .js file]"></script>
<link rel="stylesheet" href="[path to your .css file]" />
</head>
<body onload="initialize();">
<p>The temperature today is <span id="tempVal"></span></p>
</body>
</html>
Your javascript file:
var curTemp; // this will contain the current temperature
var curClassName; // the name of the class for that temperature (reflects css code below)
var valueContainer;
function initialize()
{
valueContainer = document.getElementById("tempVal");
}
//... calculate or set the current temperature value here ...
if (curTemp < 10)
curClassName = "freezing";
else if (curTemp >= 10 && curTemp < 20)
curClassName = "cold";
else if (curTemp >= 20 && curTemp < 30)
curClassName = "warm";
else if (curTemp >= 30 && curTemp <= 40)
curClassName = "hot";
else if (curTemp > 40)
curClassName = "scorching";
valueContainer.innerHTML = curTemp + "C";
valueContainer.setAttribute("class", curClassName);
This just leaves your CSS file. Now currently, the only way to achieve this gradient effect without using a canvas element is to use some webkit properties. These are not universally supported, so for maximum portability, I would simply use different solid colors rather than gradients, but here's the webkit example.
#tempVal
{
font-weight: bold;
}
.freezing
{
color: blue;
}
.cold
{
background: -webkit-linear-gradient(top, lightblue, blue);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.warm
{
background: -webkit-linear-gradient(top, orange, lightblue);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.hot
{
background: -webkit-linear-gradient(top, red, orange);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.scorching
{
color: red;
}
Check out the example here
If your numbers aren't coming up with a gradient color, it's because your browser doesn't support the webkit features.

Enyo JS Vertical Sliders

I am trying to code a vertical slider in enyo (Like a control on mixing desk). I was trying to avoid starting from scratch so I started tweaking the onyx.Slider class. I changed to styles from left to top and from width to height and with a few other tweaks, it's working. I'm now stuck on getting the slider to fill from bottom to top as at the minute it is vertical but it fills from the top down. Thanks in advance for any help.
Here are the code changes I have done:
in ProgressBar.js:
updateBarPosition: function(inPercent) {
this.$.bar.applyStyle("height", inPercent + "%");
},
in Slider.js (dividing by 64 is a temporary hack):
valueChanged: function() {
this.value = this.clampValue(this.min, this.max, this.value);
var p = this.calcPercent(this.value);
this.updateKnobPosition(p/64);
if (this.lockBar) {
this.setProgress(this.value);
}
},
updateKnobPosition: function(inPercent) {
this.$.knob.applyStyle("top", inPercent + "%");
},
calcKnobPosition: function(inEvent) {
var y = inEvent.clientY - this.hasNode().getBoundingClientRect().top;
return (y / this.getBounds().height) * (this.max - this.min) + this.min;
},
CSS:
/* ProgressBar.css */
.onyx-progress-bar {
margin: 8px;
height: 400px;
width: 8px;
border: 1px solid rgba(15, 15, 15, 0.2);
border-radius: 3px;
background: #b8b8b8 url(./../images/gradient-invert.png) repeat-x;
background-size: auto 100%;
}
.onyx-progress-bar-bar {
height: 100%;
border-radius: 3px;
background: #58abef url(./../images/gradient.png) repeat-x;
background-size: auto 100%;
}
Tom

There are a couple of approaches you could take. The most obvious (except for the fact it didn't occur to me first) is just to swap the background/gradient of the bar and the bar-bar. This will give you the appearance of filling from the bottom. I would recommend this.
The other method is what I did in this jsFiddle here: http://jsfiddle.net/RoySutton/b9PmA/ (Do ignore the doubled updateBarPosition function)
Instead of modifying those files directly, I derived from Slider and overrode the appropriate functions and added a new class for the vertical slider.
I changed the 'fill' to be absolutely positioned within the slider.
Now, your next problem is that value '0' is fully filled and '100' is fully empty. I handled that by modifying your calcKnobPosition to adjust from max and inverting the positioning logic as seen in this fiddle here: http://jsfiddle.net/RoySutton/b9PmA/2/
return this.max - (y / this.getBounds().height) * (this.max - this.min);