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>
Related
This question already has answers here:
What is the difference between "let" and "var"?
(39 answers)
Closed 12 months ago.
This is a simple javascript code. I'm creating 5 divs in script and populate an 'onclick' event for each. However, all of them give me the id of the last one. Any idea why this behavior occurring? Many thanks.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test Page</title>
<style type="text/css">
.divImgPoint {
float: left;
border-radius: 50%;
width: 15px;
height: 15px;
margin-left: 5px;
margin-right: 5px;
border: ridge 2px #c73756;
}
.divTest {
position: absolute;
width: 100px;
height: 100px;
top: 200px;
left: 100px;
border: 1px solid red;
}
</style>
<script type="text/javascript">
function createNewDivs() {
var divFixed = document.getElementById('divFixed');
var newDiv;
for (xI = 0; xI < 5; xI++) {
newDiv = document.createElement('div');
newDiv.id = "newDiv_" + xI;
newDiv.className = "divImgPoint";
newDiv.onclick = () => { alert(newDiv.id + " | " + xI); }
divFixed.appendChild(newDiv);
}
}
</script>
</head>
<body>
<div id="divFixed">
</div>
</body>
</html>
<script type="text/javascript">
window.addEventListener('load', () => { createNewDivs(); });
</script>
Put let newDiv; inside loop.
Like
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test Page</title>
<style type="text/css">
.divImgPoint {
float: left;
border-radius: 50%;
width: 15px;
height: 15px;
margin-left: 5px;
margin-right: 5px;
border: ridge 2px #c73756;
}
.divTest {
position: absolute;
width: 100px;
height: 100px;
top: 200px;
left: 100px;
border: 1px solid red;
}
</style>
<script type="text/javascript">
function createNewDivs() {
var divFixed = document.getElementById('divFixed');
for (xI = 0; xI < 5; xI++) {
let newDiv;
newDiv = document.createElement('div');
newDiv.id = "newDiv_" + xI;
newDiv.className = "divImgPoint";
newDiv.onclick = () => { alert(newDiv.id + " | " + xI); }
divFixed.appendChild(newDiv);
}
}
</script>
</head>
<body>
<div id="divFixed">
</div>
</body>
</html>
<script type="text/javascript">
window.addEventListener('load', () => { createNewDivs(); });
</script>
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>
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>
I am not quite sure how to phrase my question, so please forgive me. My plan was to create giant images of letters that make up the words "Hello World". I wanted to have these words nest inside of the big boxes and later decided to have each word be inside a smaller box. In the picture, I have created a small box (the sized has not been permanently set, I was just testing). But when I created the second small box, it flew out of the big box. In my index.html file, the <div> for the second small box was nested inside the big box div.
Here is the code:
INDEX.HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="script.js"></script>
<div class = "box">
<div class = "hello-box"></div>
<div class = "h-left"></div>
<div class = "h-mid"></div>
<div class = "h-right"></div>
</div>
<div class = "world-box">
</div>
</div>
</body>
</html>
STYLE.CSS
body {
background-color: skyblue;
}
.box {
position: relative;
margin: auto;
margin-top: 15%;
display: block;
border: 3px solid black;
width: 800px;
height: 500px;
}
.hello-box {
position: relative;
margin: auto;
margin-top: 125px;
width: 100px;
height: 100px;
border: 1px solid black;
}
.world-box {
position: relative;
margin: auto;
margin-top: 125px;
width: 100px;
height: 100px;
border: 1px solid black;
}
RESULT
Any help would very appreciated!!!
.flex-container {
display: flex;
flex-wrap: nowrap;
background-color: DodgerBlue;
}
.flex-container > div {
background-color: #f1f1f1;
width: 100px;
margin: 10px;
text-align: center;
line-height: 75px;
font-size: 30px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="script.js"></script>
<div class="flex-container">
<div>H</div>
<div>E</div>
<div>L</div>
<div>L</div>
<div>O</div>
<div>W</div>
<div>O</div>
<div>R</div>
<div>L</div>
<div>D</div>
<div>!</div>
</div>
</body>
</html>
using flexbox
Assuming you're able to modify the HTML, the easiest way to fix this would be to simply shift your .world-box <div> to be inside of your .box <div>:
body {
background-color: skyblue;
}
.box {
position: relative;
margin: auto;
margin-top: 15%;
display: block;
border: 3px solid black;
width: 800px;
height: 500px;
}
.hello-box {
position: relative;
margin: auto;
margin-top: 125px;
width: 100px;
height: 100px;
border: 1px solid black;
}
.world-box {
position: relative;
margin: auto;
margin-top: 125px;
width: 100px;
height: 100px;
border: 1px solid black;
}
<body>
<div class="box">
<div class="hello-box"></div>
<div class="h-left"></div>
<div class="h-mid"></div>
<div class="h-right"></div>
<div class="world-box"></div>
</div>
</body>
I would actually create a function that would put anything you want into some kind of wrapper, like so:
/* js/external.js */
//<![CDATA[
var doc, bod, M, I, S, Q, special, unspecial, shuffle, ReaderBoard, autoBoard, randBoard; // for use on other loads
addEventListener('load', function(){
doc = document; bod = doc.body;
M = function(tag){
return doc.createElement(tag);
}
I = function(id){
return doc.getElementById(id);
}
S = function(selector, within){
var w = within || doc;
return w.querySelector(selector);
}
Q = function(selector, within){
var w = within || doc;
return w.querySelectorAll(selector);
}
special = function(str){
return str.replace(/&/g, '&').replace(/'/g, ''').replace(/"/g, '"').replace(/</g, '<').replace(/>/g, '>');
}
unspecial = function(str){
return str.replace(/&/g, '&').replace(/'/g, "'").replace(/"/g, '"').replace(/</g, '<').replace(/>/g, '>');
}
shuffle = function(array){
var a = array.slice(), l = a.length;
a.sort(function(b, c){
return 0.5 - Math.random();
});
return a;
}
ReaderBoard = function(outputElement){
this.output;
var t = this;
this.setOutput = function(element){
this.output = element;
return this;
}
this.setOutput(outputElement);
this.setText = function(text){
this.output.innerHTML = '';
for(var i=0,a=text.split(''),s,d,l=a.length; i<l; i++){
d = M('div'); s = a[i];
if(s === ' ')d.className = 'space';
d.innerHTML = special(s); this.output.appendChild(d);
}
return this;
}
}
autoBoard = function(outputElement, textArray, interval, noLoop){
var rb = new ReaderBoard(outputElement), i = 0, r, l = textArray.length;
var v = interval || 1500;
rb.setText(textArray[0]);
r = setInterval(function(){
i++;
if(i === l){
if(noLoop){
clearInterval(r); r = undefined;
return;
}
else{
i = 0;
}
}
rb.setText(textArray[i]);
}, v);
}
randBoard = function(outputElement, textArray, interval, noLoop){
var rb = new ReaderBoard(outputElement), i = 0, r, a = shuffle(textArray), l = a.length;
var v = interval || 1500;
rb.setText(a[0]);
r = setInterval(function(){
i++;
if(i === l){
if(noLoop){
clearInterval(r); r = undefined;
return;
}
else{
a = shuffle(a); i = 0;
}
}
rb.setText(a[i]);
}, v);
}
var rb = new ReaderBoard(I('readerboard'));
rb.setText('Hello World!');
autoBoard(I('autoboard'), ['Check this out!', "It's a reader board.", 'This one runs in order.', 'Are you not amazed?']);
autoBoard(I('noloop_autoboard'), ['Check this out!', "It's a reader board.", 'This one runs in order.', 'Are you not amazed?'], 2000, true);
randBoard(I('randboard'), ['This is Awesome!', "Isn't totally random.", 'Create Something Cool', 'Success!', 'Nice']);
randBoard(I('noloop_randboard'), ['This is Awesome!', "Isn't totally random.", 'Create Something Cool', 'Success!', 'Nice'], 3500, true);
});
//]]>
/* css/external.css */
*{
box-sizing:border-box; padding:0; margin:0;
}
html,body{
width:100%; height:100%;
}
body{
background:#ccc;
}
.flex_text{
display:flex;
}
.flex_text>div{
flex:1; background:#fff; font:bold 30px Arial, Helvetica, sans-serif; text-align:center; margin:3px;
}
.flex_text>.space{
background:#ccc; margin:0;
}
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
<head>
<meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1' />
<title>Test Template</title>
<link type='text/css' rel='stylesheet' href='css/external.css' />
<script type='text/javascript' src='js/external.js'></script>
</head>
<body>
<div class='flex_text' id='readerboard'></div>
<hr />
<div class='flex_text' id='autoboard'></div>
<hr />
<div class='flex_text' id='noloop_autoboard'></div>
<hr />
<div class='flex_text' id='randboard'></div>
<hr />
<div class='flex_text' id='noloop_randboard'></div>
</body>
</html>
Just a thought.
So I am dynamically creating divs from javscript and then placing them into a div called "wrapper". However, my divs are all out of wack. The system i am using is like this:
I have 1 single card with info on it, and i want that made created 5 times, then placed into another div that holds that kind of card together. I do this as many times as my array length is.
Once I have all that I append the jobholder div that hold 5 cards themselves into the wrapper div, but everything is unsuccessful.
What is wrong with my CSS?
<!doctype html>
<html>
<head>
<meta charset="UTF-8" content="HTML,CSS,XML,JavaScript">
<meta http-equiv="refresh" content="1800">
<link rel="stylesheet" type="text/css" href="styles/JobDiv.css">
<script type="text/javascript" src="scripts/JobDiv.js"></script>
<script type="text/javascript" src="scripts/jquery.js"></script>
</head>
<body>
<div class="wrapper12">
</div>
</body>
</html>
.wrapper12{
display:inline-block;
top:25%;
left: 5em;
overflow:auto;
position:relative;
}
.boxHold{
width: 10em;
height: 10em;
top : 50%;
margin: 5em;
background : red;
font-size : 10px;
text-align:center;
position: relative;
-moz-user-select:none;
float:left;
}
.boxMe{
width: 100%;
height:100%;
top : 25%;
background : red;
font-size : 10px;
text-align:center;
position: absolute;
-moz-user-select:none;
}
#boxB{
width: 15em;
height: 15em;
top : 0%;
left: 60em;
background : blue;
font-size : 15px;
margin: 1em;
text-align:center;
position: relative;
z-index:1;
}
.boxC{
width: 13em;
height: 13em;
top : 0;
background : yellow;
font-size : 100%;
margin: 1em;
left:5em;
text-align:center;
position: absolute;
-moz-user-select:none;
}
li.item{
list-style:none;
padding:5px;
}
ul.prolist{
list-style-position:inside;
text-align:center;
}
var arr;
var counter = 0;
var pageBody = document.getElementsByTagName('body');
var wrapper12 = document.getElementsByClassName('wrapper12');
window.onload = function(){
arr=[['638110','2015-12-13',12],['638123','2015-12-15',5],['638124','2015-12-15',2],['638125','2015-12-15',1],['638126','2015-12-15',10],['638127','2015-12-15',7],
['638128','2015-12-15',1],['638129','2015-12-15',10],['638130','2015-12-15',7],['638131','2015-12-15',1],['638132','2015-12-15',10],['638133','2015-12-15',7],['638134','2015-12-15',7],['638135','2015-12-15',7]];
buildInsert();
buildDiv();
}
function createCard(arr)
{
var ul = document.createElement('ul');
ul.setAttribute("class","prolist");
for(var i=0; i<=arr.length-1;i++)
{
var li = document.createElement('li');
li.setAttribute("class","item")
li.innerHTML = arr[i];
ul.appendChild(li);
}
return ul;
}
function buildDiv(){
for(var i = 0; i<=arr.length-1;i++){
counter = i*150;
var jobholder = document.createElement('div');
jobholder.setAttribute("class","boxHold");
for(var j=10;j>=1;j--){
var jobdiv = document.createElement('div');
//var ul = createCard(arr[i]);
var jobnum = document.createTextNode(arr[i][0] + "\n" + arr[i][1] + "\n" + arr[i][2] );
jobdiv.setAttribute("class","boxMe");
jobdiv.setAttribute("id",""+arr[i][0]+" "+j);
jobdiv.setAttribute("draggable","true");
jobdiv.setAttribute("ondragstart", "return dragStart(event)");
jobdiv.setAttribute("ondrop", "return dragDrop(event)");
$(jobholder).css({left:counter});
jobdiv.appendChild(jobnum);
jobholder.appendChild(jobdiv);
$(jobholder).appendTo(wrapper12);
}
}
}
I found the problem, It was me setting my 'left:counter' property on the jobholder div. Once i removed that, it worked.