attempting to loop through a div in the DOM and dynamically render it 300 times. Having trouble accessing the HTML within the styled element.
Code as follows:
Current Render
JavaScript File:
var amount = 5;
for(var i = 0; i < amount; i++){
var new_div = document.createElement("div");
new_div.className = "hello";
document.body.appendChild(new_div).innerHTML;
console.log("This is repeat " + i)
}
HTML File:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="hello">
<p>
Hello World!
</p>
</div>
<script src="app.js"></script>
</body>
</html>
CSS Style Sheet:
.hello {
width: 80%;
margin: 0 auto;
padding: 20px;
text-align: center;
border-style: outset;
border-width: 5px;
border-color: #d36135;
}
I want to be able to render the first div multiple times as it is exactly styled.
Why are you accessing innerHTML at the end of the append method? There is no need for that and that causes a problem.
Working example:
var amount = 5;
for(var i = 0; i < amount; i++){
var new_div = document.createElement("div");
new_div.className = "hello";
document.body.appendChild(new_div);
console.log("This is repeat " + i)
}
.hello {
width: 80%;
margin: 0 auto;
padding: 20px;
text-align: center;
border-style: outset;
border-width: 5px;
border-color: #d36135;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="hello">
<p>
Hello World!
</p>
</div>
<script src="app.js"></script>
</body>
</html>
Your code is working fine but it seems you want to clone the first element
var amount = 5;
for (var i = 0; i < amount; i++) {
let elem = document.getElementById("hello").cloneNode(true);
elem.id = 'hello_' + i;
document.body.appendChild(elem);
}
.hello {
width: 80%;
margin: 0 auto;
padding: 20px;
text-align: center;
border-style: outset;
border-width: 5px;
border-color: #d36135;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="hello" id='hello'>
<p>
Hello World!
</p>
</div>
<script src="app.js"></script>
</body>
</html>
Related
I'm working with fullPage.js and I wanted to make some text sit around the top. I expected margin-right and margin-top to work and I even tried vertical-align. They didn't work.
Here is my code.
.s1a {
background: url(/https://www.well-played.com.au/wp-content/uploads/2020/09/ps5-play-has-no-limits-video-thumb-01-en-11jun20.jpg);
background-size: cover;
}
.s1a h1 {
text-align: left;
margin-left: 2em;
vertical-align: top;
font-size: 4rem;
}
<!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>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.css" integrity="sha512-4rPgyv5iG0PZw8E+oRdfN/Gq+yilzt9rQ8Yci2jJ15rAyBmF0HBE4wFjBkoB72cxBeg63uobaj1UcNt/scV93w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="fullPage">
<div class="section s1a">
<h1>At **Removed**, we truly believe that</h1>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js" integrity="sha512-gSf3NCgs6wWEdztl1e6vUqtRP884ONnCNzCpomdoQ0xXsk06lrxJsR7jX5yM/qAGkPGsps+4bLV5IEjhOZX+gg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
new fullpage('#fullPage', {
autoScrolling: true
})
</script>
</body>
</html>
try
position: absolute;
left: x%;
top: y%;
where x and y are % from left and top
Floating the text to left may be helpful in this case.
*{
margin=0;
padding=0;
}
#fullPage {
background: url('https://www.well-played.com.au/wp-content/uploads/2020/09/ps5-play-has-no-limits-video-thumb-01-en-11jun20.jpg');
background-size: cover;
}
#fullPage h1 {
float : left;
font-size: 2rem;
}
<!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>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.css" integrity="sha512-4rPgyv5iG0PZw8E+oRdfN/Gq+yilzt9rQ8Yci2jJ15rAyBmF0HBE4wFjBkoB72cxBeg63uobaj1UcNt/scV93w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="fullPage">
<h1>At **Removed**, we truly believe that</h1>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js" integrity="sha512-gSf3NCgs6wWEdztl1e6vUqtRP884ONnCNzCpomdoQ0xXsk06lrxJsR7jX5yM/qAGkPGsps+4bLV5IEjhOZX+gg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
new fullpage('#fullPage', {
autoScrolling: true
})
</script>
</body>
</html>
#Make element position absolute with top and left value#
.s1a {
background: url(/https://www.well-played.com.au/wp-content/uploads/2020/09/ps5-play-has-no-limits-video-thumb-01-en-11jun20.jpg);
background-size: cover;
}
.s1a h1 {
position: absolute;
top: 0;
left: 0;
font-size: 4rem;
}
<!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>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.css" integrity="sha512-4rPgyv5iG0PZw8E+oRdfN/Gq+yilzt9rQ8Yci2jJ15rAyBmF0HBE4wFjBkoB72cxBeg63uobaj1UcNt/scV93w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<div id="fullPage">
<div class="section s1a">
<h1>At **Removed**, we truly believe that</h1>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.1.2/fullpage.min.js" integrity="sha512-gSf3NCgs6wWEdztl1e6vUqtRP884ONnCNzCpomdoQ0xXsk06lrxJsR7jX5yM/qAGkPGsps+4bLV5IEjhOZX+gg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
new fullpage('#fullPage', {
autoScrolling: true
})
</script>
</body>
</html>
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 1 year ago.
Improve this question
I don't know why anime.js doesn't work on my computer. I have added the CDN in my HTML file, but it still won't work, why?
"use strict";
anime({
targets: '#ball',
translateX: 250
});
body{
margin:0;
height: 100vh;
}
#ball{
border: black solid medium;
background-color: cyan;
width: 2%;
height: 2%;
border-radius: 50%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<link rel="stylesheet" href="test.css">
<title></title>
</head>
<body>
<div id="ball"></div>
</body>
<script src="test.js"></script>
<script> src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.js"</script>
</html>
Like #ggorlen and I said, your brackets for the second script tag were incorrect.
"use strict";
anime({
targets: '#ball',
translateX: 250
});
body{
margin:0;
height: 100vh;
}
#ball{
border: black solid medium;
background-color: cyan;
width: 2%;
height: 2%;
border-radius: 50%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<link rel="stylesheet" href="test.css">
<title></title>
</head>
<body>
<div id="ball"></div>
</body>
<script src="test.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.js"></script>
</html>
Try this
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<link rel="stylesheet" href="test.css">
<title></title>
</head>
<body>
<div id="ball"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.js"></script>
<script src="test.js"></script>
</body>
</html>
Your syntax for the script tag to the anime.js file was incorrect, and your test.js needs to be referenced after it in order for the anime() function to be defined.
Add this link in your code https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js
var animation = anime({
targets: '#ball',
translateX: 250
});
var animation = anime.js;
var anime = animation;
var animation = anime.js;
var ball = anime.js;
var animation = anime.js;
var anime = animation;
var anime = anime.js;
var anime = animation;
var animation = animation;
var anime = animation;
var animation = animation;
var animation = anime.js;
var anime = anime.js;
var animaton = anime.js;
var anime = animation;
var anime = anime.js;
body{
margin:0;
height: 100vh;
}
#ball{
border: black solid medium;
background-color: cyan;
width: 2%;
height: 2%;
border-radius: 50%;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<link rel="stylesheet" href="test.css">
<title></title>
</head>
<body>
<div id="ball"></div>
</body>
</html>
<script src="test.js"></script>
<script>https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js</script>
I have linked my HTML to jquery but when I run it in Microsoft edge, it outputs
"Help.js:1 Uncaught ReferenceError: $ is not defined
at Help.js:1
(anonymous) # Help.js:
Code:
$(document).ready(function(){
$(".navBar").hover(function(){
$(this).css("border","2px solid black")
})
})
navBar{
display: flex;
position: sticky;
top:0;
padding: 20px;
border: none;
width: 100%;
justify-content: center;
background-color: gainsboro;
z-index: 2;
}
#Title{
color: black;
font-family: monospace;
}
<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>A Random Website</title>
</head>
<body>
<script src="style.js"></script>
<script src="https://code.jquery.com/jquery-latest.js"></script>
<div class="navBar">
<div>
<h1 id="Title">SomeRandomWebsite</h1>
</div>
</div>
</body>
</html>
It is because you're using $ before jQuery has loaded.
// Instead of:
//...
<script src="style.js"></script>
<script src="http://code.jquery.com/jquery-latest.js"></script>
//...
// Use this:
// ...
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="style.js"></script>
// ...
And move those script tags to the line before the closing </body> tag. i.e:
// ...
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="style.js"></script>
</body>
</html>
Add scripts in your head tag and first load jquery and then your custom style.js file.
Also, add the defer attribute to your script.
Defer attribute when present, specifies that the script is executed when the page has finished parsing. You can read more about defer
$(document).ready(function() {
$(".navBar").hover(function() {
$(this).css("border", "2px solid black")
})
})
.navBar {
display: flex;
position: sticky;
top: 0;
padding: 20px;
border: none;
width: 100%;
justify-content: center;
background-color: gainsboro;
z-index: 2;
}
#Title {
color: black;
font-family: monospace;
}
<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>A Random Website</title>
<script src="https://code.jquery.com/jquery-latest.js" defer></script>
<script src="style.js" defer></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="navBar">
<div>
<h1 id="Title">SomeRandomWebsite</h1>
</div>
</div>
</body>
</html>
I have this html code
<!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="tablezone.css">
<script src="table.js"></script>
</head>
<body>
<div id="divTable"; class="zone"></div>
</body>
</html>
here is javascript code :
var img = document.createElement("img");
img.src="/Tables/table.png";
var src = document.getElementById("divTable");
src.appendChild(img);
here is the css code:
body{
background: url('/Tables/Riviera.jpeg');
height: 100vh;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.zone{
background: rgba(200, 200, 200, 0.7);
width: 1000px;
height: 600px;
margin-left: 200px;
}
when I run the code on a web browser the div is displayed with no image inside it.
The script runs before divTable has been added to the DOM, so the line document.getElementById("divTable") returns null. Moving the script tag to the end of the body ensures that the divTable element is in the DOM before getElementById runs.
<!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="tablezone.css">
</head>
<body>
<div id="divTable" class="zone"></div>
<script src="table.js"></script>
</body>
</html>
I'm looking for option how to comparison id in draggable&dropabble elements. It's my first journey with jquery.
Actually I have (fragments):
$(".letter").draggable();
$(".simpleSlot").droppable({
drop: function( event, ui ) {
var idDrag = ui.draggable.attr("id");
var idDrop = $this.attr("id");
$("#TEST").text("idDrag:" + idDrag + "; idDrop:" + idDrop);
if(idDrag == idDrop){ alert("Done!"); }
}
});
Droppable element:
var letter = $("<div class=\"letter\" id=\""+divId+"\"></div>").text(splitedWord[i]);
$("#divId").css({
left: positionX, top: positionY
});
$("#mixedWord").append(letter);
Draggable element is generated the same way.
And my css for droppable:
.letter{
border: 2px solid;
border-radius: 25px;
width: 50px;
height: 50px;
font-size: 30px;
text-align: center;
position: absolute;
}
HTML
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script src="js/flipclock/libs/prefixfree.min.js"></script>
<script src="js/flipclock/flipclock.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<style>
#draggable { width: 150px; height: 150px; padding: 0.5em; }
</style>
</head>
<body>
<div id="area">
<div id="time">Time:</div>
<div id="mixedWord"><!--here goes random word as simple letters in simple divs--> </div>
<div id="slots"></div>
<div id="height"></div>
<div id="width"></div>
</div>
</body>
MY PROBLEMS:
Draggable works. But when I drop something on droppable element - I can't move it more. It cannot be that.
It doesn't change #TEST - so it means drop doesn't work. Why?
And I don't have alert.