Changing global css with js - javascript

I have a background image that is in a style tag at the top of my html. And I want to change it when it turns to night time where the user is. So during the day it is imageA and during night time it is imageB.
The reason the css is in the header is because of my file layout and it wouldn't be able to access the image otherwise.
How do I change this global css styling from an external js file? I want to change the background image value. Any help would be great thank you.
let d;
d = new Date();
var now = d.toString().slice(16,18);
console.log(now);
if (now <= 5, now >= 20) {
console.log("it is night time")
//the code to change the image would be here
} else {
console.log("it is daytime")
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Seldom Seen</title>
<link rel="stylesheet" href="css/flip.css" />
<!--the lines below here is the part i want to change-->
<style>
.bg-image{
background-image:url("images/imageA.png");
}
</style>
</head>

Not sure if this is what you are asking for, but you can use this snippet to change the background-image through JavaScript:
document.querySelector(".bg-image").style.backgroundImage = "url(images/imageB)";

I'm not aware of any ways to modify CSS in the header using JavaScript, but here are two approaches that would solve your problem:
Assign one of the background images to an additional class, which overrides the original assignment by CSS specificity.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Seldom Seen</title>
<link rel="stylesheet" href="css/flip.css" />
<!--the lines below here is the part i want to change-->
<style>
.bg-image{
background-image:url("images/imageDay.png");
}
.bg-image.night{
background-image:url("images/imageNight.png");
}
</style>
</head>
const bg = document.querySelector('.bg-image');
let d;
d = new Date();
var now = d.toString().slice(16,18);
console.log(now);
if (now <= 5, now >= 20) {
console.log("it is night time");
bg.classList.add('night');
} else {
console.log("it is daytime");
bg.classList.remove('night');
}
Modify the style attribute of the element inline:
if (now <= 5, now >= 20) {
document.querySelector('.bg-image').style.backgroundImage = url('./images/imageNight.jpg');
}
else {
document.querySelector('.bg-image').style.backgroundImage = url('./images/imageDay.jpg');
}

Related

highlight span tags inside div on onmouseup

I am trying to highlight individual spans inside my document body onmouseup. My trouble is that for some reason every element is highlighted by default and I can't seem to get it to work on window.getSelection(). I only need it to highlight the span when I've clicked it.
Would anyone know a quick way of doing this?
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>The HTML5 Herald</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="./styles.css">
</head>
<body>
<h2>doc body</h2>
<div id="docbod" class="docbody"> </div>
<script src="./highlight.js"></script>
</body>
</html>
var documentbody = document.getElementById("docbod");
/* turns every word in the document into an element then appends them to the div that contains the doc body */
function splitdocintowords(div) {
var divarray = []
var state = ["hey", "there", "how", "are", "you", "doing?"]
for (let i = 0; i < state.length; i++) {
span = document.createElement("span")
span.textContent = state[i]
//-------^
span.id = "word" + i;
span.classList.add("textBackground")
span.addEventListener("onMouseup", highlight(span));
div.append(span);
div.append(" ");
}
}
splitdocintowords(documentbody);
/* highlights a selected word within the document*/
function highlight (element){
element.style.background='yellow';
console.log("selected element")
}
You have a mistake when adding event listener, the name of the event is 'mouseup'.
span.addEventListener("mouseup", () => span.style.background = 'yellow');

While True loop prevents page from loading

I apologise if my question seems simple, I am still trying to figure out JavaScript. I am building a website where I want the contents of a <p> to constantly change. I want it to loop over the contents of an array defined in my javascript code. However, when I put everything in a while (true) (because I want it to happen constantly), the <p> content never changes and the page is stuck on loading.
Here is the code I have so far:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="about.css">
<meta charset="UTF-8">
<title>My Site</title>
</head>
<script>
function changeDynamicText() {
var descriptions = ['list', 'of', 'strings', 'to', 'loop', 'over'];
let i = 0;
while (true) {
window.setTimeout(function() {
document.getElementById("dynamicline").innerHTML = descriptions[i];
}, 600);
i = i + 1;
if (i >= descriptions.length) i = 0;
}
}
</script>
<body onload="changeDynamicText()">
<p id="dynamicline">Starting Text</p>
</body>
</html>
Help of any kind is greatly appreciated.
When you use while(true), it will block the JavaScript event loop and therefore no longer render the rest of the body.
You can achieve what you're trying to do by working asynchronously. You already did use setTimeout in there, but you could also use setInterval to trigger the method on a recurring basis.
function changeDynamicText() {
var descriptions = ['list','of','strings','to','loop','over'];
let i = 0;
setInterval(function () {
document.getElementById("dynamicline").innerHTML = descriptions[i];
i = i + 1;
if (i >= descriptions.length) i = 0;
}, 600);
}
You can use setInterval instead.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="about.css">
<meta charset="UTF-8">
<title>My Site</title>
</head>
<script>
function changeDynamicText() {
var descriptions = ['list','of','strings','to','loop','over'];
let i = 0;
setInterval(() => {
document.getElementById("dynamicline").innerHTML = descriptions[i];
i = (i + 1) % descriptions.length;
}, 600)
}
</script>
<body onload="changeDynamicText()">
<p id="dynamicline">Starting Text</p>
</body>
</html>
You can easily do this with setInterval instead of setTimeout. Use setInterval when you need something to constantly do something in periods of time.
And I moved the i manipulation inside of the interval because you want that to execute each time the function gets called.
Also, it's just a really good habit to get into to put your script tags as the very last element of the body in the HTML document. This way you can ensure that all DOM content has loaded before attempting to manipulate the DOM.
Here is a JSFiddle with the code below: https://jsfiddle.net/mparson8/41hpLaqw/2/
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="about.css">
<meta charset="UTF-8">
<title>My Site</title>
</head>
<body onload="changeDynamicText()">
<p id="dynamicline">Starting Text</p>
<script>
function changeDynamicText() {
var descriptions = ['list','of','strings','to','loop','over'];
let i = 0;
let interval = window.setInterval(function () {
document.getElementById("dynamicline").innerHTML = descriptions[i];
i = i + 1;
if (i >= descriptions.length) i = 0;
}, 600);
}
changeDynamicText();
</script>
</body>
</html>
while (true) always blocks the page until it finishes using a break statement, in your code is never finishing, so what you need to do is call the function itself in the timeout (and make i a global variable to keep track of the array position)
let i = 0;
function changeDynamicText() {
var descriptions = ['list','of','strings','to','loop','over'];
setTimeout(function () {
document.getElementById("dynamicline").innerHTML = descriptions[i];
changeDynamicText()
}, 600);
i = i + 1;
if (i >= descriptions.length) i = 0;
}
loops are blockers infinite loops are infinite blockers. What you need is a time based switcher - a built in timeout functionality which you can call in a cyclical manner - or a, on interval ticker. Any of them will do...
function changeDynamicText() {
var descriptions =
['list','of','strings','to','loop','over'];
var i = 0;
setInterval( tick, 800 );
function tick( ) {
dynamicline.innerHTML = descriptions[ i++ ];
if(i >= descriptions.length-1 ) i = 0
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="about.css">
<meta charset="UTF-8">
<title>My Site</title>
</head>
<script>
</script>
<body onload="changeDynamicText()">
<p id="dynamicline">Starting Text</p>
</body>
</html>

Why won't my images change when clicked even though the logic seems pretty straight forward?

I'm trying to display a new image upon clicking on the current image. The problem's that upon clicking on img-1, it some how skips to img-3. However, if I remove the the second if(), it correctly goes to the next image (img-2).
How's this happening and how can I fix it?
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="index.css">
<title>Title</title>
</head>
<body>
<img id="the-image" onclick="clickedImage()" src="https://www.folkdeal.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/f/d/fd-ea10150-1.jpg" alt="image down"/>
<script type="text/javascript">
let theImage = document.getElementById('the-image');
let index = {
"img-1" : "https://www.folkdeal.com/media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/f/d/fd-ea10150-1.jpg",
"img-2" : "http://image.en.yibada.com/data/images/full/66771/the-legend-of-zelda-japanese-hepburn-zeruda-no-densetsu-is-a-high-fantasy-action-adventure-video-game-series-created-by-japanese-game-designers-shigeru-miyamoto-and-takashi-tezuka.png",
"img-3" : "https://www.geekisus.com/wp-content/uploads/2018/08/01_1575-11-400x400.jpg"
};
let clickedImage = () => {
if(theImage.src === index["img-1"]) {
theImage.src = index["img-2"];
}
if(theImage.src === index["img-2"]) {
theImage.src = index["img-3"];
}
}
</script>
</body>
</html>
When you do
theImage.src = index["img-2"]
this will be true
if(theImage.src === index["img-2"])
and then
theImage.src = index["img-3"];
will be executed, effectively skipping the second image. You probably want to change the second if into an else if.

Place new divs above / move old divs below

I have some toast notifications. I gave them a position "absolute" and want them to place themselves on their own.
New toasts should place themselves above the already existing ones. The old one would move down then.
So this is my important Div:
CreateWrapper(toastMessage, foreColor, borderColor, backgroundColorIconDiv, backgroundColorContentDiv) {
var wrapperDiv = document.createElement("div");
var width = 350;
wrapperDiv.id = "toast_" + this.toastCounter;
wrapperDiv.style.position = "absolute";
wrapperDiv.style.left = "50%";
wrapperDiv.style.display = "none";
wrapperDiv.style.width = width + "px";
wrapperDiv.style.height = "100px";
wrapperDiv.style.border = "2px solid " + borderColor;
wrapperDiv.style.borderRadius = "10px";
wrapperDiv.onclick = function() {
wrapperDiv.remove(); // Destroy the toast by clicking on it
}
document.body.appendChild(wrapperDiv);
}
and after creating it I use this code for some animations and destroying it:
var thisToast = this.toastCounter - 1; // get the toast Id
$(document).find("#toast_" + thisToast)
.fadeIn(750)
.delay(3000)
.fadeOut(750, function() {
$(this).remove(); // Destroy the toast
});
Here's a picture of what I am looking for
Check out this JSBIN.
You can use Bootstrap's grid system to make things a little easier.
You should never really use absolute layout, it makes responsive webpages impossible - take a look at what happens when you resize your browser.
You will want to have a look at the Element API.
var container = document.querySelector('div.container');
var newDiv = document.createElement('div');
newDiv.innerHTML = "HELLO WORLD";
container.prepend(newDiv);
And the accompanying HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/#reactivex/rxjs#5.0.3/dist/global/Rx.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/expect/1.20.2/expect.js"></script>
<div class="container">
hey
</div>
</body>
</html>
The method you are looking for is prepend()

Button background color toggle

I have been trying to toggle the background-color property of a button onclick but the color only changes once and does not toggle back and forth. Below is the code.
function btnColor(btn, color) {
var property = document.getElementById(btn);
if (property.style.backgroundColor == "rgb(244,113,33)") {
property.style.backgroundColor=color;
}
else {
property.style.backgroundColor = "rgb(244,113,33)";
}
}
<input type="button" id="btnHousing" value="Housing" onclick="toggleLayer('transparent1');btnColor('btnHousing','rgb(255,242,0)');" />
A simple solution (JS, CSS and HTML in order).
You setup a class in CSS, then select the button (yes the JS could have been done in one line) and toggle the class.
var button1 = document.querySelector("button");
button1.addEventListener("click", function() {
document.body.classList.toggle("colorred");
});
.colorred {
background-color: red;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Change color to background</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
</head>
<body>
<button>Click me!</button>
<script src="main.js"></script>
</body>
</html>
The problem you're having is that the background-color of an element is reported differently in browsers, either rgb, rgba (with, or without, spaces) in hex or in HSL...
So the button will likely never satisfy the if condition, meaning it will always go to the else.
With that in mind, I'd suggest using a class-name to keep track of the un/toggled state:
function btnColor(btn, color) {
var property = document.getElementById(btn);
if (property.className !== 'toggled') {
property.style.backgroundColor=color;
property.className = 'toggled'
}
else {
property.style.backgroundColor = "rgb(244,113,33)";
property.className = '';
}
}
JS Fiddle demo.
Of course, if we're using the class of the element, we might as well use CSS to style the element:
function btnColor(btn) {
var property = document.getElementById(btn);
if (property.className !== 'toggled') {
property.className = 'toggled'
}
else {
property.className = '';
}
}
With the CSS:
#btnHousing {
background-color: rgb(255,242,0);
}
#btnHousing.toggled {
background-color: rgb(244,113,33);
}
JS Fiddle demo.
The previous JavaScript could be simplified (using the same CSS) to:
function btnColor(btn) {
var property = document.getElementById(btn);
property.className = 'toggled' == property.className ? '' : 'toggled';
}
JS Fiddle demo.

Categories