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.
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>
var result;
var gasoline = document.getElementById("gasolina").value
var alcohol = document.getElementById("alcool").value
var converte = parseInt(gasolina)
function calculo(){
valor = document.getElementById("text")
var calculando = function calculando(){
var divisao = newAlcool % newGasolina
if(divisao > 0.75){
result = "Gasoline is better"
valor.innerHTML = `${result}`
}else{
result = "alcohol is better"
valor.innerHTML = `${result}`
}
}
if(!alcohol || !gasoline || isNaN(alcohol) || isNaN(gasoline)){
result = "Please fill in the required field"
valor.innerHTML = `${result}`
}else{
newGasolina = parseInt(gasoline)
newAlcool = parseInt(alcohol)
calculando()
}
}
*{
background-image: url('img/Background.png');
background-size: 100%;
font-family: 'Prompt', sans-serif;
color: black;
}
.txtmenor{
font-size: 15px;
}
div{
text-align: center;
border:none;
background: transparent;
outline: none;
}
.logo{
width: 150px;
background: transparent;
}
h1{
background: transparent;
align-items: center;
text-align: center;
font-size: 18px;
margin-bottom: 0px;
}
.calcular{
margin-top: 15px;
align-items: center;
text-align: center;
background: transparent;
padding: 0;
border: none;
background: none;
}
.calcularimg{
width: 150px;
text-align: center;
background: transparent;
border-radius: 10px;
}
input{
margin: 0;
color: #314591;
background: white;
text-align: center;
background-image: none;
margin-right: 10px;
}
a{
text-align: center;
border:none;
background: transparent;
outline: none;
}
p{
background: transparent;
}
<!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">
<title>Alcool ou Gasolina</title>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Prompt:wght#300&display=swap" rel="stylesheet">
<script src="main.js"></script>
</head>
<body>
<header id="header">
<!--<div><img src="img/Logo App.png" alt="Alcool Ou Gasolina" class="logo"></div>-->
<h1>Vamos Comparar qual e o melhor para o seu carro entre alcool e gasolina </h1>
<h1 class="txtmenor"><div>Alcool Gasolina</div> </h1>
<div><input type="number" name="" id="gasolina" placeholder="Ex:0.00" min="0">
<input type="number" name="" id="alcool" placeholder="Ex:0.00" min="0"><br></div>
<a hidden href="http://127.0.0.1:5500/calcular.html"> <p> Entenda o calculo </p></a>
<div><button onclick="calculo()" class="calcular" id="calcular">calculo</button></div>
<h1 id="text"></h1>
</header>
</body>
</html>
I tried many ways to this code work but doesnt work
my objective is calculate what is better alcohol or gasoline but my isNaN doesnt verify if the fields are empty.still doesnt work it keeps showing "Please fill in the required" field regardless of whether it is filled.
and my function maybe doesnt work im not sure
my code:
var result;
var gasoline = document.getElementById("gasolina").value
var alcohol = document.getElementById("alcool").value
var converte = parseInt(gasolina)
function calculo(){
valor = document.getElementById("text")
var calculando = function calculando(){
var divisao = newAlcool % newGasolina
if(divisao > 0.75){
result = "Gasoline is better"
valor.innerHTML = `${result}`
}else{
result = "alcohol is better"
valor.innerHTML = `${result}`
}
}
if(!alcohol || !gasoline || isNaN(alcohol) || isNaN(gasoline)){
result = "Please fill in the required field"
valor.innerHTML = `${result}`
}else{
newGasolina = parseInt(gasoline)
newAlcool = parseInt(alcohol)
calculando()
}
}
If checking isNaN you want, then update your if condition
if(!alcohol || !gasoline || isNaN(alcohol) || isNaN(gasoline)) {
}
and update your code, because your not getting value, you are only getting HTML element.
var gasoline = document.getElementById("gasolina").value;
var alcohol = document.getElementById("alcool").value;
because isNaN("") will always be false.
I'm trying to create a draggable slider with JavaScript. But it is not working on my one. I have tried the same JS code on a built-in HTML, from W3 School and that worked fluently. I can't understand what's the problem with my code!
I've tried almost everything on my concern. But still facing the same problem
let lists = document.querySelector("#lists");
let cursorRunningPosition;
let cursorStartingPosition;
let cursorMoved;
let scrollLeft;
let isdown = false;
lists.addEventListener("mousedown", (e) => {
isdown = true;
cursorStartingPosition = e.pageX;
lists.style.cursor = "grabbing";
if (isdown === true) {
scrollLeft = lists.scrollLeft;
}
})
lists.addEventListener("mouseup", (f) => {
isdown = false;
lists.style.cursor = "auto";
})
lists.addEventListener("mouseleave", (f) => {
isdown = false;
lists.style.cursor = "auto";
})
lists.addEventListener("mousemove", (g) => {
g.preventDefault();
if (isdown === true) {
cursorRunningPosition = g.pageX;
cursorMoved = cursorRunningPosition - cursorStartingPosition;
lists.scrollLeft = scrollLeft - cursorMoved;
}
})
li{
list-style-type: none;
background-color: lightcoral;
padding: 5px 10px 5px 10px;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
overflow: hidden;
}
#lists {
display: flex;
width: 157%;
justify-content: space-between;
}
.container {
width: 100%;
background-color: yellow;
height: 37vh;
overflow: hidden;
margin-left: 20%;
}
<!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">
<link rel="stylesheet" href="style.css">
<title>Test file</title>
</head>
<body>
<div class="container">
<div id="lists">
<li class="li-list">Home</li>
<li class="li-list">About</li>
<li class="li-list">Contact</li>
<li class="li-list">Portfolio</li>
<li class="li-list">Testimonials</li>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
const lists = document.querySelector(".container");
let cursorRunningPosition;
let cursorStartingPosition;
let cursorMoved;
let scrollLeft;
let isdown = false;
lists.addEventListener("mousedown", (e) => {
isdown = true;
cursorStartingPosition = e.pageX;
lists.style.cursor = "grabbing";
if (isdown === true) {
scrollLeft = lists.scrollLeft;
}
})
lists.addEventListener("mouseup", (f) => {
isdown = false;
lists.style.cursor = "auto";
})
lists.addEventListener("mouseleave", (f) => {
isdown = false;
lists.style.cursor = "auto";
})
lists.addEventListener("mousemove", (g) => {
g.preventDefault();
if (isdown == true) {
cursorRunningPosition = g.pageX;
cursorMoved = cursorRunningPosition - cursorStartingPosition;
lists.scrollLeft = scrollLeft - cursorMoved;
}
})
li{
list-style-type: none;
background-color: lightcoral;
padding: 5px 10px 5px 10px;
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
overflow: hidden;
}
#lists {
display: flex;
width: 157%;
justify-content: space-between;
}
.container {
width: 80%;
background-color: yellow;
height: 37vh;
margin-left: 20%;
overflow: auto;
}
.container::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.container {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
<!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">
<link rel="stylesheet" href="style.css">
<title>Test file</title>
</head>
<body>
<div class="container">
<div id="lists">
<li class="li-list">Home</li>
<li class="li-list">About</li>
<li class="li-list">Contact</li>
<li class="li-list">Portfolio</li>
<li class="li-list">Testimonials</li>
</div>
</div>
<script src="app.js"></script>
</body>
</html>
I played around with this and const worked better then var or let and the css for the container:
.container {
width: 80%;
background-color: yellow;
height: 37vh;
margin-left: 20%;
overflow: auto;
}
width to 80% and margin-left to 20% and 'overflow: auto' that enables scrolling. then remove scroll bar:
.container::-webkit-scrollbar {
display: none;
}
/* Hide scrollbar for IE, Edge and Firefox */
.container {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
PS: Click the 'Expand snippet' to see it better!
let myBtn = document.querySelector(".mainBtn");
let myManu = document.querySelector(".manu");
let manuOpen = false;
myManu.style.marginTop="-200px";
function menuFunction() {
if(manuOpen == false) { myManu.style.marginTop = "0px";
manuOpen = true;
}
else if (manuOpen == true) {
myManu.style.marginTop = "-200px";
manuOpen = false;
}
}
myBtn.onclick = menuFunction;
.mainBtn {
width: 40px;
height: 40px;
background: red;
z-index: 100;
margin-left: 10px;
cursor: pointer;
}
.mainBtn:hover {
background: yellow;
}
.social {
margin-right: 10px;
z-index: 100;
}
.manuSection {
max-width: 1080px;
width: 100%;
padding: 20px 0 20px 0;
float: right;
text-align: right;
}
.manu {
top: 40px;
max-width:1080px;
width: 100%;
position: absolute;
background: black;
transition: ease-in-out .5s;
}
.manu>ul>li, .manu>ul>li>a{
list-style: none;
text-decoration: none;
color: white;
}
.menuItems{
display: flex;
background: rgba(0,0,0,0.4);
justify-content: center;
margin: 2px;
padding: 7px;
}
.menuItems:hover{
background: rgba(134,134,134,0.32);
}
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#400;500&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function(){
$("header").load("asserts/header.html");
$("footer").load("asserts/footer.html");
});
</script>
</head>
<body>
<header></header>
when the header was in the index.html file the js "menuFunction" was working properly, however, I thought of load the header and the footer from a different folder to each page and took the header piece and loaded to the "header" section..! and finding the js function is throwing an error message..""Uncaught TypeError: Cannot read property 'style' of null",".
the header code is
<div class="headerItems">
<div class="manuSection">
<div class="socialAndBtn">
<div class="mainBtn"></div>
<div class="social">
<img src="https://picsum.photos/40/40?random=1" alt="">
<img src="https://picsum.photos/40/40?random=2" alt="">
<img src="https://picsum.photos/40/40?random=3" alt="">
</div>
</div>
<div class="manu">
<ul>
<li><span class="menuItems">Home</span></li>
<li><span class="menuItems">Services</span></li>
<li><span class="menuItems">Products</span></li>
<li><span class="menuItems">Contact</span></li>
</ul>
</div>
</div>
<div class="title"><h1>My Business Name</h1></div>
<div class="telephone"><h2>416 999 9999</h2></div>
</div>
When the browser reads the js code, especially document.querySelector(".mainBtn") and document.querySelector(".manu") the content of the header has not been loaded yet, hence the error message. load method can take a callback function as second argument, this function will be executed once the file has been loaded. My advise is to move your js code within this callback, like so…
$("header").load("asserts/header.html", function () {
let myBtn = document.querySelector(".mainBtn");
let myManu = document.querySelector(".manu");
let manuOpen = false;
myManu.style.marginTop = "-200px";
myBtn.onclick = menuFunction;
function menuFunction() {
if (manuOpen == false) {
myManu.style.marginTop = "0px";
manuOpen = true;
} else if (manuOpen == true) {
myManu.style.marginTop = "-200px";
manuOpen = false;
}
}
});
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>