Removing white lines in table element - javascript

I wrote a js code to make the table and the tds and trs but there are these weird white lines between and I'm pretty sure that's a problem with one of the CSS properties but I just can't find the thing I need to change.
I am kind of a beginner programmer. Help will be welcome and if you have improvements to the code or maybe just a suggestion or something on how to continue my programing journey I will be very glad :)
const board = document.getElementById("board");
let black = true;
for(let i = 1; i <= 8; i++){
let row = document.createElement("tr");
if(black){
row.classList.add("black");
}
else{
row.classList.add("black");
}
black = !black;
board.appendChild(row);
for(let j = 1; j <= 8; j++){
let column = document.createElement("td");
if(black){
row.classList.add("black");
}
else{
row.classList.add("white");
}
black = !black;
board.appendChild(column);
}
}
.black {
background: black;
}
.white {
background: white;
}
table {
height: 900px;
width: 900px;
border: 2px solid black;
display: inline-block;
margin: -1px;
border-collapse: collapse;
}
td, tr {
border: 2px solid black;
height: 112.5px;
width: 112.5px;
}
td::after {
content: ' ';
display: block;
margin-top: 100%;
}
.sqr {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="chessContainer">
<table id="board">
</table>
</div>
<script src="chess.js"></script>
</body>
</html>

Your issue is in the javascript, you want to append the columns (td) to the row (tr) then append the row to the board.
board.appendChild(row); this is your issue. Change it to row.appendChild(column);
NOTE: If you right click browser when you run it and look at the way your table is built, you will see that you are creating a tr and there is nothing inside the row, then you have 8 td tags and the html continues in that manner. This should be the clue to look at.
const board = document.getElementById("board");
let black = true;
for(let i = 1; i <= 8; i++){
let row = document.createElement("tr");
// let sqr = document.createElement("div");
//sqr.classList.add("sqr");
if(black){
row.classList.add("black");
}
else{
row.classList.add("black");
}
black = !black;
//row.appendChild(sqr);
board.appendChild(row);
for(let j = 1; j <= 8; j++){
let column = document.createElement("td");
//let sqr2 = document.createElement("div");
//sqr2.classList.add("sqr");
if(black){
row.classList.add("black");
}
else{
row.classList.add("white");
}
black = !black;
// column.appendChild(sqr2);
row.appendChild(column);
}
}
.black {
background: black;
}
.white {
background: white;
}
table {
height: 900px;
width: 900px;
border: 2px solid black;
display: inline-block;
margin: -1px;
border-collapse: collapse;
}
td, tr {
border: 2px solid black;
height: 112.5px;
width: 112.5px;
}
td::after {
content: ' ';
display: block;
margin-top: 100%;
}
.sqr {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="chessContainer">
<table id="board">
</table>
</div>
<script src="chess.js"></script>
</body>
</html>

Related

How to create a grid that includes resizable divs - never exceeds the size of the main container?

I am able to create the grid using a for loop. I then prompt for the number of rows and number of columns as the x and y values, respectively. I am having trouble understanding how one would go about creating divs that resize to fit the size of a container - with the container never exceeding the size of the page(?). Any suggestions?
let x = parseInt(prompt("how many rows?"));
let y = parseInt(prompt("how many columns?"));
const reset = document.getElementById("reset");
reset.addEventListener("click", function() {
location.reload();
});
const container = document.getElementById("container");
const rows = document.getElementsByClassName("gridRow");
const cells = document.getElementsByClassName("cell");
function makeGrid() {
makeRows(x);
makeCols(y);
}
function makeRows(rowNum) {
for (i = 0; i < rowNum; i++) {
let row = document.createElement("div");
container.appendChild(row).className = "gridRow";
}
}
function makeCols(colNum) {
for (i = 0; i < rows.length; i++) {
for (j = 0; j < colNum; j++) {
let col = document.createElement("div");
rows[j].appendChild(col).className = "cell";
}
}
}
makeGrid();
:root {
display: flex;
justify-content: center;
align-items: center;
}
.cell {
border: 1px solid gray;
min-width: 30px;
min-height: 30px;
margin: 4px;
display: inline-flex;
}
.cell:hover {
cursor: pointer;
background-color: antiquewhite;
}
.cell:active {
background-color: antiquewhite;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="script.js" defer></script>
<link rel="stylesheet" href="style.css" />
<title>Etch-A-Sketch</title>
</head>
<body>
<button id="reset" class="reset">RESET</button>
<div id="container"></div>
</div>
</body>
</html>
I'm not sure I understand the whole question, but here is an example that will share the width and height of the grid itself.
The key is to use the flex layout and fix the initial grid size using vw and vh units.
I have simplified the code to focus on a minimal example.
function makeCells(rows, columns) {
let grid = document.getElementById("grid");
for (i = 0; i < rows; i++) {
let row = document.createElement("div");
row.className = "row";
for (j = 0; j < columns; j++) {
let column = document.createElement("div");
column.className = "cell";
row.appendChild(column);
}
grid.appendChild(row);
}
}
makeCells(4, 3);
.grid {
display: flex;
flex-direction: column;
align-items: stretch;
border: 1px solid red;
width: 50vw; /* 50% of viewport width */
height: 50vh; /* 50% of viewport height */
}
.row {
display: flex;
flex-direction: row;
align-items: stretch;
border: 1px solid blue;
height: 100%;
}
.cell {
border: 1px solid green;
height: 100%;
width: 100%;
}
<div id="grid" class="grid"></div>

Add Active Class to Current selected svg using js

the svg id = "map"
the normal path class = "T"
Selected class ="Tactive"
Tcurrent is a active shave by Default
var oMap= document.getElementById("map");
var oRng= document.getElementsByClassName("T");
var Tcurrent
for (var j = 0; j < oRng.length; j++) {
oRng[j].addEventListener("click", function () {
Tcurrent = document.getElementsByClassName("T Tactive");
Tcurrent[0].classList ="T"
this.classList = "T Tactive";
});
}
Hopefully this may help...
$('.svg').click(function() {
$('.svg').removeClass('selected'); // removes initial selected classes.
this.classList.add('selected'); // adds selected class for clicked svg.
});
.svg {
margin: 15px;
padding: 8px;
height: 100px;
width: 100px;
display: inline-block;
background: #eee;
border-radius: 4px;
}
.svg:hover {
cursor: pointer;
}
.selected {
border: 2px solid #333;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Selected</title>
</head>
<body>
<main>
<div class="svg">a.</div>
<div class="svg">b.</div>
</main>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>
</html>

Javascript Nested While Loops using Document.Write

I am simply trying to run a javascript that will create a "grid" table for me. Here's my code...
<!DOCTYPE html>
<html>
<head>
<style>
* {margin: 0;}
body {width: 100%; height: 100%;}
table {margin: 20px auto; border-collapse: collapse;}
td {border: thin solid black; height: 5px; width: 5px;}
</style>
</head>
<body>
<table>
<script>
var x = 1;
var y = 1;
while (x < 10) {
document.write("<tr>");
while (y < 10) {
document.write("<td></td>");
y++;
}
document.write("</tr>");
x++;
}
</script>
</table>
</body>
When I run this, the nested WHILE loop works but the first one only runs once giving me one row of 9 blocks.
However if I comment out the nested loop and add in a simple output to make it look like...
<script>
var x = 1;
while (x < 10) {
document.write("<tr>");
document.write("<td></td>");
document.write("</tr>");
x++;
}
</script>
It will correctly print out 1 column of 9 rows... what am I missing??
Thanks.
You have to reset your y-variable after the y-loop finishes, else it will never enter the loop after the first time if exits the loop.
Though, I would recommend using for loops, since those are more appropriate for your case.
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
}
body {
width: 100%;
height: 100%;
}
table {
margin: 20px auto;
border-collapse: collapse;
}
td {
border: thin solid black;
height: 5px;
width: 5px;
}
</style>
</head>
<body>
<table>
<script>
var x = 1;
var y = 1;
while (x < 10) {
document.write("<tr>");
while (y < 10) {
document.write("<td></td>");
y++;
}
y = 1;
document.write("</tr>");
x++;
}
</script>
</table>
</body>
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
}
body {
width: 100%;
height: 100%;
}
table {
margin: 20px auto;
border-collapse: collapse;
}
td {
border: thin solid black;
height: 5px;
width: 5px;
}
</style>
</head>
<body>
<table>
<script>
for (var x = 1; x < 10; x++) {
document.write("<tr>");
for (var y = 1; y < 10; y++) {
document.write("<td></td>");
}
document.write("</tr>");
}
</script>
</table>
</body>
Also note that every time you use the document.write method, the browser will have to reparse your whole DOM, which is not good for performance.

Java script dynamically add video element in grid HTML

I am trying to display videos in grid as shown in the example here http://jsfiddle.net/5qdojj83/
I have modified the code to add the video from JavaScript dynamically, but now it seems the boarder of the grid with different width.
I have used fixed width in JS for video because the source video can be with different resolution and size.
What wrong with below code?
<!DOCTYPE html>
<html>
<head>
<title>Responsive Image Grids Using CSS</title>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<style type="text/css">
.videoGrid {
border-spacing: 2px;
background-color: #333;
width: 100%;
height: 100%
border-collapse: collapse;
text-align: center;
}
td {
background-color:orange;
border: 1px solid gray;
padding: 6px;
width: 33%;
display: inline-block;
}
.videoBg {
overflow: hidden;
}
.videoBg video{
min-width: 100%;
min-height: 100%;
}
</style>
</head>
<body>
<table class="videoGrid">
<tr id="video_table">
</tr>
</table>
<script>
loadImages();
function loadImages(){
var urls = ["http://www.w3schools.com/html/mov_bbb.mp4",
"http://www.w3schools.com/html/mov_bbb.mp4",
"http://www.w3schools.com/html/mov_bbb.mp4",
"http://www.w3schools.com/html/mov_bbb.mp4"
];
for(var i = 0; i < urls.length; i++) {
var obj = urls[i];
var source = document.createElement('video');
source.width=400;
source.height=300;
source.src = obj;
source.controls = true;
source.type = "mp4";
var td = document.createElement("td");
var div = document.createElement("div");
div.className = "videoBg";
div.appendChild(source);
td.appendChild(div);
document.getElementById("video_table").appendChild(td);
}
}
</script>
</body>
</html>
Try this,
<!DOCTYPE html>
<html>
<head>
<title>Responsive Image Grids Using CSS</title>
<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<style type="text/css">
.videoGrid {
border-spacing: 2px;
background-color: #333;
width: 100%;
height: 100%
border-collapse: collapse;
text-align: center;
}
td {
background-color:orange;
border: 1px solid gray;
padding: 6px;
width: 33%;
display: inline-block;
}
.videoBg {
overflow: hidden;
}
.videoBg video{
min-width: 100%;
min-height: 100%;
}
video{
width:100%;
height:100%;
}
</style>
</head>
<body>
<table class="videoGrid">
<tr id="video_table">
</tr>
</table>
<script>
loadImages();
function loadImages(){
var urls = ["http://www.w3schools.com/html/mov_bbb.mp4",
"http://www.w3schools.com/html/mov_bbb.mp4",
"http://www.w3schools.com/html/mov_bbb.mp4",
"http://www.w3schools.com/html/mov_bbb.mp4"
];
for(var i = 0; i < urls.length; i++) {
var obj = urls[i];
var source = document.createElement('video');
source.src = obj;
source.controls = true;
source.type = "mp4";
var td = document.createElement("td");
var div = document.createElement("div");
div.className = "videoBg";
div.appendChild(source);
td.appendChild(div);
document.getElementById("video_table").appendChild(td);
}
}
</script>
</body>
</html>

My circle-divs doesn't working. Why?

I am trying to create a game board for Barricade but I am failing with the first step, creating a simple grid of circles before specifying which circles are visible.
Should I draw it with a canvas?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Boardgame</title>
<style type="text/css">
.circleBase {
-webkit-border-radius: 999px;
-moz-border-radius: 999px;
border-radius: 999px;
behavior: url(PIE.htc);
}
.type1 {
width: 30px;
height: 30px;
background: yellow;
border: 3px solid red
}
</style>
<script type="text/javascript">
function genDivs(){
var v = 10;
var e = document.body;
for(var i = 0; i < v; i++)
{
var row = document.createElement("circleBase type1");
for(var x = 1; x <= v; x++)
{
var cell = document.createElement("circleBase type1");
//cell.innerText = (i * v) + x;
row.appendChild(cell);
}
e.appendChild(row);
}
document.getElementById("code").innerText = e.innerHTML;
}
</script>
</head>
<body>
<input type="button" onclick="genDivs()" value="click me">
</body>
</html>
Properly create an element:
var element= document.createElement('div');
element.className = 'circleBase type1';
Also, you only need to set border-radius to 50%:
.circleBase {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
behavior: url(PIE.htc);
}
document.createElement() expects the tag name like "p", "div" etc. You may create a <div/> with
var row = document.createElement("div");
As far as I understand, you don't need to add the classes to the rows, just to the cells:
var row = document.createElement("div");
for(var x = 1; x <= v; x++)
{
var cell = document.createElement("div");
cell.setAttribute("class", "circleBase type1");
row.appendChild(cell);
}
To keep the rows while floating the cells use
body > div:after {
display: block;
content: '';
clear: both;
}
.type1 {
float: left;
width: 30px;
height: 30px;
background: yellow;
border: 3px solid red
}
Here is a demo.

Categories