Develop Reference

How to download image from another page HTML/JavaScript

I wrote a code where it displays only images from different website. I want to download them when i click their child download button. Problem is that it opens image it's self in separate page. Is there any awy to not make it open different page and download the parent image. Here's how I'm trying to download it:
<div class="container">
<div class="row">
<div class="col-sm">
<div id="image_container"></div>
</div>
</div>
</div>
</div>
<script>
for (let i = 0; i < 23; i++) {
Draw_Canvas(i);
document.querySelector("#image" + i).onclick = () => {
console.log(document.getElementById("image" + i).src);
localStorage.setItem("Image", document.getElementById("image" + i).src);
}
}
function Draw_Canvas(i) {
var div = document.createElement('div');
div.id = "image" + i;
div.style.borderRadius = "1%";
div.style.width = "200px";
div.style.height = "200px";
div.style.border = "1px solid";
div.style.padding = "0";
div.style.margin = "0";
var divParent = document.getElementById("image_container").appendChild(div);
var img = new Image();
img.src = "https://iynmemes.netlify.app/images_memes/meme" + i + ".jpg";
img.id = "image" + i;
img.loading = "lazy";
img.style.width = "100%";
img.style.height = "100%";
img.style.objectFit = "contain";
img.className = "img-fluid";
divParent.appendChild(img);
//Download Button Style
var downloadButton = document.createElement("button");
divParent.appendChild(downloadButton);
downloadButton.textContent = "💾";
downloadButton.style.borderRadius = "100%";
downloadButton.style.backgroundColor = "orange";
downloadButton.style.width = "50px";
downloadButton.style.height = "50px";
downloadButton.style.fontSize = "18px";
downloadButton.style.position = "relative";
downloadButton.style.float = "right";
downloadButton.style.bottom = "55px";
downloadButton.style.display = "none";
div.addEventListener("mouseover", function () {
downloadButton.style.display = "block";
});
div.addEventListener("mouseout", function () {
downloadButton.style.display = "none";
});
downloadButton.addEventListener("click", function () {
var a = document.createElement('a');
a.href = img.src;
a.download = "Meme (IYN)";
a.click();
});
}
</script>

Make a div in Javascript and output it to the DOM

I am having a little trouble right now creating multiple divs through javascript. This form has helped me create one. but I am trying to create 3. If anyone could help that would be great. I looked on one form How can I create and style a div using JavaScript? and was able to create one div. But I cannot figure out out to create multiple divs that are calling from an HTML div ID.
window.onload = function() {
var div = document.createElement("div");
div.style.width = "100px";
div.style.height = "300px";
div.style.background = "#FF0000";
div.innerHTML = "Going";
document.getElementById("one").appendChild(div);
var two = document.createElement("two");
div.style.width = "200px";
div.style.height = "200px";
div.style.background = "#FF0000";
div.innerHTML = "To Do";
document.getElementById("two").appendChild(two);
var three = document.createElement("three");
div.style.width = "300px";
div.style.height = "100px";
div.style.background = "#0000FF";
div.innerHTML = "Great";
document.getElementById("three").appendChild(three);
};
<div id="one"></div>
<div id="two"></div>
<div id="three"></div>

Write your javascript something like this
window.onload = function() {
var div1 = document.createElement("div");
div1.style.width = "100px";
div1.style.height = "300px";
div1.style.background = "#FF0000";
div1.innerHTML = "Going";
document.getElementById("one").appendChild(div1);
var div2 = document.createElement("div");
div2.style.width = "200px";
div2.style.height = "200px";
div2.style.background = "#FF0000";
div2.innerHTML = "To Do";
document.getElementById("two").appendChild(div2);
var div3 = document.createElement("div");
div3.style.width = "300px";
div3.style.height = "100px";
div3.style.background = "#0000FF";
div3.innerHTML = "Great";
document.getElementById("three").appendChild(div3);
};

As you can see in the picture below. Your code creates tags <two></two> and <tree></tree>, which is not valid html tags.
To solve this problem, just pass div instead of two and three into document.createElement() function. Like so:
var two = document.createElement("div");
... element styling here ...
two.style.width = "200px";
two.style.height = "200px";
...
var three = document.createElement("div");
... element styling here ...
three.style.width = "200px";
three.style.height = "200px";
...

Here is something fun to play with, might be helpful.
function CREATE_DIV( _WHERE_DO_YOU_WANT_IT_ , _STYLE_IT_ , _ID_IT_ , _INNER_TEXT_ ){
var div = document.createElement("div");
/* SET THE ID */
div.id = _ID_IT_;
/* SET THE INNERHTML */
div.innerHTML = _INNER_TEXT_;
/* SET THE STYLE PROPERTIES */
for(var RESULT in _STYLE_IT_){
if( _STYLE_IT_.hasOwnProperty(RESULT)){
/* ADD WHAT YOU NEED */
/* ADD WHAT YOU NEED */
console.log(RESULT+':'+_STYLE_IT_[RESULT]);
if(RESULT==='background'){div.style.background = _STYLE_IT_[RESULT]; }
if(RESULT==='position'){ div.style.position = _STYLE_IT_[RESULT]; }
if(RESULT==='width'){ div.style.width = _STYLE_IT_[RESULT]; }
if(RESULT==='height'){ div.style.height = _STYLE_IT_[RESULT]; }
if(RESULT==='left'){ div.style.left = _STYLE_IT_[RESULT]; }
if(RESULT==='top'){ div.style.top = _STYLE_IT_[RESULT]; }
if(RESULT==='padding'){ div.style.padding = _STYLE_IT_[RESULT]; }
if(RESULT==='border'){ div.style.border = _STYLE_IT_[RESULT]; }
//div.style.setAttribute( RESULT, _STYLE_IT_[RESULT] );//.RESULT = _STYLE_IT_[RESULT];
}}
/* APPEND OR ADD DIV TO ELEMENT */
/* ( _WHERE_DO_YOU_WANT_IT_ ) */
_WHERE_DO_YOU_WANT_IT_.appendChild(div);
}///
////
////
window.onload = function() {
var I_WANT_IT_HERE = document.getElementsByTagName('BODY')[0];
var GIVE_IT_AN_ID = 'DIV_01';
var INNER_HTML_TEXT= 'Div 1<BR>Whatever i want in my DIV !!!'
var STYLE = {}; // CREATE javascript Object of data. NOT Array.
STYLE['position'] = 'absolute';
STYLE['width'] = '90%';
STYLE['height'] = '33%';
STYLE['left'] = '0px';
STYLE['top'] = '0px';
STYLE['border'] = '2px dotted red';
STYLE['background']='rgba(300, 300, 300, 0.7)';
CREATE_DIV(I_WANT_IT_HERE , STYLE , GIVE_IT_AN_ID , INNER_HTML_TEXT);
STYLE['padding'] = '8px';
STYLE['left'] = '0px';
STYLE['top'] = '33%';
var GIVE_IT_AN_ID = 'DIV_02';
var INNER_HTML_TEXT= 'Div 2'
CREATE_DIV(I_WANT_IT_HERE , STYLE , GIVE_IT_AN_ID , INNER_HTML_TEXT);
var STYLE = {};// THIS RESETS STYLE
// EXAMPLE no position is set.
STYLE['padding'] = '8px';
STYLE['left'] = '0px';
STYLE['top'] = '66%';
STYLE['border'] = '1px dotted blue';
var GIVE_IT_AN_ID = 'DIV_03';
var INNER_HTML_TEXT= '<BR><BR><BR><BR>Div 3 is under Div 1'
CREATE_DIV(I_WANT_IT_HERE , STYLE , GIVE_IT_AN_ID , INNER_HTML_TEXT);
STYLE['left'] = '0px';
STYLE['top'] = '66%';
STYLE['border'] = '1px dotted lime';
var GIVE_IT_AN_ID = 'DIV_04';
var I_WANT_IT_HERE = document.getElementById('DIV_02');
var INNER_HTML_TEXT= 'Div 4 is inside Div 2<SPAN ID=SPAN></SPAN>'
CREATE_DIV(I_WANT_IT_HERE , STYLE , GIVE_IT_AN_ID , INNER_HTML_TEXT);
STYLE['border'] = '1px dotted blue';
var I_WANT_IT_HERE = document.getElementById('SPAN');
var INNER_HTML_TEXT= 'This is a span inside of DIV 02 & DIV 04'
CREATE_DIV(I_WANT_IT_HERE , STYLE , GIVE_IT_AN_ID , INNER_HTML_TEXT);
/*************************/};

How to add space between two images?

How to add space between two images in same cell in JavaScript? Below is the code, I want to add space between download and delete button.
var cell = row.insertCell();
var img = document.createElement('img');
img.src = '/ock/images/oess_images/item_download16.png';
img.alt = "Download document";
img.border = "0";
img.style.cursor = "pointer";
img.longDesc = "location.href='/download.php?docid=" + jsonData.suppdocs[i].docid + "'";
img.onclick = function () {
eval(this.longDesc)
};
cell.appendChild(img);
cell.align = "left";
cell.className = "field";
if (document.mainform.candeletedoc.value == 1) {
var img = document.createElement('img');
img.src = '/ock/images/oess_images/item_delete16.png';
img.alt = "Delete document";
img.border = "0";
img.style.cursor = "pointer";
img.longDesc = "deleteDocument(" + jsonData.suppdocs[i].docid + ")";
img.onclick = function () {
eval(this.longDesc)
};
cell.appendChild(img);
cell.align = "center";
cell.className = "field";
} //end if

Try adding a margin to one of the photos. Or make the boarder larger.
img.border = "5";
Hope this helps

How do you stop a Child Element from appending multiple times?

Okay I know you have to use the removeChild() method, but how and where? So I'm trying to make a script that tells me the width and height of the window size so its easier to make media queries in CSS. Okay I know how to do this website by website basis, but I want to make this script where it can apply to ALL websites which is WHY I have to have the appendChild. Everything works the way I want it too, but it keeps appending if you see this in the firebug tool.
The only thing one needs to do to see the code in action is to add the onresize="getWinSize()"; to the body.
Also if there is a better way to write this let me know (: Please no jQuery.
<body onresize="getWinSize()";>
Here is the code.
function getWinSize () {
var newDiv = document.createElement('div');
newDiv.id = "windowSizeOutput";
document.body.appendChild(newDiv);
var wd = window.innerWidth;
var ht = window.innerHeight;
var display = document.getElementById("windowSizeOutput");
display.style.background = "white";
display.style.height = "45px";
display.style.width = "100px";
display.style.border = "2px solid black";
display.style.position = "fixed";
display.style.left = "10px";
display.style.top = "200px";
display.innerHTML = "Width: " + wd + "px" + " Height: " + ht + "px";
}

In the getWinSize() function you can always check for the element existence and then remove it if it already exists. Something like this:
function getWinSize () {
var element = document.getElementById("windowSizeOutput");
if(element)
element.parentNode.removeChild(element);
var newDiv = document.createElement('div');
newDiv.id = "windowSizeOutput";
document.body.appendChild(newDiv);
var wd = window.innerWidth;
var ht = window.innerHeight;
var display = document.getElementById("windowSizeOutput");
display.style.background = "white";
display.style.height = "45px";
display.style.width = "100px";
display.style.border = "2px solid black";
display.style.position = "fixed";
display.style.left = "10px";
display.style.top = "200px";
display.innerHTML = "Width: " + wd + "px" + " Height: " + ht + "px";
}

You don't necessarily need to remove the element every time, you can just update its content
Either by checking if it is already in the document:
function getWinSize() {
var display = document.getElementById("windowSizeOutput");
if (!display) {
display = document.createElement('div');
display.id = "windowSizeOutput";
document.body.appendChild(display);
var wd = window.innerWidth;
var ht = window.innerHeight;
display.style.background = "white";
display.style.height = "45px";
display.style.width = "100px";
display.style.border = "2px solid black";
display.style.position = "fixed";
display.style.left = "10px";
display.style.top = "200px";
}
display.innerHTML = "Width: " + wd + "px" + " Height: " + ht + "px";
}
Or by saving the node out of the scope of the function
var display = null;
function getWinSize() {
if (!display) {
display = document.createElement('div');
display.id = "windowSizeOutput";
document.body.appendChild(display);
var wd = window.innerWidth;
var ht = window.innerHeight;
display.style.background = "white";
display.style.height = "45px";
display.style.width = "100px";
display.style.border = "2px solid black";
display.style.position = "fixed";
display.style.left = "10px";
display.style.top = "200px";
}
display.innerHTML = "Width: " + wd + "px" + " Height: " + ht + "px";
}
(And you can eventually put the initialization code in another function for clarity)

Toggling div inside chrome extension content-script

I am trying to toggle a div using a link in another, with all this being done through the content-script of a chrome extensions, but when I run the unpacked extension I am not able to toggle the div at all...any ideas?
Below is the code for the content script as it sits now.
function createHistoryDiv() {
var divHeight = 97;
var divMargin = 10;
var div = document.createElement("div");
div.id = "history";
var st = div.style;
st.display = "block";
st.zIndex = "10000000";
st.top = "0px";
st.left = "0px";
st.right = "0px";
st.height = divHeight + "%";
st.background = "rgba(255, 255, 255, .01)";
st.margin = divMargin + "px";
st.padding = "5px";
st.border = "5px solid black";
st.color = "black";
st.fontFamily = "sans-serif";
st.fontSize = "36";
st.position = "fixed";
st.overflow = "hidden";
st.boxSizing = "border-box";
st.pointerEvents = "none";
document.documentElement.appendChild(div);
var heightInPixels = parseInt(window.getComputedStyle(div).height);
st.height = heightInPixels + 'px';
//document.body.style.webkitTransform = "translateY("
//+ (heightInPixels + (2 * divMargin))+ "px)";
return div;
}
function buildDivContent(historyDiv, data) {
var ul = document.createElement('ul');
historyDiv.appendChild(ul);
for (var i = 0, ie = data.length; i < ie; ++i) {
var a = document.createElement('a');
a.href = data[i];
a.appendChild(document.createTextNode(data[i]));
var li = document.createElement('li');
li.style.color = "black";
li.style.display = "inline";
li.style.wordBreak = "break all";
li.appendChild(a);
a.style.color = "black";
a.style.fontSize = "24px";
a.style.fontFamily = "sans-serif";
a.style.linkDecoration = "none";
ul.appendChild(li);
}
}
chrome.runtime.sendMessage({ action: "buildTypedUrlList" }, function(data) {
var historyDiv = createHistoryDiv();
buildDivContent(historyDiv, data);
});
function logoDiv(){
var div2 = document.createElement("div");
div2.id = "logo";
var st = div2.style;
st.display = "block";
st.zIndex = "10000001";
st.bottom = "0px";
//st.left = "0px";
st.right = "0px";
//st.height = "42px";
//st.width = "210px";
st.background = "rgba(255, 255, 255,1)";
st.padding = "5px";
st.margin = "10px";
st.border = "5px solid black";
st.color = "black";
st.fontFamily = "sans-serif";
st.position = "fixed";
st.overflow = "hidden";
st.boxSizing = "border-box";
//st.pointerEvents = "none";
document.documentElement.appendChild(div2);
div2.innerHTML = div2.innerHTML + "TRANSPARENCY";
//div2.innerHTML = div2.innerHTML + "<p style = \"display:block;font-size:24px;font-family:sans-serif;margin:0;padding:5px;color:black;\">TRANSPARENCY</p>";
return div2;
function toggle_visibility(id) {
var e = document.getElementById("history");
if(e.style.display == "block")
e.style.display = "hidden";
else
e.style.display = "block";
}
}
chrome.runtime.sendMessage({ action: "buildTypedUrlList" }, function(data){
var titleDiv = logoDiv();
buildDivContent(titleDiv);
});

There are various problems with your code (e.g. display: hidden is not an allowed key-value pair).
So, in order to be functional, the content script should look like this (anything not included below should be removed):
function createHistoryDiv() {
/* No change here. Place the code exactly
* as it is in the code you posted */
}
function buildDivContent(historyDiv, data) {
/* No change here. Place the code exactly
* as it is in the code you posted */
}
function createToggleDiv(historyDiv) {
/* Create the toggle div */
var div = document.createElement("div");
div.textContent = "TRANSPARENCY";
/* Style the toggle div */
var st = div.style;
st.display = "block";
st.zIndex = "10000001";
st.bottom = "0px";
st.right = "0px";
st.background = "rgb(255, 255, 255)";
st.padding = "10px";
st.margin = "10px";
st.border = "5px solid black";
st.color = "black";
st.fontFamily = "sans-serif";
st.fontSize = "24px";
st.position = "fixed";
st.overflow = "hidden";
st.boxSizing = "border-box";
st.cursor = "pointer";
/* Make the toggle div behave
* (i.e. toggle `historyDiv` upon 'click') */
div.addEventListener("click", function(evt) {
evt.preventDefault();
var st = historyDiv.style;
st.display = (st.display == "block") ? "none" : "block";
});
/* Insert the toggle div into the DOM */
document.documentElement.appendChild(div);
}
chrome.runtime.sendMessage({ action: "buildTypedUrlList" }, function(data) {
var historyDiv = createHistoryDiv();
var toggleDiv = createToggleDiv(historyDiv);
buildDivContent(historyDiv, data);
});