I have a border that I'm trying to get to go around the full table, but instead it stops at odd places and does not circle the whole table. Looking like this:
So as you can see the border stops going around the table in an odd place, so how do I get it to fully encompass the table?
Also due to certain specifications the whole thing must be created with Javascript.
function createTable(matrix) {
var div = document.createElement("div");
div.style.minWidth = "120px";
//div.style.height = "100px";
div.style.top = "0px";
div.style.left = "0px";
div.style.zIndex = 1000;
div.style.background = "grey";
div.style.color = "white";
div.style.position = "absolute";
var header = document.createElement("div");
header.style.background = "red";
header.style.textAlign = "center";
header.innerHTML = "Script Stats";
div.appendChild(header)
var x = document.createElement("TABLE");
//x.style.padding = "50px";
for (i = 0; i < matrix.length; i++) {
tableData[i] = [];
tableData[i][0] = document.createElement("TR");
x.appendChild(tableData[i][0]);
for (let k = 0; k < matrix[i].length; k++) {
var z = document.createElement("TD");
z.innerHTML = matrix[i][k];
z.style.textAlign = "center";
z.style.padding = "5px";
tableData[i][0].appendChild(z);
}
}
x.style.border = "2px solid white";
div.appendChild(x);
var bottom = document.createElement("div");
bottom.style.background = "red";
bottom.innerHTML = "Menu";
bottom.style.textAlign = "center";
div.appendChild(bottom);
document.body.appendChild(div);
}
createTable(divTable);
Okay, I reproduced your problem, and
a simple solution to your problem is
<style>
table { border-collapse: collapse; }
</style>
you can see it in action here :
https://jsbin.com/jenupigupe/edit?html,js,output
Related
I don't know if I'm doing the project "wrong" but so far this has been working. I'm basically just creating a JavaScript version of Etch a Sketch, where you hover your mouse over a div and it changes color. I need to create a button that resets the main div back to default, effectively "clearing" the page but nothing I try seems to work. Any suggestions?
const mainDev = document.createElement("div");
mainDev.style.width = "200px";
mainDev.style.height = "200px";
mainDev.style.display = "grid";
mainDev.id = "divId";
mainDev.style.gridTemplateColumns = "repeat(16, 1fr)";
let addMain = document.getElementById("main");
addMain.appendChild(mainDev);
for (let i = 0; i < 240; i++) {
const sixteenDivs = document.createElement("div");
sixteenDivs.classList.add("sixteen");
sixteenDivs.style.backgroundColor = "white";
sixteenDivs.style.width = "45px";
sixteenDivs.style.height = "45px";
sixteenDivs.style.border = "1px solid #000"
sixteenDivs.style.display = "grid";
sixteenDivs.style.margin = "5px 5px";
let mouseOver = function() { sixteenDivs.style.backgroundColor = "rgb(20, 20, 20)" };
sixteenDivs.onmouseover = mouseOver;
mainDev.appendChild(sixteenDivs);
}
function clearDiv() {
/// this is where I'm struggling
}
<div class="button">
<button class="clearBtn" onclick="clearDiv()">CLEAR</button>
</div>
<div id="main"></div>
const mainDev = document.createElement("div");
mainDev.style.width = "200px";
mainDev.style.height = "200px";
mainDev.style.display = "grid";
mainDev.id = "divId";
mainDev.style.gridTemplateColumns = "repeat(16, 1fr)";
let addMain = document.getElementById("main");
addMain.appendChild(mainDev);
for (let i = 0; i < 240; i++) {
const sixteenDivs = document.createElement("div");
sixteenDivs.classList.add("sixteen");
sixteenDivs.style.backgroundColor = "white";
sixteenDivs.style.width = "45px";
sixteenDivs.style.height = "45px";
sixteenDivs.style.border = "1px solid #000"
sixteenDivs.style.display = "grid";
sixteenDivs.style.margin = "5px 5px";
let mouseOver = function() {
sixteenDivs.style.backgroundColor = "rgb(20, 20, 20)"
};
sixteenDivs.onmouseover = mouseOver;
mainDev.appendChild(sixteenDivs);
}
function clearDiv() {
mainDev.childNodes.forEach((child) =>
child.style.backgroundColor = "white"
)
}
<div class="button">
<button class="clearBtn" onclick="clearDiv()">CLEAR</button>
</div>
<div id="main">
</div>
I am trying to get my div element to the center of the screen that I have aligned to the center but the top margin is still stuck on the top and not centered.
I have tried divElement.style.marginTop = "100px"; but that didn't change anything.
//this is the javascript
function stopDesc(){
var divElement = document.createElement("Div");
divElement.id = "divID";
// Styling it
divElement.style.textAlign = "center";
divElement.style.fontWeight = "bold";
divElement.style.fontSize = "smaller";
//divElement.style.marginTop = "100px";
divElement.style.paddingTop = "100px";
divElement.style.width = "500px";
divElement.style.height = "250px";
divElement.style.background = "orange";
divElement.style.margin="0 auto";
divElement.style.color = "white";
divElement.style.position="relative";
divElement.style.zIndex="1000";
// Adding a paragraph
var paragraph = document.createElement("P");
var text =
document.createTextNode("Text..................................");
paragraph.appendChild(text);
divElement.appendChild(paragraph);
// Adding a button
var button = document.createElement("Button");
var textForButton = document.createTextNode("Next->");
button.appendChild(textForButton);
button.addEventListener("click", function(){
alert("Hi!");
});
divElement.appendChild(button);
// Appending the div element to body
document.getElementsByTagName("body")[0].appendChild(divElement);
//document.getElementById("divID").setAttribute('align','center');
}
Right now the div is centered but the top is stuck to the top of the screen and I want it in the center or at least 100px down from the top.
Edit this line:
divElement.style.margin="0 auto";
and make it:
divElement.style.margin="100px auto";
maybe you've added divElement.style.marginTop = "100px" above that line of code so that it was overriden.
var divElement = document.createElement("Div");
divElement.id = "divID";
// Styling it
divElement.style.textAlign = "center";
divElement.style.fontWeight = "bold";
divElement.style.fontSize = "smaller";
//divElement.style.marginTop = "100px";
divElement.style.paddingTop = "100px";
divElement.style.width = "500px";
divElement.style.height = "250px";
divElement.style.background = "orange";
divElement.style.margin="100px auto";
divElement.style.color = "white";
divElement.style.position="relative";
divElement.style.zIndex="1000";
// Adding a paragraph
var paragraph = document.createElement("P");
var text =
document.createTextNode("Text..................................");
paragraph.appendChild(text);
divElement.appendChild(paragraph);
// Adding a button
var button = document.createElement("Button");
var textForButton = document.createTextNode("Next->");
button.appendChild(textForButton);
button.addEventListener("click", function(){
alert("Hi!");
});
divElement.appendChild(button);
// Appending the div element to body
document.getElementsByTagName("body")[0].appendChild(divElement);
//document.getElementById("divID").setAttribute('align','center');
I'm making an rgb guesser game for school, and the stretch goal I'm trying to reach is "making divs in javascript". For some reason, my divs aren't appearing when I'm making them. Here's the javascript code snippers
dothething()
function dothething(){
divs = MakeDivs(4);
var randomcolor = Math.floor(Math.random()*4);
WinningDiv = divs[randomcolor];
}
function MakeDivs(X){
for(i = 0;i<=X;i++){
var div = (document.createElement("div"));
div.style.borderRadius = "50%";
div.height = "100px";
div.width = "125px";
}
console.log(divs)
var container = document.getElementById("container")
container.appendChild(div);
return divs
}
and here's some filler html
<body>
<div> FillerDiv</div>
</body>
You need to include the append inside the loop and use a correct control to append your DIV. Also in case you want to return your DIVs elements, add them to array and return them as in below code:
function MakeDivs(X){
var divs = [];
for(i = 0;i<=X;i++){
var div = (document.createElement("div"));
div.style.borderRadius = "50%";
div.height = "100px";
div.width = "125px";
document.body.appendChild(div);
divs.push(div);
}
console.log(divs)
return divs
}
You have to embed container.appendChild(div); inside the loop. In your original code, you have just appended the last div.
function MakeDivs(X){
var container = document.getElementById("container");
var divs = [];
for(i = 0;i<=X;i++){
var div = (document.createElement("div"));
div.style.borderRadius = "50%";
div.height = "100px";
div.width = "125px";
divs.push(div);
container.appendChild(div);
}
console.log(divs);
return divs;
}
You forgot to append the div to the container.
var div = (document.createElement("div"));
div.style.borderRadius = "50%";
div.height = "100px";
div.width = "125px";
container.appendChild(div);
Missing array of divs.
Incorrect way to apply width and height.
div.height = "100px";
^
div.width = "125px";
^
dothething()
function dothething() {
divs = MakeDivs(4)
var randomcolor = Math.floor(Math.random() * 4)
WinningDiv = divs[randomcolor]
}
function MakeDivs(X) {
var container = document.getElementById("container");
var divs = [];
for (i = 0; i <= X; i++) {
var div = (document.createElement("div"));
div.style.borderRadius = "50%";
div.style.height = "100px";
div.style.width = "125px";
container.appendChild(div);
divs.push(div);
}
//console.log(divs)
return divs
}
#container div {
background-color: lightgreen;
}
<div>
FillerDiv
<div id='container'></div>
</div>
This is helpful for you. Without defining HTML tag ID you are getting Id container. The variable should be defined before use anywhere.
You missed divs array to define. You should add every div in the loop.
dothething()
function dothething(){
var divs = MakeDivs(4)
var randomcolor = Math.floor(Math.random()*4)
WinningDiv = divs[randomcolor]
}
function MakeDivs(X){
var container = document.getElementById("container");
var divs = [];
for(i = 0;i<=X;i++){
var div = document.createElement("div");
div.style.borderRadius = "50%";
div.height = "100px";
div.width = "125px";
div.innerHTML = 'Test'+i;
divs.push(div);
container.appendChild(div);
}
console.log(divs);
return divs
}
<body>
<div id="container"> FillerDiv</div>
</body>
You can use documentFragment for creating a block which contains all the colored divs. I've refactored a little bit your code. You can check the solution on jsfiddle - https://jsfiddle.net/2zcg59sd/ or you can run the snippet here.
dothething()
function dothething(){
var divs = MakeDivs(4) ;
document.getElementById("randomColors").appendChild(divs);
}
function MakeDivs(X){
var docFragment = document.createDocumentFragment();
for(i = 0;i<=X;i++){
var randomcolor = Math.floor(Math.random()*900000) + 100000;
var newDiv = document.createElement("div");
newDiv.style.borderRadius = "50%";
newDiv.style.height = "100px";
newDiv.style.float = "left";
newDiv.style.width = "125px";
newDiv.style.backgroundColor = "#" + randomcolor;
docFragment.appendChild(newDiv);
}
return docFragment
}
<div> FillerDiv</div>
<div id="randomColors"></div>
I am trying to create 4 div(s) that are supposed to have a width of 5px and sit at the top, bottom, left and right margins of the viewport, essentially acting all together as a frame or border to the page.
Here is my code:
function border () {
edgeT = document.createElement('div');
edgeT.style.position = "fixed"
edgeT.style.left = 0;
edgeT.style.top = 0;
edgeT.style.right = 0;
edgeT.style.width = "5px";
edgeT.style.backgroundColor= "black";
document.body.appendChild(edgeT);
edgeB = document.createElement('div');
edgeB.style.position = "fixed"
edgeB.style.left = 0;
edgeB.style.right = 0;
edgeB.style.bottom = 0;
edgeB.style.width = "5px";
edgeB.style.backgroundColor= "black";
document.body.appendChild(edgeB);
edgeL = document.createElement('div');
edgeL.style.position = "fixed"
edgeL.style.left = 0;
edgeL.style.top = 0;
edgeL.style.bottom = 0;
edgeL.style.width = "5px";
edgeL.style.backgroundColor= "black";
document.body.appendChild(edgeL);
edgeR = document.createElement('div');
edgeR.style.position = "fixed"
edgeR.style.top = 0;
edgeR.style.bottom = 0;
edgeR.style.right = 0;
edgeR.style.width = "5px";
edgeR.style.backgroundColor= "black";
document.body.appendChild(edgeR);
}
For some reason, when calling the function, the left and right divs (i.e. edgeL and edgeR) are displayed properly, but there is no trace of edgeT and edgeB (top and bottom ones). I cannot understand why since the code is exactly the same for all four of them. FYI the problem is relevant in both Chrome and Firefox.
I know I could use CSS to achieve the same result, but since this is mostly a learning exercise I would still like to understand what is causing the issue in this case.
Thank you all in advance for your help.
Regards,
You should define for the top and bottom divs width: 100% and height: 5px (they're aligned horizontally) and for the left and right divs width: 5px and height: 100% (aligned vertically).
var edgeT = document.createElement('div');
edgeT.style.position = "fixed"
edgeT.style.top = 0;
edgeT.style.left = 0;
edgeT.style.width = "100%";
edgeT.style.height = "5px";
edgeT.style.backgroundColor= "black";
document.body.appendChild(edgeT);
var edgeB = document.createElement('div');
edgeB.style.position = "fixed"
edgeB.style.bottom = 0;
edgeB.style.left = 0;
edgeB.style.width = "100%";
edgeB.style.height = "5px";
edgeB.style.backgroundColor= "black";
document.body.appendChild(edgeB);
var edgeL = document.createElement('div');
edgeL.style.position = "fixed"
edgeL.style.left = 0;
edgeL.style.top = 0;
edgeL.style.width = "5px";
edgeL.style.height = "100%";
edgeL.style.backgroundColor= "black";
document.body.appendChild(edgeL);
var edgeR = document.createElement('div');
edgeR.style.position = "fixed"
edgeR.style.right = 0;
edgeR.style.top = 0;
edgeR.style.width = "5px";
edgeR.style.height = "100%";
edgeR.style.backgroundColor= "black";
document.body.appendChild(edgeR);
If you want to see the top and the bottom then you need to give them a height, not a width.
I am trying to overlay text onto a hyperlinked image which has been dynamically created using the document.createElement() function. However, even with an absolute position of left: 0px and top: 0px, the text keeps appearing below the image, and not at the top, left corner as it should:
//mainDiv is a container to hold all the hyperlinked images
for (i = 0; i < imgArray.length; i++)
{
img = document.createElement("img");
img.src = imgArray[i].src;
img.style.width = imgArray[i].wdth;
img.style.height = "auto";
imgLink = document.createElement("a");
imgLink.href = imgArray[i].url;
imgLink.appendChild(img);
imgLabel = document.createElement("p");
imgLabel.innerHTML = imgArray[i].desc;
imgLabel.style.position = "absolute";
imgLabel.style.top = "0px";
imgLabel.style.left = "0px";
imgContainer = document.createElement("div");
imgContainer.style.display = "inline";
imgContainer.style.position = "relative";
imgContainer.appendChild(imgLabel);
imgContainer.appendChild(imgLink);
mainDiv.appendChild(imgContainer);
}
The only problem is the positioning of the text div, imgLabel.
Here's a simplified example of the issue on jsFiddle: http://jsfiddle.net/mPL3q/1/
block & inline-block does not work: http://jsfiddle.net/MwjXV/
1st solution
// label
imgLabel.style.position = "absolute";
imgLabel.style.top = "0px";
imgLabel.style.left = "0px";
imgLabel.style.margin = '0px';
// container
imgContainer.style.position = "relative";
// tip: parent element of another element containing floated elements
// should have property overflow set to hidden
imgContainer.style.float = "left";
imgContainer.style.margin = "5px";
2nd solution
// label
imgLabel.style.position = "absolute";
imgLabel.style.top = "0px";
imgLabel.style.left = "0px";
imgLabel.style.margin = "0px";
// container
imgContainer.style.display = "inline-block";
imgContainer.style.position = "relative";
// you will have gaps between the containers even if the margin is set to 0
imgContainer.style.margin = "0px";
// if you don't want these gaps, set margin-left to -5px (but not to the first element)
if(i !== 0){
imgContainer.style.marginLeft = "-5px";
}
EDIT After analyzing your code...
// change <p> to <label>
imgLabel = document.createElement("label");
imgLabel.innerHTML = "Image " + i;
imgLabel.style.left = "0px";
// you don't need the next line ;)
//imgLabel.style.top = "0px";
imgLabel.style.color = "White";
imgLabel.style.position = "absolute";
1st jsFiddle | 2nd jsFiddle | 3rd jsFiddle
You can do this, add
img.style.zIndex="1";
and
imgLink.style.display = "block";
to their respective blocks
http://jsfiddle.net/mPL3q/8/
OR
if inline-block works for you then
imgContainer.style.display = "inline-block";
http://jsfiddle.net/mPL3q/7/