We Keep Coding

Setting file input as background for an HTML element

I am creating a UI where the user wants to upload her profile picture using <input type="file"> by clicking on its corresponding <label>. I want to show the preview of the image as the background of the same <label>. I tried to use inputNode.files[0] in JavaScript but it does not work.
I am also working on a button X which clears the selected file field values and essentially the background image too but that's the next step of the goal. Some guidance regarding this is also welcome, since I have not thought about this either.
document.getElementById("avatar").onchange = function(e) {
console.log("file changed", e.target.files[0]);
// document.getElementById("preview-img");
document.getElementById("avatar-label").style.backgroundImage = e.target.files[0];
// document.getElementById("avatar-label").style.backgroundImage = 'url("https://picsum.photos/70/70")';
};
#avatar {
display: inline-block;
height: 0;
width: 0;
}
#avatar-label {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: 70px;
width: 70px;
border: solid 1px #333;
/*background: url('https://picsum.photos/70/70');*/
}
#avatar-label:hover {
cursor: pointer;
}
/* styling for unselecting the image */
#avatar-label #unselect-image {
display: none;
position: absolute;
top: 0;
right: 0;
border: none;
outline: none;
background: #fff;
}
<form action="" method="get">
<input accept="image/*" type="file" name="avatar" id="avatar">
<label for="avatar" id="avatar-label">
+
<button type="button" id="unselect-image">X</button>
</label>
<img src="" alt="" id="preview-img">
</form>

Showing in background
Use file reader instead of directly assigning the image object.
You may change your script to show background image as below
document.getElementById('avatar').onchange = function (e){
var file = e.target.files[0];
var reader = new FileReader();
reader.onloadend = function(){
document.getElementById('avatar-label').style.backgroundImage = "url(" + reader.result + ")";
document.getElementById('unselect-image').style.display = "inline";
}
if(file){
reader.readAsDataURL(file);
}
}
Clearing the background
For clearing the background image the following script may help
document.getElementById('unselect-image').onclick = function (){
document.getElementById('avatar-label').style.background = "none";
document.getElementById('unselect-image').style.display = "none";
};

The value of the background-image property in CSS is a string consisting of url(, followed by a URL, followed by ).
It is not a file object.
So you need to take that file object and convert it into a URL. This answer to another question explains how to do that.
Then you need to wrap the result in url( and ) and assign it:
.then( data => {
document.getElementById("avatar-label").style.backgroundImage = `url(${data})`;
})

Here are making thumbnail on uploading image
And to clear selected field is simple.
You assign '' into "src" property of html "img" element and value property of html "input" element.
Replace "label" with "img" if possible.

wrong link, wrong place

ok so I'm trying to display news articles from an api. what I've written in javascript does just that (article photo, title, author, etc) except for the links to each particular article. at first they werent clickable at all, then I changed the css with something I found here. that made the whole entire page clickable and only applies to one link, and one link only. so what I need to know is how to make sure the clicks happen in the right place and go to the right location? please and thank you.
function GenerateArticle(data) {
const Article = document.getElementById("ArticleGrid")
for (let i = 0; i < data.length; i++) {
const Div = document.createElement("Article");
Div.innerHTML =
`<img src = ${data[i].urlToImage}>
<h5>${data[i].title}</h5>
<p>${data[i].publishedAt}</p>
<p>${data[i].description}</p>
<p>${data[i].content}</p>
<p>${data[i].source.name}</p>
<p>${data[i].author}</p>
<a href = '${data[i].url}'></a>`;
Article.appendChild(Div);
}
}
a {
position: fixed;
display: block;
height: 100%;
width: 100%;
top: 0;
left: 0;
text-decoration: none;
}

What you're trying to achieve is a stretched link, an anchor that has no actual content but spans the entire contents of it's parent node. Only, you're not quite there. A few ways to do this but let's simplify for demonstration.
Set the position style property on the Div to relative.
const Div = document.createElement("article");
Div.style.position = "relative";
Absolute position your link in place of fixed.
a {
position: absolute;
display: block;
height: 100%;
width: 100%;
top: 0;
left: 0;
text-decoration: none;
}

Dynamically Created HTML object not having CSS applied to it

Final product: Web page that is filled in by data on a word document which is fed into a recurring HTML structure.
Problem: When ran, the HTML elements are created, but the CSS classes are not applied until the window is resized.
Javascrip:
for (i=0; i<=timeline_data.length; i++){
var newParent = document.getElementById('wgt-timeline-bdy-wrap-id');
var newItem = document.createElement('div');
newParent.appendChild(newItem);
newItem.setAttribute('class','wgt-timeline-bdy-item');
var newText = document.createElement('p');
newItem.appendChild(newText);
newText.setAttribute('class','timeline-new-text');
newText.id="timeline-" + timeline_data[i].id + "-text";
}
CSS:
.wgt-timeline-bdy-item {
display: inline-block;
font-size: 20px;
position: relative;
text-align: center;
vertical-align: middle;
width: 100%;
}
.timeline-new-text{
font-size: 30px;
position: relative;
top:40px;
}
Nothing unexpected in the HTML, wgt-timeline-bdy-wrap-id is a div.
Thank you in advance for your help

try appending to the DOM as the last thing you do in the loop (i.e after you have set the class). Also, most places I've done this through element.className = 'xxx' rather than using the setAttribute() function; not sure that matters, though.

Try writing a jQuery function to apply the CSS styles once the for loop is done executing. Something like this:
for{...}
styleelements();
function styleelements(){
$(".wgt-timeline-bdy-item").css({...});
$(".timeline-new-text").css({...});
}

Chrome Extension: inserting elements to page using NodeList data

I'm new to creating chrome extensions and what I want to do is to insert elements in specific locations on a page by using a element's class name. I know when I do a
document.getElementsByClassName("List-Item");
It gives me a NodeList. What I want to do is get this list and overlay information on each item on the list with my meta-data. But trying to loop through the node list won't work i.e
var div = document.createElement('div');
div.style.cssText = 'padding: 5px; position: absolute; color: white; left: 0px; top: 0px; background: green; height: 50px; width: 50px; z-index: 9999';
div.innerHTML = 'Chrome Plugin Success!';
var foo = document.getElementsByClassName("List-Item");
for(var i = 0; i < foo.length; i++) {
document.getElementsByClassName("card-content")[i].appendChild(div);
}
Can some one point me in the right way please?

How to add a div over another div with JavaScript?

First, I have this:
Now, what I want to do is, to make "zoom" of some nodes. Once I double click on some of the nodes, I want to see the whole node on the page:
Now, because every time I zoom a node - I see the same thing (a big circle), I want to make this: once I double-click on a node - only a new div to be added which will have the circle and it will overlap its container. I am working with Raphael, so the circle should be drawn with Raphael.
How should I do this with JavaScript? (adding new div with the circle which will overlap the container, and drawing the circle with Raphael, which shouldn't be hard, but the creation of the div is the part where I am stuck)
What I did so far is:
zoomDiv = document.createElement('div');
zoomDiv.id = 'graph-zoom';
zoomDiv.style.position = 'absolute';
zoomDiv.style.zIndex = 2000;
this.container.appendChild(zoomDiv);
When I go to the HTML, I can see that the div is added to the container:
But it is too low. I don't know if this is the problem why I can't see the empty div so far or is it something else?

This example demonstrates the creation of a div in javascript, how to append and remove it to and from the document.body, the use of CSS position: absolute; and CSS z-index to place elements on top of one another.
CSS
#parent {
position: absolute;
top: 0px;
left: 0px;
height: 100px;
width: 300px;
z-index: 0;
background-color: yellow;
}
#child {
position: absolute;
top: 0px;
left: 0px;
height: 100px;
width: 300px;
z-index: 1;
background-color: green;
}
HTML
<div id="parent">
<button id="open">Open</button>
</div>
Javascript
var parent = document.getElementById("parent");
var open = document.getElementById("open");
function addChild() {
var div = document.createElement("div");
var close = document.createElement("button");
div.id = "child";
close.id = "close";
close.textContent = "Close";
close.addEventListener("click", function closeSelf() {
document.body.removeChild(div);
}, false);
div.appendChild(close);
document.body.appendChild(div);
}
open.addEventListener("click", addChild, false);
On jsfiddle

Creation is easy:
var new_div = document.createElement("div");
Insertion is little more difficult:
var your_raphael_container_parent = your_raphael_container.parentNode;
if (your_raphael_container.nextSibling) {
your_raphael_container_parent.insertBefore(new_div, your_raphael_container.nextSibling);
}
else {
your_raphael_container_parent.appendChild(new_div);
}