how to repeat a div X times over html page,
lets say I want to set variance to declare times of repeat.
repeat this section 5 times, I assume it's with JS.
<div class="blackstrip">black</div>
<div class="bluestrip">
BLUE
<div class="whitestrip">WHITE strip</div>
</div>
I'm adding the css as it comes out strange look -
.blackstrip{
opacity: 0.8;
width: 600px;
height: 100px;
background-color: black;
background-position: center;
padding-top: 10px;
padding-bottom: 10px;
text-align: center;
margin: 0 auto;
}
.bluestrip{
opacity: 0.5;
width: 600px;
height: 300px;
background-color: blue;
background-repeat: none;
padding-bottom: 10px;
position: relative;
margin-top:50px;
margin: 20px auto;
}
.whitestrip{
opacity: 0.8;
width: 100px;
height:300px;
background-color: gray;
position: relative;
float: right;
padding-top: 10px;
padding-bottom: 10px;
}
Just use a for loop eg:
var amount = 5;
for (var i = 0; i < amount; i++){
var new_div = document.createElement("div");
new_div.className = "bluestrip";
document.body.appendChild(new_div);
console.log("This is repeat " + i);
}
Simple technic, huh?
https://jsfiddle.net/d15e9r6z/
Like Andreas said, it is more effective if you use
DocumentFragment to change multiple DOM's.
Related
This question already has answers here:
How To Get Font Size in HTML
(9 answers)
Closed 1 year ago.
I want to address to font-size to change the size of a ball when pressing keys, but in switch the program sees only size (instead of font-size) after a hyphen.
Task: Create a page that displays a balloon (using emoji https://emojipedia.org/balloon/). When you click the up arrow, the ball should inflate (increase) by 10 percent, and when you click the down arrow, it should inflate (decrease) by 10 percent.
Then finish the program as follows, if the ball is inflated to a certain size, it will explode. That is, you need to replace the emoji of the ball (balloon) with the emoji of the explosion (https://emojipedia.org/collision-symbol/). You need to remove the event handler (the explosion cannot be inflated or inflated)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
html, body{
margin:0;
overflow:hidden;
}
#blueRect{
margin-left: auto;
margin-right: auto;
width:1000px;
height:1000px;
background-color: none;
font-size: 500px;
text-align: center;
cursor: default
}
.box1 {
position: relative;
margin-left: auto;
margin-right: auto;
top: auto;
bottom: auto;
height: 1500px;
width: 1000px;
}
.one {
height: 80%;
width: 80%;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
}
.two {
height: 80%;
width: 80%;
position: absolute;
left: 0px;
top: 0px;
visibility:hidden;
}
#second{
margin-left: auto;
margin-right: auto;
width:1000px;
height:1000px;
background-color: none;
font-size: 500px;
text-align: center;
cursor: default
}
</style>
</head>
<body>
<div class = "box1">
<div class = "one" id="blueRect">🎈</div>
<div class = "two" id="second">💥</div>
</div>
<script>
function moveRect(e){
var blueRect = document.getElementById("blueRect");
var cs = window.getComputedStyle(blueRect);
var size = parseInt(cs.style.fontSize);
switch(e.key)
{
case "ArrowUp":
blueRect.style.fontSize = size + 10 + "px"; /*setSize(size+10px)*/
break;
case "ArrowDown":
blueRect.style.fontSize = size - 10 + "px";
break;
}
}
addEventListener("keydown", moveRect);
if (size > 50px){
one.style.visibility = hidden;
two.style.visibility = visible;
}
</script>
</body>
</html>
You can use below codes with adding up your own functionality , below code is just to reference , make it use and develop accordingly based on your needs.Hope this may help. Codepen Demo.
var blueRect = document.getElementById("blueRect");
var size_val = window.getComputedStyle(blueRect,null).getPropertyValue("font-size");
var size = parseInt(size_val);
function moveRect(event){
//alert(event.type);
switch(event.type)
{
case "click":
var newSize = (size + 10);
size = newSize;
blueRect.style.fontSize = newSize +"px"; /*setSize(size+10px)*/
break;
}
}
blueRect.addEventListener("click", moveRect); // Put your arrowup and arrowdown similar to this here blueRect act as up similarly do it for down
html, body{
margin:0;
overflow:hidden;
}
#blueRect{
margin-left: auto;
margin-right: auto;
width:1000px;
height:1000px;
background-color: none;
font-size: 500px;
text-align: center;
cursor: default
}
.box1 {
position: relative;
margin-left: auto;
margin-right: auto;
top: auto;
bottom: auto;
height: 1500px;
width: 1000px;
}
.one {
height: 80%;
width: 80%;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
}
.two {
height: 80%;
width: 80%;
position: absolute;
left: 0px;
top: 0px;
visibility:hidden;
}
#second{
margin-left: auto;
margin-right: auto;
width:1000px;
height:1000px;
background-color: none;
font-size: 500px;
text-align: center;
cursor: default
}
<body>
<div class = "box1">
<div class = "one" id="blueRect">🎈</div>
</div>
</body>
<style>
* {padding: 0; margin: 0;}
#game {width: 300px; height: 400px; border: 2px solid #222; background-color: #ccc; margin: 50px; position: relative; overflow: hidden;}
#character {width: 20px; height: 20px; background-color: #ffc554; border: 2px solid #222; position: absolute; bottom: 0; left: 0;}
.block {width: 10px; height: 10px; background-color: #ff5252; border-radius: 50%; border: 2px solid #222; position: absolute; top: -50px; left: -20px;}
.falling {animation: fall 2s infinite linear;}
#keyframes fall {
0% {top: -50px}
100% {top: 450px;}
}
</style>
<body>
<div id="game">
<div id="character"></div>
</div>
</body>
SCRIPT
var block = [];
function createEnemy(nth) {
var divAddText = '<div class="block ' + nth + '"></div>'
document.getElementById('game').innerHTML += divAddText;
block[nth] = document.getElementsByClassName(nth)[0];
block[nth].classList.add("falling");
setInterval(function() {
block[nth].style.left = Math.floor(Math.random() * 290) + "px";
}, 2000);
}
As you can see in the SCRIPT part, I tried to write a block creating and falling code.
It worked well when I executed createEnemy(1) in chrome console.
The first block created went smoothly falling from random left points as I expected.
But as soon as I added createEnemy(2), the first block started to fall from the same left point while the second block was just fine falling from random left points.
Could any of you guys give me some insight into this issue?
Don't use innerHTML when displaying your enemies, instead use createElement and appendChild.
const enemies = [];
const game = document.getElementById("game");
function createEnemy(name) {
const enemy = document.createElement("div");
enemy.classList.add("block", "falling", name);
enemies.push(enemy);
game.appendChild(enemy);
setInterval(function() {
enemy.style.left = Math.floor(Math.random() * 290) + "px";
}, 2000);
}
createEnemy(1);
createEnemy(2);
* {
padding: 0;
margin: 0;
}
#game {
width: 300px;
height: 400px;
border: 2px solid #222;
background-color: #ccc;
margin: 50px;
position: relative;
overflow: hidden;
}
#character {
width: 20px;
height: 20px;
background-color: #ffc554;
border: 2px solid #222;
position: absolute;
bottom: 0;
left: 0;
}
.block {
width: 10px;
height: 10px;
background-color: #ff5252;
border-radius: 50%;
border: 2px solid #222;
position: absolute;
top: -50px;
left: -20px;
}
.falling {
animation: fall 2s infinite linear;
}
#keyframes fall {
0% {
top: -50px;
}
100% {
top: 450px;
}
}
<div id="game">
<div id="character"></div>
</div>
PS: I'm not sure why your code is not working as expected, I believe it has something to do with innerHTML. Hopefully someone could explain.
What is the best way to fill in the space between these two objects, essentially making one object that fills the space from the most left the a to the most right of b. I need a dynamic solution, since the the position of A and B will vary, sometimes B will be further left than A. I would like them to begin as two separate objects though. Also note only the space between the two do I wish to be filled, nothing outside.
function myFunction() {
var x = document.getElementById('a');
var y = document.getElementById('b');
x.style.right = "70%";
y.style.right = "50%";
var greenRect = x.getBoundingClientRect();
var blueRect = y.getBoundingClientRect();
}
h1 {
position: relative;
width: auto;
height: 50px;
background-color: beige;
}
h2 {
position: relative;
}
#a {
position: relative;
width: 50px;
height: 50px;
background-color: green;
float: right;
margin-left: -50px;
transform-origin: left;
border-radius: 50%;
}
#b {
position: relative;
width: 50px;
height: 50px;
background-color: green;
float: right;
border-radius: 50%;
}
<h1>
<div id='a'></div>
<div id='b'></div>
</h1>
<h2>
<button onclick='myFunction()'>PRESS</button>
</h2>
function myFunction() {
var x = document.getElementById('a');
var y = document.getElementById('b');
x.style.right = "70%";
y.style.right = "50%";
var greenRect = x.getBoundingClientRect();
var blueRect = y.getBoundingClientRect();
y.style.width = (blueRect.left - greenRect.left) + "px";
}
h1 {
position: relative;
width: auto;
height: 50px;
background-color: beige;
}
h2 {
position: relative;
}
#a {
position:relative;
width: 50px;
height: 50px;
background-color: green;
float: right;
margin-left: -50px;
transform-origin: left;
}
#b {
position:relative;
min-width: 50px;
height: 50px;
background-color: green;
float: right;
}
<h1>
<div id = 'a'></div>
<div id = 'b'></div>
</h1>
<h2>
<button onclick = 'myFunction()'>PRESS</button>
</h2>
You can use some background and box-shadow trick to visually fill the space between:
var x = document.getElementById('a');
var y = document.getElementById('b');
function myFunction() {
var r = Math.random()*100;
y.style.right=r+"%";
x.style.right=(Math.random()*(100 - r) + r)+"%";
}
h1 {
overflow:auto;
background-color: blue;
color:#fff;
text-align:center;
}
#a {
position: relative;
width: 50px;
height: 50px;
background-color: green;
float: right;
margin-left: -50px;
transform-origin: left;
border-radius: 50%;
box-shadow:-50vw 0 0 50vw beige;
}
#b {
position: relative;
width: 50px;
height: 50px;
background-color: green;
float: right;
border-radius: 50%;
box-shadow:50vw 0 0 50vw beige;
}
<h1>
<div id='a'>1</div>
<div id='b'>2</div>
</h1>
<h2>
<button onclick='myFunction()'>PRESS</button>
</h2>
JoinVideoCallButton
Hi!
I simply wonder if anyone here have any idea how to make such a hover effect that could be used for such double option buttons or navbars etc.
I have the css and html code for it but I have no idea how to make the effect work. Also, I wonder if it is possible without the use of Jquery?
body {
background-size: 100%;
margin: 0px;
background-color: gray;
}
.joinVideoCallButton-2Pohj0 {
-ms-flex-align: center;
-ms-flex-pack: center;
-webkit-box-align: center;
-webkit-box-pack: center;
-webkit-box-sizing: border-box;
align-items: center;
background-color: #43b581;
border-radius: 3px;
box-sizing: border-box;
cursor: pointer;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 36px;
justify-content: center;
overflow: hidden;
padding: 0 14px;
position: relative;
}
.joinVideoCallButton-2Pohj0 .underlay-1LCk7B {
-webkit-transition: opacity .1s ease;
background-color: #69c49a;
border-radius: 3px;
bottom: 0;
left: 0;
margin: 2px;
position: absolute;
top: 0;
transition: opacity .1s ease;
width: 50%;
flex: 1 1 auto;
}
.joinVideoCallButton-2Pohj0 .inner-1e8n63 {
cursor: pointer;
z-index: 1;
flex: 1 1 auto;
}
.flex-lFgbSz:first-child, .horizontal-2BEEBe>.flexChild-1KGW5q:first-child {
margin-left: 0;
}
.flex-lFgbSz, .horizontal-2BEEBe>.flexChild-1KGW5q {
margin-left: 10px;
margin-right: 10px;
}
.joinVideoCallButton-2Pohj0 .callDivider-_hMb9n {
background-color: #69c49a;
height: 20px;
margin: 0 2px;
opacity: .6;
width: 2px;
}
.joinVideoCallButton-2Pohj0 .icon-3tOP24 {
height: 16px;
width: 16px;
}
.joinVideoCallButton-2Pohj0 .buttonText-1b8lyZ {
color: #f6f6f7;
font-size: 14px;
margin-left: 8px;
margin-right: 8px;
text-transform: uppercase;
}
.wrapper-1XTKlU{
background-size:cover;
min-height:100vh;
overflow:hidden
}
.flexWrapper-1ztpWj{
height:100vh
}
.flex-3B1Tl4{
display:-webkit-box;
display:-ms-flexbox;
display:flex
}
.alignStart-pnSyE6{
-ms-flex-align:start;
-webkit-box-align:start;
align-items:flex-start
}
.alignEnd-3PVyen{
-ms-flex-align:end;
-webkit-box-align:end;
align-items:flex-end
}
.alignCenter-3VxkQP{
-ms-flex-align:center;
-webkit-box-align:center;
align-items:center
}
.alignStretch-1hwxMa{
-ms-flex-align:stretch;
-webkit-box-align:stretch;
align-items:stretch
}
.alignBaseline-4enZzv{
-ms-flex-align:baseline;
-webkit-box-align:baseline;
align-items:baseline
}
.justifyStart-2yIZo0{
-ms-flex-pack:start;
-webkit-box-pack:start;
justify-content:flex-start
}
.justifyEnd-1ceqOU{
-ms-flex-pack:end;
-webkit-box-pack:end;
justify-content:flex-end
}
.justifyCenter-29N31w{
-ms-flex-pack:center;
-webkit-box-pack:center;
justify-content:center
}
.justifyBetween-1d1Hto{
-ms-flex-pack:justify;
-webkit-box-pack:justify;
justify-content:space-between
}
.horizontal-2VE-Fw>.spacer-2Aeq3k,.horizontalReverse-k5PqxT>.spacer-2Aeq3k,.vertical-3X17r5>.spacer-2Aeq3k{
min-height:1px
}
.horizontal-2BEEBe>.flex-lFgbSz,.horizontal-2BEEBe>.flexChild-1KGW5q{
margin-left:10px;
margin-right:10px
}
.horizontal-2BEEBe>.flex-lFgbSz:first-child,.horizontal-2BEEBe>.flexChild-1KGW5q:first-child{
margin-left:0
}
.horizontal-2BEEBe>.flex-lFgbSz:last-child,.horizontal-2BEEBe>.flexChild-1KGW5q:last-child{
margin-right:0
}
<div class="flex-lFgbSz flex-3B1Tl4 horizontal-2BEEBe horizontal-2VE-Fw flex-3B1Tl4 directionRow-yNbSvJ justifyCenter-29N31w alignStretch-1hwxMa noWrap-v6g9vO private-channel-call-actions" style="">
<div class="joinVideoCallButton-2Pohj0">
<div class="underlay-1LCk7B" style="opacity: 1; transform: translateX(31.5781px);"></div>
<div class="flex-lFgbSz flex-3B1Tl4 horizontal-2BEEBe horizontal-2VE-Fw flex-3B1Tl4 directionRow-yNbSvJ justifyCenter-29N31w alignCenter-3VxkQP noWrap-v6g9vO inner-1e8n63" style="flex: 1 1 auto;">
<div class="flex-lFgbSz flex-3B1Tl4 horizontal-2BEEBe horizontal-2VE-Fw flex-3B1Tl4 directionRow-yNbSvJ justifyCenter-29N31w alignCenter-3VxkQP noWrap-v6g9vO callButton-205P-D" style="flex: 1 1 auto;"><img class="icon-3tOP24" src="http://discordapp.com/assets/0682cf612d4fed39efb57e0a1bcc8544.svg">
<div class="buttonText-1b8lyZ">Video</div>
</div>
<div class="callDivider-_hMb9n"></div>
<div class="flex-lFgbSz flex-3B1Tl4 horizontal-2BEEBe horizontal-2VE-Fw flex-3B1Tl4 directionRow-yNbSvJ justifyCenter-29N31w alignCenter-3VxkQP noWrap-v6g9vO callButton-205P-D" style="flex: 1 1 auto;">
<div class="buttonText-1b8lyZ">Voice</div><img class="icon-3tOP24" src="http://discordapp.com/assets/8b47456a037cc496c55ae8f871274018.svg"></div>
</div>
</div>
</div>
Part 1
The idea is fairly simple: you need to add an extra "hover box" element inside the button row, absolute position it, and finally just change the left value of the object according to the position of the cursor:
function relocateHoverBox(e) {
// Get all the needed values
// (idealy don't use as many variables)
let hoverBoxEl = e.target.closest(".btn-row").querySelector(".btn-row--hover-box");
let hoverBoxHalfWidth = hoverBoxEl.clientWidth / 2;
let containerX = e.target.closest(".btn-row").getBoundingClientRect().left;
let maxLeft = e.target.closest(".btn-row").clientWidth - hoverBoxEl.clientWidth;
let newLeftValue = e.pageX - containerX - hoverBoxHalfWidth;
// Apply new left value accordingly
if (newLeftValue >= 0) {
if (newLeftValue > maxLeft) {
hoverBoxEl.style.left = maxLeft + "px";
}
else {
hoverBoxEl.style.left = e.pageX - containerX - hoverBoxHalfWidth + "px";
}
}
else {
hoverBoxEl.style.left = 0 + "px";
}
}
// Set the hover box in the right position as soon as the mouse enters
const mouseoverHandler = function(e) {
relocateHoverBox(e);
}
// Update the hover box position
const mousemoveHandler = function(e) {
relocateHoverBox(e);
}
// Reset the hover box position
const mouseleaveHandler = function(e) {
e.target.closest(".btn-row").querySelector(".btn-row--hover-box").style.left = "";
}
document.getElementsByClassName("btn-row")[0].addEventListener('mousemove', mousemoveHandler);
document.getElementsByClassName("btn-row")[0].addEventListener('mouseenter', mouseoverHandler);
document.getElementsByClassName("btn-row")[0].addEventListener('mouseleave', mouseleaveHandler);
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #202225;
}
.btn-row {
display: flex;
justify-content: center;
align-items: center;
border-radius: 4px;
height: 48px;
background: #43b581;
position: relative;
}
.btn-row--hover-box {
width: 50%;
height: 44px;
border-radius: 2px;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.btn-row--hover-box:hover {
background: rgba(255, 255, 255, 0.25);
}
.btn {
background: transparent;
letter-spacing: .1rem;
padding: 0 1rem;
border: 0;
color: #fff;
height: 28px;
display: block;
font-weight: bold;
text-transform: uppercase;
}
<div class="btn-row">
<div class="btn-row--hover-box"></div>
<button class="btn">Option 1</button>
<button class="btn">Option 2</button>
</div>
Part 2
Also, I wonder if it is possible without the use of Jquery?
If by "Jquery" you actually mean the jQuery library, then just remember that it is a library, which means that it is only a collection of useful scripts written in a programming language, then since you can write your own scripts using that language, it is possible to do it without jQuery
If by "Jquery" you mean Javascript (the language in which jQuery is written), then it's not possible to do it without it, since you need it to follow the x-coordinate of the cursor.
I made a content tile that when clicked, activates another part of the screen. On the tile, I have a couple links that, when clicked, go to new pages. I made a non-javascript version that works fine.
No javascript:
https://jsfiddle.net/raazqqks/2/
HTML:
<div class="tile activeTile" id="response0">
<div class="responseContainer">
<div class="left">
<h4 class="title">
<a class="topLink" href="javascript:alert('Link clicked')">Title</a>
</h4>
<p>Foo bar</p>
<p>Foo bar?</p>
<p class="extra">
<a class="topLink" href="javascript:alert('Link clicked')">Extra foo bar!</a>
</p>
</div>
<div class="bonus">
<p>Bonus</p>
</div>
<a class="noJavaLink" id="0" href="javascript:alert('Tile clicked');"></a>
</div>
</div>
CSS:
.responseContainer {
position: relative;
overflow: hidden;
z-index: 0;
transition: all linear .2s;
border: 1px solid grey;
border-radius: 4px;
background-color: white;
}
.responseContainer p {
margin: 0;
}
.tile {
width: 80%;
text-align: left;
margin: 16px 48px 16px 32px;
margin-top: 0;
transition: all linear .2s;
z-index: 0;
border-radius: 4px;
background-repeat: no-repeat;
}
.activeTile {
width: 90%;
border-radius: 4px;
color: white;
}
.activeTile > div {
background-color: rgba(33, 33, 33, .5);
}
.left {
float: left;
margin: 10px;
margin-top: -10px;
max-width: 50%;
}
.title {
font-size: 1.2em;
}
.title h4 {
margin: 20px 0 20px;
}
.bonus {
float: right;
margin-top: 10px;
margin: 10px;
font-size: 1.5em;
max-width: 50%;
}
.topLink {
position: relative;
z-index: 100;
}
.noJavaLink {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-decoration: none;
z-index: 10;
background-color: white;
border-radius: 4px;
opacity: 0;
filter: alpha(opacity=0);
cursor: pointer;
}
.active .noJavaLink {
pointer-events: none;
cursor: default;
}
I want to add simple animations to it, so if javascript is available, this version loads.
Javascript:
https://jsfiddle.net/n4svaLut/
Javascript:
document.addEventListener("DOMContentLoaded", setJavascriptTileAnimation(), false );
/* Set onclick events for tile animation
|
*/
function setJavascriptTileAnimation() {
var tiles = document.getElementsByClassName('tile')
var links = document.getElementsByClassName('noJavaLink');
for (var i = 0; i < tiles.length; i++) {
var tile = tiles[i];
var id = tile['id'];
tile.onclick = function() {
changeActiveTile(this.id);
//return false;
};
links[i].removeAttribute('href');
};
}
/* Toggle active tile
|
*/
function changeActiveTile(id) {
id_number = getIdNumber(id);
active_tile = document.getElementsByClassName('tile activeTile')[0];
active_tile.classList.remove('activeTile');
setTimeout(function() {
tile = document.getElementById(id);
tile.classList.add('activeTile');
}, 300);
}
function getIdNumber(id) {
return id.replace( /^\D+/g, '');
}
Notice how the links only work on a double click. Ive been playing around with this for two days and havent made any progress at all. Any ideas?
SOLUTION: Remove 'return false' from the onclick setter.