Some div(s) not displaying when using createElement and appendChild - javascript

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.

Related

Why squares don't fit inside div

I am struggling to fill div element with square cells entirely.
right now these square cells fall out of the div, don't fit properly etc.
I am not sure what causes it.
Any ideas?
var cell_side_len = 50;
var grid_width = 400;
var grid_height = 300;
var container = document.getElementById("container");
container.style.border = "solid black";
container.style.width = grid_width+"px";
container.style.height = grid_height+"px";
for(var i = 0; i < grid_width/cell_side_len; i++){
for(var j = 0; j < grid_height/cell_side_len; j++){
var cell = document.createElement('div');
cell.style.height = cell_side_len + 'px';
cell.style.width = cell_side_len + 'px';
cell.style.border = "1px solid black";
cell.style.float = "left";
container.appendChild(cell);
}
}
<div id="container"></div>
Problem you have is the fact the border is NOT part of the width/height. So what you have have is everything is a width of 52px, not 50px. This is the basic box model.
What can you do?
Change your width to 48
or Use box-sizing: border-box;
or Drop the border for outline
or use a modern approach with flexbox or grid.
You are setting the content width of each cell to be 50px, and then adding a 1px border on each side, making each cell have a total width of 52px. This does not fit evenly into the 400px-width container.
You can fix this by saying "when I say width, I mean the content, the padding, and the border all together!". To do so, you should add the following CSS:
box-sizing: border-box;
To do that in JavaScript, you would write
cell.style["box-sizing"] = "border-box";
// or
cell.style.boxSizing = "border-box";

Border does not go around full table

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

How can I make a 40x40 grid using divs?

I am basically trying to create using javascript a 40x40 red grid of divs in my html document.
Here's my loop:
for(var i = 0; i < 40; i++) {
for(var j = 0; j< 40; j++) {
var div = document.createElement("div");
div.style.width = "25px";
div.style.height = "25px";
div.style.background = "red";
}
var jump = document.createElement("br");
document.getElementById("container").appendChild(jump);
document.getElementById("container").appendChild(div);
}
The problem is I can't seem to get it to form a square of all the divs I created. The container is 1000 x 1000 px.
Thank you
All you need is to put the last 3 lines inside the inner loop (not inside the outer loop):
for(var i = 0; i < 40; i++) {
for(var j = 0; j< 40; j++) {
var div = document.createElement("div");
div.style.width = "25px";
div.style.height = "25px";
div.style.background = "red";
var jump = document.createElement("br");
document.getElementById("container").appendChild(jump);
document.getElementById("container").appendChild(div);
}
}
Also, don't forget to set the 'display' to 'inline-block':
div.style.display = "inline-block";
Or, you have to use the 'float' attribute:
div.style.float = "left";
EDIT:
Use row-div to group each 40 cells in a row:
for(var i = 0; i < 40; i++) {
var row = document.createElement("div");
for(var j = 0; j< 40; j++) {
var cell = document.createElement("div");
cell.style.width = "25px";
cell.style.height = "25px";
cell.style.background = "red";
cell.style.display = "inline-block"
row.appendChild(cell);
}
document.getElementById("container").appendChild(row);
}
I believe what you want is the following:
for (var i = 0; i < 40; i++) {
for (var j = 0; j < 40; j++) {
var div = document.createElement("div");
div.style.width = "25px";
div.style.height = "25px";
div.style.background = "red";
document.getElementById("container").appendChild(div);
}
var jump = document.createElement("br");
document.getElementById("container").appendChild(jump);
}
#container {
width:1000px;
height:1000px;
}
#container div {
display:inline-block;
vertical-align:top;
}
<div id="container"></div>
Your inner divs can be inline-block elements so that they flow next to each other (since divs by default are block level). You also need to insert a line break after each inner (j) loop. So the process would be: generate 40 inline divs, insert a line break, generate 40 inline divs, insert a line break,...(repeat 38 more times).
First of all, you need to append the created div on each loop iteration.
Second, you need to set the divs as display: inline or display: inline-block
for(var i = 0; i < 40; i++) {
for(var j = 0; j< 40; j++) {
var div = document.createElement("div");
div.style.width = "25px";
div.style.height = "25px";
div.style.background = "red";
document.getElementById("container").appendChild(div);
}
}
#container {
width: 1000px;
height: 1000px;
}
#container > div {
display: inline-block;
}
<div id="container"></div>
Here, this actually creates 40 divs in 40 parent divs (like rows):
for(var i = 0; i < 40; i++) {
var div1 = document.createElement('div')
for(var j = 0; j< 40; j++) {
var div = document.createElement("div");
div.style.width = "25px";
div.style.height = "25px";
div.style.background = "red";
div.style.display = 'inline-block';
div.style.margin = '1px'
div1.appendChild(div)
}
document.getElementById('container').appendChild(div1);
}
http://plnkr.co/edit/1jVBeYIMaGfzzgqt7yUj?p=info
Adding a bit of CSS and inline-block
Divs are typically block elements, you need to make them inline-blocks to help you with your grid.
If you want to remove the line gaps, play with margins (i.e. margin: 0; to reduce or margin: 0 1px; to add to the sides of each square)
for (var i = 0; i < 40; i++) {
var jump = document.createElement("br");
for (var j = 0; j < 40; j++) {
var div = document.createElement("div");
div.style.width = "25px";
div.style.height = "25px";
div.style.background = "red";
document.getElementById("container").appendChild(div);
}
document.getElementById("container").appendChild(jump);
}
#container div {
/* you need this */
display: inline-block;
}
#container {
width: 1000px;
height: 1000px;
}
<div id="container">
</div>
You can use a mix of css, html and javascript.
IMHO, the best way is to take advantage of CSS classes and instead of creating each element individually in javascript, you can use cloneNode() to clone the first "box".
Here's an example (fiddle here) and snippet below
var parent = document.getElementById('parent'),
box = parent.children[0];
for (var i = 0; i < 100; ++i) {
var nBox = box.cloneNode(true);
parent.appendChild(nBox);
}
.grid {
width: 1000px;
height: 1000px;
background-color: green;
}
.box {
float: left;
width: 40px;
height: 40px;
background-color: red;
border: 1px solid white;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
<div id="parent" class="grid">
<div class="box"> </div>
</div>
Here this will do it for you:
<body onload="makeGrid()" id="container">
<body>
<script>
function makeGrid(){
for(var i = 0; i < 40; i++) {
for(var j = 0; j< 40; j++) {
var div = document.createElement("div");
div.style.width = "25px";
div.style.height = "25px";
div.style.background = "red";
document.getElementById("container").appendChild(div);
}
//document.getElementById("container").appendChild(jump);
//document.getElementById("container").appendChild(div);
}
}
</script>
CSS
#container{width: 1000px; height: 1000px;}
div{float: left;}
See example: http://jsfiddle.net/bun4g2d0/9/

Turning off opacity on centered div

I am writing a box that appears in the center of a website. To do that I dynamically (js) create two elements - overlay that covers whole page and has 0.5 opacity to show some website, and a box that should have no opacity.
The problem is that both the overlay and the box are a bit transparent.
this.createOverlay = function () {
handler = document.createElement('div');
handler.style.display = 'hidden';
handler.style.width = '100%';
handler.style.height = '100%';
handler.style.top = 0;
handler.style.left = 0;
handler.style.position = 'absolute';
handler.style.background = 'black';
handler.style.color = "#aaaaaa";
handler.style.opacity = "0.5";
handler.style.filter = "alpha(opacity = 5)";
return this;
};
this.createCenteredBox = function (width, height, url) {
var data = JSON.parse(data);
handler = document.createElement('a');
handler.href = data.product_feed_deep_link;
handler.target = "_blank";
handler.style.display = "block";
handler.style.width = width + "px";
handler.style.height = height + "px";
handler.style.position = "absolute";
handler.style.color = "black";
handler.style.backgroundColor = "#ffffff";
handler.style.opacity = "1";
handler.style.top = "50%";
handler.style.left = "50%";
handler.style.marginTop = "-" + height / 2 + "px";
handler.style.marginLeft = "-" + width / 2 + "px";
handler.style.padding = "0 10px 10px 10px";
handler.style.borderRadius = "4px";
var div = document.createElement('div');
handler.appendChild(div);
return this;
};
This is the code, I can't turn off box'es opacity no matter if I set opacity to 1 on it, or opacity filter, or whatever.
How can I solve this?
Opacity isn't inherited (see here), however, all elements that reside inside (descendants) of that elements that the opacity property is applied to will be effected.
The best way to get around this is to use rgba.
handler.style.background = "rgba(0, 0, 0, .5)"; // RGB 0,0,0 is #000 (black).
//handler.style.opacity = "0.5";
//handler.style.filter = "alpha(opacity = 5)";
See 2nd and 3rd answer here as well

Absolute positioning for dynamically created elements

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/

Categories