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)
Related
I made website where are only pictures in it and I'm displaying those images in my "main" website. In chrome, it works fine but in safari the aren't showing up at all. Even createElement for div isn't working. The problem is this link. Here's my code:
for (let i = 0; i < 11; i++) {
Draw_Images(i);
}
function Draw_Images(i) {
var div = document.createElement('div');
div.id = "meme" + 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("memes_container").appendChild(div);
var img = new Image();
img.src = "https://iynmemes.netlify.app/images_memes/meme" + i + ".jpg";
img.id = "image_meme" + i;
img.style.width = "100%";
img.style.height = "100%";
img.style.objectFit = "contain";
img.className = "img-fluid";
img.alt = i;
img.crossOrigin = 'anonymous';
divParent.appendChild(img);
}
<div class="container">
<div class="row">
<div class="col-sm">
<div id="memes_container"></div>
</div>
</div>
</div>
So removing some stuff worked for me. Basically Safari doesn't support navigator.userAgentData so it wasn't displaying images for that reason. So i had to remove it:
for (let i = 0; i < 11; i++) {
Draw_Images(i);
}
function Draw_Images(i) {
const isMobile = navigator.userAgentData.mobile; //REMOVED THIS AND IT WORKED!!
var div = document.createElement('div');
div.id = "meme" + 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("memes_container").appendChild(div);
var img = new Image();
img.src = "https://iynmemes.netlify.app/images_memes/meme" + i + ".jpg";
img.id = "image_meme" + i;
img.style.width = "100%";
img.style.height = "100%";
img.style.objectFit = "contain";
img.className = "img-fluid";
img.alt = i;
img.crossOrigin = 'anonymous';
divParent.appendChild(img);
}
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);
/*************************/};
I'm trying to make a basic GUI for a JavaScript web app, that lets users use the web app on any device, without putting too much time and effort into making it too responsive. I figured I could easily use basic overflow properties for container divs, so the user can scroll to the desired button, rather than changing the layout completely for different screen resolutions.
I'm trying to make the top toolbar (File, Edit, Insert etc..) with an overflow-x set to scroll, which holds divs floated to the left. For some reason, the overflow-x does nothing, so some of the buttons are hidden. Why is this?
jsFiddle
// STYLE WINDOW
document.body.style.margin = "0px";
document.body.style.padding = "0px";
document.body.style.backgroundColor = "#66666A";
document.body.style.color = "#0099AA";
document.body.style.fontFamily = "calibri, sans-serif";
function getScrollbarWidth()
{var o = document.createElement('div');o.style.overflowY = "scroll";o.style.visibility = "none";var i = document.createElement('div');o.appendChild(i);document.body.appendChild(o);var r = o.offsetWidth-i.offsetWidth;o.parentNode.removeChild(o);return(r);}
function getScrollbarHeight()
{var o = document.createElement('div');o.style.overflowX = "scroll";o.style.visibility = "none";document.body.appendChild(o);var r = o.offsetHeight;o.parentNode.removeChild(o);return(r);}
// CREATE EDITOR TOOLBAR
toolbar = document.createElement('div');
toolbar.style.position = "fixed";
toolbar.style.top = "0px";
toolbar.style.left = "0px";
toolbar.style.width = "100%";
toolbar.style.height = 32+getScrollbarHeight()+"px";
toolbar.style.overflowX = "scroll";
toolbar.style.overflowY = "hidden";
toolbar.style.backgroundColor = "#33333A";
toolbar.buttons = {};
toolbar.addButton = function(buttonName){
var newButton = document.createElement('div');
newButton.style.width = "128px";
newButton.style.height = "16px";
newButton.style.float = "left";
newButton.style.paddingTop = "8px";
newButton.style.paddingBottom = "8px";
newButton.style.textAlign = "center";
newButton.style.fontSize = "15px";
newButton.style.color = ";DD8800";
newButton.innerHTML = buttonName;
this.buttons[buttonName] = newButton;
this.appendChild(newButton);
}
toolbar.addButton("File");
toolbar.addButton("Edit");
toolbar.addButton("Insert");
toolbar.addButton("Settings");
toolbar.addButton("Share");
toolbar.addButton("Help");
// CREATE EDITOR WINDOW SELECTOR
windowSelector = document.createElement('div');
windowSelector.style.position = "fixed";
windowSelector.style.top = 32+getScrollbarHeight()+"px";
windowSelector.style.left = "0px";
windowSelector.style.bottom = "0px";
windowSelector.style.width = 128+getScrollbarWidth()+"px";
windowSelector.style.overflowY = "scroll";
windowSelector.style.backgroundColor = "#33333A";
windowSelector.buttons = {};
windowSelector.addButton = function(buttonName,imageURL){
this.buttons[buttonName] = document.createElement('div');
this.buttons[buttonName].style.width = "128px";
this.buttons[buttonName].style.height = "64px";
this.buttons[buttonName].style.backgroundColor = "#22222A";
this.buttons[buttonName].style.borderTop = "1px solid #115588";
var buttonImage = document.createElement('div');
buttonImage.style.width = "32px";
buttonImage.style.height = "32px";
buttonImage.style.margin = "8px";
buttonImage.style.marginTop = "16px";
buttonImage.style.marginBottom = "16px";
buttonImage.style.float = "left";
buttonImage.style.backgroundImage = "url('"+imageURL+"')";
buttonImage.style.backgroundSize = "contain";
buttonImage.style.backgroundPosition = "center center";
this.buttons[buttonName].appendChild(buttonImage);
var buttonTitle = document.createElement('div');
buttonTitle.style.width = "72px";
buttonTitle.style.height = "16px";
buttonTitle.style.paddingTop = "24px";
buttonTitle.style.paddingBottom = "24px";
buttonTitle.style.paddingLeft = "8px";
buttonTitle.style.float = "left";
buttonTitle.style.color = "#77BBDD";
buttonTitle.style.fontSize = "14px";
buttonTitle.innerHTML = buttonName;
this.buttons[buttonName].appendChild(buttonTitle);
this.appendChild(this.buttons[buttonName]);
}
windowSelector.addButton("Sprites","");
windowSelector.addButton("Objects","");
windowSelector.addButton("Scripts","");
windowSelector.addButton("Rooms","");
windowSelector.addButton("Backgrounds","");
windowSelector.addButton("Sounds","");
windowSelector.addButton("Paths","");
windowSelector.addButton("Timelines","");
windowSelector.addButton("Constants","");
// CREATE APPLICATION SCRIPT
application = document.createElement('script');
document.body.appendChild(application);
document.body.appendChild(toolbar);
document.body.appendChild(windowSelector);
Elements will only overflow horizontally if they have no other choice. Usually this is a good thing, but in some cases... yeah.
floats will wrap. Instead, try using display:inline-block on the items, and white-space:nowrap on the container.
This will force the elements to overflow horizontally.
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);
});
I can't make the script to create random amount of divs. In this specific example between 5 and 20. The problem is in the for loop maybe? The function that generates random numbers is working correctly below in the random color function, I guess it is not recognized for some reasons. Also I am not getting any errors in firebug.
Example:
function generateDiv(){
var dfrag = document.createDocumentFragment();
var count = generateRandom(5, 20);
var i=0;
for (var i = 0; i < count; i++){
var div = document.createElement("div");
dfrag.appendChild(div);
}
}
var divs = document.getElementsByTagName("div");
for (i = 0; i < divs.length; i++) {
div = divs[i];
alterDivStyle(div);
}
function rndColor() {
var r = ('0' + generateRandom(0,255).toString(16)).substr(-2), // red
g = ('0' + generateRandom(0,255).toString(16)).substr(-2), // green
b = ('0' + generateRandom(0,255).toString(16)).substr(-2); // blue
return '#' + r + g + b;
}
function generateRandom(min, max) {
var number = Math.floor(Math.random() * (max - min )) + min;
return number;
}
function alterDivStyle(div){
div.style.width = generateRandom(20, 100) +"px";
div.style.height = generateRandom(20, 100) +"px";
div.style.backgroundColor = rndColor();
div.style.color = rndColor();
div.style.position = "absolute";
div.style.border = "solid";
div.style.borderColor = rndColor();
div.style.borderWidth = rndColor();
div.style.borderRadius = generateRandom(0, 10)+"px";
div.innerHTML = "<strong>div</strong>";
};
You never added the document fragment to the DOM
"DocumentFragments are DOM Nodes. They are never part of the main DOM tree. The usual use case is to create the document fragment, append elements to the document fragment and then append the document fragment to the DOM tree. In the DOM tree, the document fragment is replaced by all its children."
https://developer.mozilla.org/en-US/docs/Web/API/document.createDocumentFragment
1) You closed the "generateDiv function" in the wrong place, move the closing bracket from before the "var divs" to after the "var divs" loop.
2) You are altering all the existing divs in the DOM:
var divs = document.getElementsByTagName("div");
Don't do that, use dfrag.
3) Like Matthew said, you have to add dfrag to the DOM.
function generateDiv(){
var dfrag = document.createDocumentFragment();
var count = generateRandom(5, 20);
var i=0;
for (var i = 0; i < count; i++){
var div = document.createElement("div");
dfrag.appendChild(div);
}
for (i = 0; i < dfrag.childNodes.length; i++) {
div = dfrag.childNodes[i];
alterDivStyle(div);
}
document.body.appendChild(dfrag);
}
function rndColor() {
var r = ('0' + generateRandom(0,255).toString(16)).substr(-2), // red
g = ('0' + generateRandom(0,255).toString(16)).substr(-2), // green
b = ('0' + generateRandom(0,255).toString(16)).substr(-2); // blue
return '#' + r + g + b;
}
function generateRandom(min, max) {
var number = Math.floor(Math.random() * (max - min )) + min;
return number;
}
function alterDivStyle(div){
div.style.width = generateRandom(20, 100) +"px";
div.style.height = generateRandom(20, 100) +"px";
div.style.backgroundColor = rndColor();
div.style.color = rndColor();
div.style.position = "absolute";
div.style.border = "solid";
div.style.borderColor = rndColor();
div.style.borderWidth = rndColor();
div.style.borderRadius = generateRandom(0, 10)+"px";
div.innerHTML = "<strong>div</strong>";
};
generateDiv();